In Unit 1 we covered the role that CSS (Cascading Style Sheets) plays in a web page. CSS is a style sheet language. Style sheet languages are used to specify how a document should be presented to users. When the browser converts HTML to a visual format for users to see, it uses CSS to determine how each HTML element should look.
Web browsers will typically include very basic, minimal styles in their default CSS. If they didn’t have default CSS, you wouldn’t be able to view the content of any HTML page that didn’t have its own CSS! Default styles exist to make sure content is readable even if the author of the page didn’t include their own CSS. Different browsers might have different default styles but, in general, they’re pretty similar — headings are large and bold, paragraphs are separated on different lines, and links are blue or sometimes purple.
Below you can see the default styles applied to each element.
Default styles are very bland though, so developers will add their own, additional CSS to give their pages a more distinctive look and feel. CSS can be used to make simple stylistic changes, like changing the font of a particular element.
Below you can see the same HTML code with CSS added to change the heading font.
In Unit 1, we demonstrated how CSS can be used to make more dramatic changes in visual style by making a paragraph look like a button. The language is so extensive that it can even be used to create animations. We also showed you examples from Codepen of developers using CSS to create visual art.
When writing HTML, you use tags to create elements. When writing CSS, you use selectors and declarations to create rules. In other words, CSS syntax is used to define rules that specify groups of styles to apply to a particular elements or groups of elements on your web page.
Here’s a rule you saw earlier that changes the font of h1 elements:
h1 {
font-family: sans-serif;
}
To create a rule, start with a selector.
h1
h1 will select the element that our rule should be applied to. In this case, we’re selecting any h1 elements.
Then, add a pair of curly braces. In the curly braces, you’ll list one or more style declarations.
h1 {
}
Style declarations are pairs of property names and values that end with a semicolon.
h1 {
font-family: sans-serif;
}
In the example above, font-family is the name of a property and sans-serif is its value.
Additional declarations should be listed on separate lines. For example, if we also want to change the color of h1 elements, we can just add another declaration inside the curly braces like so:
h1 {
font-family: sans-serif;
color: purple;
}
Edit the CSS below in the Editable Code area so that a elements use a green, bold, sans-serif font. So far, the rule that selects all a elements only sets their font-family to sans-serif and color to green. Your task is to add another declaration to set the font-weight property to bold. You’ll see your changes update live, as you type, in the Live Output section. You can reset everything with the Reset button. Click on the Show Solution button to see the answer.
Now that you understand how to read CSS and how CSS rules are structured, we can take a more detailed look at the particulars of the language, starting with properties and values.
CSS rules are made of declarations — property-value pairs used to tell the browser how elements should be styled. Properties are identifiers that represent the stylistic features to be modified. So far, you’ve encountered properties like font-family, font-weight, and color. Each property is assigned a value that indicates how the property should be styled.
CSS values can take many different forms. So far, we’ve shown examples of using keyword values to set an element’s font and color like using the keyword bold to set font-weight and green to set color.
a {
font-weight: bold;
color: green;
}
Besides keywords, there are also numeric values and values that take the form of a function.
Numeric values are usually numbers followed by a unit of measure. For example, the width and height properties are styled with numeric values.
In the box below you can see how the width uses a numeric value.
Use numeric values to set an element’s padding-top and padding-bottom properties by adding to the CSS rule in the Editable code section below. So far, the rule selects the ul element and sets its background-color to aqua. Add two more declarations so padding-top and padding-bottom are both set to 15px. Click Show Solution to verify that you’re on the right track. If you need to start over, press Reset.
Other values are functions. For example, the rgb() function can be used to specify a color by the color’s red, green, and blue values.
Like HTML, CSS has syntax for comments. CSS comments start with /* and end with */. Developers use CSS comments for the same reasons they use HTML comments — they’re used to describe how the code works so others can understand it and can be used to temporarily “delete” a style without actually having to remove it.
aside {
/* Asides should be indented just a bit so they’re
not confused with main body text. */
margin-left: 50px;
}
p {
/* font-size: 40px; */
}
For the most part, browsers ignore whitespace in CSS just like they do in HTML. For example the CSS below, though it’s hard to read, is completely valid:
body {margin: 0 auto;}
h1, h2, h3, h4, h5, h6 {font-family: ‘Helvetica’, sans-serif; border-bottom: 1px solid blue;}
Of course, just because you can leave out whitespace you should still be diligent about adding whitespace to make your CSS easier to read and follow.
