Adding Style with CSS

Just the Basic Facts

CSS stands for "Cascading Style Sheets"
CSS, like HTML, is a markup language, and can be written in plain text using any text editor.
CSS allows you to change the style of any element or class of elements on a web page, or across an entire website, by making the change in only one place.
Style sheets consist of selectors, properties, and values:
- Selectors refer to specific elements on the page (such as h1 or p). In CSS, these elements are not wrapped in angle brackets like they are in HTML.
- Properties are specific characteristics, such as color, background-color, margin or font-size.
- Values are the value associated with each property. For example, the value of the color property might be red, and the value of the font-size property might be 200% (to make text twice its normal size).
Comments in CSS begin with /* and end with */.

CSS can be included within the html document, inside the <style> </style> element, which is typically part of the <head> </head> section (though it can be anywhere). Here's an example of a style section within in HTML web page:

<style>
  body {
    margin: 5%;
  }
</style>

CSS can also be included in an external style sheet (a separate file comprised entirely of CSS code). This is useful if you want to use one standard style sheet that covers all the pages on your web site. To use an external style sheet, you add all of your CSS code to a CSS file, then link to it from within your HTML web page, like this:

Example 1: Stylizing an HTML Element

Here is some example CSS that defines how every <h2> element should be displayed. Note the curly brackets, colons and semi-colons:

  h2 {
    font-family: Arial, sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    color: #0000FF;
    background-color: #FFFFFF;
    text-align: left;
  }

Example 2: Stylizing a Class of Elements

If you want more than one element in a document to share similar style characteristics, you can assign a class to each of those elements. For example, on the current page you see several examples of CSS code. These are all assigned a class named "code", using HTML markup that looks something like this:

<p class="code">This is a paragraph.</p>

Without CSS, paragraphs that are marked up like this would look just like every other paragraph. However, when we define a style for the "code" class, any paragraphs of that class suddenly have a very distinct look. Here's how this class is defined in the CSS for the current page. Note that the class name is defined in CSS with a period (.) in front of it:

  .code {
    font-family: "Times New Roman",Georgia,Serif;
    display: block;
    border: 1px solid #340449;
    padding: 1em;
    background-color: #ffffcc;
  }

Example 3: Stylizing an individual element using its ID

If a particular type of element is stylized a certain way, but you want one of those elements to be stylized differently, one way to do this is to assign an ID to that element. For example, in Example 1 we stylized all <h2> elements so that they're big, bold, blue, and left-aligned. Suppose there is one <h2> element on your page that you want to appear red and centered. You would first add an id attribute to your <h2> element:

<h2 id="mainHeading">A Different-Looking Heading</h2>

Then, you would stylize it, as in the following example. Note that the id is identified in CSS with a # in front of it:

  #mainHeading {
    color: #ff0000;
    text-align: center;
  }

Specifying Size

Many style sheet properties are size-related. For example, you may want to specify the size of a font (font-size) or a margin (margin-left) or line height (line-height). Sizes are specified as a number, followed by the unit of measure. There are many possible units of measure, including points (pt), pixels (px), inches (in), ems (em), and percentages (%). Ems and percentages are known as relative sizes, because they are expressed in relation to one another. These are the best units to use when sizing text. One "em" is the size of the letter "M" given the user's current font.

Specifying Color

Traditionally colors on the web have been specified using RGB values (red, green and blue). The values are defined using Hexadecimal (base 16), which runs from 0-9 and A-F. There are 255 possible values for each color (255 in hex is FF). So, you essentially mix your colors by increasing and decreasing values of either red, green or blue to get the color you’re looking for. Here are some examples using CSS. Note that each color is preceded by #:

CSS	Description
color: #FF0000	red
color: #AA00AA	purple (equal amounts of red and blue)
color: #000000	black (no color at all)
white: #FFFFFF	(white, all colors in the spectrum cranked to the max)

Most web designers memorize the codes for a few basic colors, but otherwise consult a color chart such as the HTML Color Picker from W3Schools.com.

IMPORTANT: Always follow these basic rules of color use:

Never use color alone to convey information, as many people are unable to perceive color differences.
Always be sure your foreground and background colors have ample contrast. Otherwise many users will not be able to read them.

How to Learn More

Most web browsers provide an option to view the source code of any web page. In your web browser, right click on any element and select "Inspect element" to see the code that was used to create that element (this will show you both the HTML and CSS). See also the Tools & Resources page for CSS reference websites.