Cascading Style Sheets (CSS)

CSS is a sister technology to HTML, and provides guidance to a web browser on how to display html content. CSS is a language that uses syntax that consists of three parts, a selector and rules composed of property and value pairs in the following pattern:

<selector> { <property>: <value>; <property>: <value>; }

For example, the following code makes all paragraph elements have red text:

p { color: red; }

CSS Selectors

CSS Selectors are used to identify what elements on the page should have their properties modified. The p in the example above is a type selector, and applies to all HTML elements with the specified type. Another selector is the id selector, which is signified with a leading hashtag (#), i.e.:

#para1 { color: orange; font-size: 26pt; }

ID selectors apply to the element with the matching id attribute, i.e.:

<p id="para1"> Tiger tiger, burning bright... </p> <p> In the shadows of the night </p>

In this example, the specified rules (orange, 26pt text) will only be applied to the first paragraph. Note that the id attribute for any element should be unique on the HTML page - there should be no other elements with the id of "para1" for this to be valid HTML.

In contrast, the class attribute, specified with a leading period (.), can be applied to more than one html element with the matching class attribute, i.e.:

.lead { background-color: #333; color: black; font-weight: bold; padding: 10px; } .extra { box-shadow: gray 2px 2px 4px; }
<p class="lead">Bob Dole Hall features full recording studios</p> <div class="lead extra">Hale library has many books.</p>

In the above examples, the styles apply to both the paragraph and div with the lead class. Also, the div has a second class, extra. You can specify as many classes as you like for an element by separating them with spaces in the class attribute.

There is also a wildcard selector, the asterisk (*), and an attribute selector which can specify elements by their attribute values, i.e.:

input[type=text] { background-color: pink; }

Will make only text inputs pink.

Pseudo Classes

Pseudo classes are used to specify certain conditions that an element can be in, and are joined to a regular selector with a colon (:), i.e.:

*:hover { background-color: goldenrod; } a:visited { color: green; }

The first makes any element the mouse is over (hovering) have a goldenrod background. The second makes any hyperlink that has been previously visited green.

Pseudo Elements

Pseudo elements are used to specify entities not in html, i.e.:

tr::nth-child(odd) { background-color: darkgray; }

Will cause odd table rows to feature a dark gray background.


CSS selectors can be combined, i.e.:

p.lead { background-color: green; } div p { text-decoration: underline; } div > h1 { font-size: 5rem; } h1 + p { margin-top: 2px; } p ~ p { text-shadow: green 2px 2px 2px; }

The first example, p.lead, signifies that only paragraph tags with the lead class will be modified. The second indicates any paragraph tags that are descendants (nested inside of) a div. The third indicates only h1 elements that are children of a div (nested only one level inside of the div). The fourth indicates any paragraph immediately following a h1 element (adjacent sibling). And the last indicates any paragraph at the same level of nesting as another paragraph (generic sibling).

In general, the last property value that had a matching selector will be applied to the element (overriding previous rules). However, a more explicit rule will trump a less explicit one, i.e. div p will trump a later div rule because the second is more specific.

You can also add !important to a CSS rule to elevate it to trump more explicit rules, i.e.:

p { color: red !important; }

indicates that all paragraphs should have red text, overriding more specific rules that follow. It should be used sparingly.

Specifying CSS

CSS can be specified within an HTML page using the style element:

<html> <head> <style> p { color: green; } </style> </head>

But it is generally better practice to save CSS rules in a separate text file with the css extension and link them to the html document:

<html> <head> <link type="text/css" href="my-styles.css" rel="stylesheet"/> </head>

It is important to specify the type and relationship (rel) attributes as text/css and stylesheet, respectively. The href attribute should be the path to your CSS file. A benefit of this approach is that multiple HTML files can share the same CSS file.

Additionally, styles may be declared in-line on an html element as an attribute, i.e.:

<p style="color: green; font-weight: bold"> Hello there! </p>

Note that in this case, there are no css selectors used as the style applies directly to the element.