CSS (Cascading Style Sheets) is the code that styles web content. CSS basics walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout? How do I decorate my webpage with background images and colors?
Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language. CSS is what you use to selectively style HTML elements. For example, this CSS selects paragraph text, setting the color to red:
p {
color: red;
}
Let's try it out! Using a text editor, paste the three lines of CSS (above) into a new file. Save the file as style.css in a directory named styles.
To make the code work, we still need to apply this CSS (above) to your HTML document. Otherwise, the styling won't change the appearance of the HTML. (If you haven't been following our project, pause here to read Dealing with files and HTML basics.)
- Open your index.html file. Paste the following line in the head (between the <head> and </head> tags):
<link href="styles/style.css" rel="stylesheet" /> - Save index.html and load it in your browser.
Let's dissect the CSS code for red paragraph text to understand how it works:
The whole structure is called a ruleset. (The term ruleset is often referred to as just rule.) Note the names of the individual parts:
- Selector
-
This is the HTML element name at the start of the ruleset. It defines the element(s) to be styled (in this example, <p> elements). To style a different element, change the selector.
- Declaration
-
This is a single rule like color: red;. It specifies which of the element's properties you want to style.
- Properties
-
These are ways in which you can style an HTML element. (In this example, color is a property of the <p> elements.) In CSS, you choose which properties you want to affect in the rule.
- Property value
-
To the right of the property—after the colon—there is the property value. This chooses one out of many possible appearances for a given property. (For example, there are many color values in addition to red.)
Note the other important parts of the syntax:
- Apart from the selector, each ruleset must be wrapped in curly braces. ({})
- Within each declaration, you must use a colon (:) to separate the property from its value or values.
- Within each ruleset, you must use a semicolon (;) to separate each declaration from the next one.
To modify multiple property values in one ruleset, write them separated by semicolons, like this:
p {
color: red;
width: 500px;
border: 1px solid black;
}
You can also select multiple elements and apply a single ruleset to all of them. Separate multiple selectors by commas. For example:
p,
li,
h1 {
color: red;
}
Now that we've explored some CSS fundamentals, let's improve the appearance of the example by adding more rules and information to the style.css file.
- First, find the output from Google Fonts that
you previously saved from What will your website
look like?. Add the <link> element somewhere inside
your index.html's head (anywhere between the <head>
and </head> tags). It looks something like this:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" /> - Next, delete the existing rule you have in your style.css file. It was a good test, but let's not continue with lots of red text.
- Add the following lines (shown below), replacing the font-family
assignment with your font-family selection from What will your
website look like?. The property font-family refers to the font(s)
you want to use for text. This rule defines a global base font and
font size for the whole page. Since <html> is the parent element
of the whole page, all elements inside it inherit the same font-size and font-family.
html { font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google Fonts */ } - Now let's set font sizes for elements that will have text inside the
HTML body (h1, <li>, and <p>). We'll also center the heading.
Finally, let's expand the second ruleset (below) with settings for
line height and letter spacing to make body content more readable.
h1 { font-size: 60px; text-align: center; } p, li { font-size: 16px; line-height: 2; letter-spacing: 1px; }
Something you'll notice about writing CSS: a lot of it is about boxes. This includes setting size, color, and position. Most HTML elements on your page can be thought of as boxes sitting on top of other boxes.
CSS layout is mostly based on the box model. Each box taking up space on your page has properties like:
- padding, the space around the content. In the example below, it is the space around the paragraph text.
- border, the solid line that is just outside the padding.
- margin, the space around the outside of the border.
In this section we also use:
- width (of an element).
- background-color, the color behind an element's content and padding.
- color, the color of an element's content (usually text).
- text-shadow sets a drop shadow on the text inside an element.
- display sets the display mode of an element. (keep reading to learn more)
html {
background-color: #00539f;
}
This rule sets a background color for the entire page.
body {
width: 600px;
margin: 0 auto;
background-color: #ff9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
There are several declarations for the <body> element. Let's go through these line-by-line:
- width: 600px; This forces the body to always be 600 pixels wide.
- background-color: #FF9500; This sets the element's background color. This project uses a reddish orange for the body background color, as opposed to dark blue for the <html> element. (Feel free to experiment.)
- padding: 0 20px 20px 20px; This sets four values for padding. The goal is to put some space around the content. In this example, there is no padding on the top of the body, and 20 pixels on the right, bottom and left. The values set top, right, bottom, left, in that order. As with margin, you can use one, two, three, or four values, as documented in Padding Syntax.
- border: 5px solid black; This sets values for the width, style and color of the border. In this case, it's a five-pixel–wide, solid black border, on all sides of the body.
img {
display: block;
margin: 0 auto;
}
Next, we center the image to make it look better. We could use the margin: 0 auto trick again as we did for the body. But there are differences that require an additional setting to make the CSS work.
The <body> is a block element, meaning it takes up space on the page. The margin applied to a block element will be respected by other elements on the page. In contrast, images are inline elements, for the auto margin trick to work on this image, we must give it block-level behavior using display: block;.
- All the documentation in this page is taken from MDN