CSS Rules

Basic CSS: A Practical Guide

Imagine you hire painters to decorate your living room. You have a specific shade of green you want, and you need to tell them both the color and which room to paint. CSS and HTML work similarly: HTML is the structure of your house, while CSS is the paint that defines the appearance. CSS properties specify the color and style, but you also need to indicate which parts of the HTML document to style. This is done through selectors, specifically CSS selectors, which target the HTML elements to apply the styling to.

A CSS rule consists of a selector and a declaration block. The selector targets the HTML element, and the declaration block contains one or more property-value pairs enclosed in curly brackets. These pairs determine the styling for the selected element.

The selector can be an HTML element such as <h1>, which is known as an HTML selector. Multiple property-value pairs can be added, separated by semicolons and usually placed on new lines for clarity.

HTML Selectors

HTML selectors use HTML tags to target their content. Any HTML element can be targeted. Commonly used HTML selectors include <body>, <h1>, <p>, <ul>, but any HTML element can be used.

      h1 {
	font-size: 4rem;
	color: #000099;
	font-family: Arial, Helvetica, sans-serif;
	background: color #ccc;
}

See the Pen CSS HTML Selector by Martin Cooper (@mustbebuilt) on CodePen.

The body selector is often used to set default fonts and backgrounds for the entire document.

Class Selectors

HTML selectors apply styles to every instance of an element, which may not always be desirable. For more flexibility, use class selectors. These allow you to create a style rule that can be applied to any HTML element.

Class selectors start with a dot (.) followed by a unique class name.

      .highlight {
       font-size: 1.4rem;
       color: #ff0000;
}

To apply this class to an HTML element, use the class attribute:

      <p class="highlight">Paragraph One</p>
<p>Paragraph Two</p>
<p class="highlight">Paragraph Three</p>

See the Pen CSS class selector by Martin Cooper (@mustbebuilt) on CodePen.

ID Selectors

ID selectors are similar to class selectors but are unique to a single element on the page. ID selectors start with a hash (#) followed by a unique ID name.

      #footer {
    color: #0066CC;
    background-color: #CCCCCC;
    font-size: 0.8rem;
    text-align: center;
    padding: 5px;
}

Apply an ID to an HTML element using the id attribute:

See the Pen CSS ID Selector by Martin Cooper (@mustbebuilt) on CodePen.

Pseudo-Class Selectors

Pseudo-classes are predefined classes in CSS used to style elements in specific states. The most common use is to style links with the <a> tag.

The four pseudo-classes for links are:

a:link – the appearance of a link in its default state.
a:visited – the appearance of a link that has been visited.
a:hover – the appearance of a link when the mouse hovers over it.
a:active – the appearance of a link when clicked.

Order matters for these pseudo-classes: link, visited, hover, active. Remember this with "LoVe/HAte."

      a:link {
    color: #000066;
}
a:visited {
    color: #996633;
}
a:hover {
    color: #CC0000;
}
a:active {
    color: #FFCCCC;
}

Use a contextual selector when you only want the styling occur in certain circumstances. In this CodePen only the links in the menu are styled with pseudo-classes, the default link styling is maintained for other links.

See the Pen Contextual Pseudo Classes by Martin Cooper (@mustbebuilt) on CodePen.

Other Selectors

CSS offers advanced other selectors to explore once you are comfortable with the basic ones.

Additional CSS Selectors