CSS

Cascading Style Sheets (CSS) is a powerful stylesheet language used on the web to describe the presentation of documents written markup languages like HTML and XHTML. Modern web design strives for a separation between content and presentation, and CSS specifies presentation by controlling how a document is rendered.

CSS is one of the most important things you can learn if you are interested in creating quality websites.

At Gustavus

CSS is used extensively on pages which use the Gustavus Template.

This section of this article is a stub. You can help by expanding it.

Browser support

The W3C has published specifications for three major versions of CSS: CSS1, CSS2, and CSS3, with each higher version including additional features and functionality over the previous. However, web browsers have varying degrees of support for different CSS versions.

Why use?

While there are many arguments for using CSS, the following are some of the most popular reasons:

  • gives the designer total control over the visual aspect of every element on a website
  • allows designers to redesign an entire website by changing a single document
  • often helps web pages load faster
  • can be beneficial for search engine optimization
  • separates design and content
  • everybody else uses it

Dissected

Technically speaking, a stylesheet is a collection of case-sensitive rule sets and comments. The following is a simple example of two rule sets preceded by a comment: 

/* Headers */

h1 {
  font-weight: normal;
  font-size: 2.5em;
  color: #000;
  background-color: #1a1a1d;
}

h2 {
  font-weight: bold;
  font-size: 2em;
  color: #111;
  border-bottom: 1px solid #333;
}

Rule sets are composed of selectors and declaration blocks. Selectors designate which elements the following declaration block should be applied to. Likewise, declaration blocks define the style of the elements (specified in the preceding selector) in a semicolon-delimited list of properties and value pairs (i.e. font-weight: bold; font-size: 2em;). Declaration blocks are encapsulated by curly brackets {}.

Class and ID selectors

If you wish to style specific elements on a page instead of general elements such as all <h1> elements, use class and ID selectors. Classes and IDs are assigned to elements in the XHTML document as follows: <h1 class="highlight" id="pageTitle">My Page Title</h1>

While classes and IDs function similarly, the fundamental difference is that multiple elements on a single page can be assigned the same class whereas IDs must be unique per page. Additionally, you can assign multiple classes to an element in a space-delimited list: <h2 class="highlight error">A Section</h2>

Therefore, if you have an instance of element that serves a special purpose for any particular page and requires a special style that is different than the rest of the same elements on the page, use an ID. However, if you have a set of elements, some of which you wish to style, use a class.

Once you have your classes and IDs set up in your XHTML document, you can style these elements using class and ID selectors. Class selectors take the form of a period (.) followed by the class name. For example, if you had some elements with classes of "highlight", your class selector for those elements would look like ".highlight". ID selectors take the form of a pound (#) followed by the ID name. For example, if you had an element with an ID of "pageTitle", your ID selector for that element would be "#pageTitle". Remember that class and ID selectors are case-sensitive.

Example XHTML: 

<h1 id="pageTitle">CSS is Neat</h1>
<p>This is my first paragraph. It is short.</p>
<h2 class="highlight">Highlighted Header</h2>
<p class="highlight">This is my second paragraph. 
I intend to highlight it in some way.</p>

Example CSS: 

#pageTitle {
  font-size: 4em;
  color: #000;
  border-bottom: 1px dashed #000;
}
.highlight {
  color: #900;
}

See it in action

Additionally, you can use element selectors with class and ID selectors to be more specific. The following example styles only the <h1> element with an id of "pageTitle" and the <p> elements with a class of "highlight": 

h1#pageTitle {
  text-align: center;
}
p.highlight {
  font-weight: bold;
}

See it in action

Units

When specifying the size of things, you are required to specify a unit of measurement. If you are creating a stylesheet for screen media, appropriate units are em (ems), ex (exs), px (pixels), and % (percent). The W3C has a excellent and detailed description of how to appropriately use units.

Grouping selectors and shorthand values

There are many properties available to use, so your CSS files can get large fairly quickly. Luckily, there are some shorthand CSS techniques that will save you time and make your CSS files smaller.

You should group selectors in comma-delimited lists to apply the same rule set to multiple types of elements on a page: p, li, h1 { ... }

You should also use shorthand value notation when appropriate. For instance, take the padding property. You can style an element's padding as follows: 

h1 {
  padding-top: 0;
  padding-right: 1px;
  padding-bottom: 2px;
  padding-left: 3px;
}

Or alternatively, you can style padding in a single property: 

h1 {
  padding: 0 1px 2px 3px;
}

The order of the four values is important. They are interpreted in clockwise order starting from the top (top, right, bottom, and left). Also, note that when using the number 0, you often do not need to specify a unit because zero is the same in all units.

Nesting

While you certainly are able to assign a class (see also: Classitis) to every element in your document, it is important to be conservative through nesting and better selectors. For example, you could create the following unordered list: 

<ul>
  <li class="highlight">A list item</li>
  <li class="highlight">A list item</li>
  <li class="highlight">A list item</li>
</ul>

with the following rule set: li.highlight { ... }

Preferrably, you should assign the class to the containing element and style appropriately: 

<ul class="highlight">
  <li>A list item</li>
  <li>A list item</li>
  <li>A list item</li>
</ul>

ul.highlight li { ... }

Additionally, you can nest elements infinitely deep: 

<div id="pageContent">
  <div id="sideBar">Sidebar content</div>
  <div id="mainBody">
    <p>Main body paragraph</p>
    <p>Main body paragraph</p>
    <p class="highlight">Highlighted paragraph</p>
  </div>
</div>


div#pageContent div#mainBody p.highlight {
  color: #0f0;
}

See it in action

Specifically, what's !important?

Because CSS is cascading (elements can be styled incrementally and across multiple files), it is important to understand how the client interprets the rules and decides which ones are important. The client reads everything in the order that it is defined and places highest importance on the last identical declaration. For example, the following CSS will make paragraph text bold and red: 

p { 
  color: #000;
  font-weight: bold;
}
p { color: #00f; }
p { color: #f00; }

See it in action

Additionally, the client places higher importance elements that are selected more specifically, even if they come before overwriting rule sets that are less specific. This idea is called specificity. For example, the following CSS will make all paragraphs with a class of highlight red and all other elements with a class of highlight blue: p.highlight { color: #f00; } .highlight { color: #00f; }

See it in action

Likewise, the following CSS will make all paragraphs with a class of highlight that are inside of a div red and all other paragraphs with a class of highlight blue: div p.highlight { color: #f00;} p.highlight { color: #00f; }

See it in action

Finally, the !important keyword will override other declared styles. This technique, however, should be avoided if possible. The following CSS will make all elements with a class of highlight red: .highlight { color: #f00 !important; } p.highlight { color: #000; }

See it in action

Using CSS on a webpage

While it is possible to use CSS on a webpage by typing style definitions directly into individual elements, the best advantages CSS offers are only available by creating rule sets in separate documents and linking them in. The recommended method is using the <link> tag in the head section of the XHTML document as follows: 

<head>
  <title>My XHTML Document</title>
  <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
</head>

Think about the media

XHTML documents can be viewed on a variety of different media from computer monitors to print to screen readers for the visually impaired. You can create separate stylesheets for the different media that re-purpose the same document appropriately. While the W3C CSS 2.0 specification allows for nine different media types, screen and print are the two most popular. Following is a list of all nine media types:

  • aural
  • braille
  • emboss
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv

For example, to specify a stylesheet for screen and a separate one for print, use the following syntax in the <head> element: 

<head>
  <title>My Nicely Printable XHTML Document</title>
  <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
  <link type="text/css" rel="stylesheet" href="print.css" media="print" />
</head>

Get a jump start

If you would like a jump start on creating a new website, feel free to use and modify my base XHTML page template as a starting point.

External links

CSS reference

Additional reading

Resources

I still need help

Please e-mail web@gustavus.edu or stop by the Web Services office in Olin Hall 119.

Retrieved from "https://gustavus.edu/gts/w/index.php?title=CSS&oldid=15854"