Note that this site is in currently in version 1.0.0-alpha.   Some functionality may be limited.

12. Rule Sets

CSS is based on selectors and declarations, which together form rule sets (or just “rules”). Rule sets comprise an external styling file with a .css extension. Here is the contents of a sample .css file:

h1 {
    color: orange;
    font-style: italic;
}
p {
    font-family: sans-serif;
    font-style: normal;
}
#navbar {
    background-color: yellow;
    padding: 80px;
}
.intro {
    font-family: arial;
    background-color: grey;
    color: dark-grey;
}

The first rule (which starts with the h1 selector) applies to all <h1> tags on each page where your HTML document links to your stylesheet, and changes the font style and display of those headings.

The lines within the curly braces (i.e. { ... }) are called declarations, and they change the formatting of the elements in the HTML document. Each line in the declaration sets the value for a property and ends with a semicolon (;).

Note the different syntax being used to select items for for styling with rule sets. The bottom two selectors are used to apply rule sets to IDs and classes. In general, adding classes and IDs to HTML elements allows for more specific styling—more on these soon!

Challenges for lesson 12

Assignment: Challenge

Copy and paste the CSS rules above into your style.css file and re-save the file. Then open or refresh your index.html file in your browser and see what happens.

What should happen?

The formatting of the text on your page should change accordingly. Your <h1> should be orange and italic, for example.

What are some other rules you might set for different HTML elements? Do a quick Google search for a CSS rule that changes the appearance of your page, such as putting a border around an element.

Questions

Try again!

How do we associate a CSS file with an HTML page?

(Select one of the following)

Terms Used in Lesson

Can you define the terms below? Hover over each of them to read a preview of the definitions.

Class

Class is an attribute used in HTML and CSS to select and access specific elements. Class is especially useful in applying standard styling to repeating elements across a website. This helps create a consistent look …

See term page

CSS Selectors

CSS Selectors select HTML elements on which to apply particular styling rules. For example, in the following CSS rule set, the h1 selector applies orange color and italics to all content in the h1 element. …

See term page

ID

ID is an attribute used in HTML and CSS to create unique identifiers. IDs facilitate fine-grained styling of websites by allowing us to select and access unique elements.

See term page

Workshop overall progress