Why learn CSS?
Cascading style sheets simplify and streamline certain design elements for webpages. Instead of specifying an element like font size on each page individually, CSS allows you to create a single document that provides its design information to all web pages linked to it. The best part of CSS is making changes to the design: instead of changing an html tag in each of your pages, you can make a single change to the CSS and observe the change immediately across your web site.

What you will learn
The first lesson will discuss the parts of a CSS code and introductory tutorials. Lesson two will cover basic codes and provide some practice is indentifying them. The final lesson will look at advanced codes and offer some practice in altering CSS code. At the end of the lesson will be a quiz, the results of which will be sent directly to my email.

How you will navigate this site
It is best to start with lesson 1 and move linearly through it to lessons 2 and 3, completing each practice activity as they come up. This way you are best prepared to complete the quiz at the end. However, at anytime you may move to different lessons or activities using the menu at the top of each page. The bottom menu provides additional useful content and links.

Definition

CSS stands for Cascading Style Sheets (the page—or sheet—helps you create a style that cascades across all associated web pages). It is a language, much like HTML, but you'll notice it uses different syntax and symbols. Though an understanding of HTML is helpful to using CSS, it is not necessary. CSS is primarily used for layouts, colors, and fonts, and has the ability to create layers on your page that can divide content in much the same way that HTML tables do, but without all the data cells and rows. CSS can be used with HTML, XML, XHTML and some other languages, so it's helpful to have a working knowledge of it.

There are many reasons to use CSS in your HTML. CSS offers more flexibility in the design of your pages than HTML code does, and you need only specify those design elements once in the CSS in order to have them applied across all associated HTML pages. Not all CSS is supported by all browsers, but unsupported code is easily ignored without causing errors to pop up.

Parts

Let's look at a "sentence" in the CSS language in order to understand its parts.

Q: Do you recall what h1 means in HTML?

This image shows a CSS "sentence" that is creating a style for h1. A: H1 is a tag used in HTML to create a very large heading (h1=Heading1). CSS allows you to easily make modifications to the appearance of this heading.

In CSS, we begin with a "selector," or the element we wish to modify or create. We then use "declarations" to, well, declare properties for the design of the selector.

In the above example I want to set a color and a font size for my heading 1, so "color" and "font-size" are my properties. I must then set values for them. For color I may use the name of the color if it is a basic color, or I might use the hexidecimal code. For size I have even more choices. I might set the actual pixel size (px), as this example shows, or I might set a percentage of 100 (ie. 80%). Another option is to simply write a word describing the size (ie. small). CSS is pretty smart, but if you find that your CSS isn't working right, run it through the CSS code checker provided by W3C.

How to insert a CSS

Your CSS can be placed either inside your web document's section or linked from your document's section. You might embed it on the page if you have only a single page (ie. a portfolio that links to several Word documents). However, if you've got many pages within your site it is a lot easier to just link to the CSS. That way you can make just one change to your CSS file and it is automatically applied to all of your web pages. Your CSS can be created using most HTML editors, but you may also use the notepad that comes for free on most computers. Just be sure to save the file as a .css rather than the default .txt. You might name your first sheet “style.css” so it is easier to identify and retrieve.

To link to your CSS, you must indicate the HREF and type of file in your document’s section. Insert the following information, where "style.css" is the name of your CSS file:

You must upload your CSS file to your web host along with your HTML files. If you do not see your styles being appropriately applied to your webpage, there may be something wrong with the code (CSS is picky about spacing and symbols). Run it through the W3C CSS Validator to identify the erroneous code.

How is CSS different from HTML?

Both languages use many of the same selectors, and even the properties and values look pretty familiar. However, there is a major difference in how they are arranged on the line.

Let's compare CSS and HTML

An HTML tag looks like this:

font color="blue" size="12">Words.< / font>

That same function in CSS would look like this:

font,td,p{color:blue;font-size:12pt}

First, you'll notice different symbols being used. CSS uses curly brackets { } while HTML uses carrots . You'll also observe that CSS uses a colon :while HTML uses an equal sign = to connect the value with the property. CSS also does not require quotation marks around its values like HTML does. CSS does, however, require that you separate properties with a semicolon ;
Finally, HTML requires that you close the tag using a backslash / but CSS does not.

Notice that the selector in CSS comes before the { whereas it comes after the in HTML. Also, you can list a number of selectors in CSS (font, table data, and paragraph) that would all have the same declarations.

Selectors

There are many different types of selectors, but this tutorial will only cover simple, combined, and class selectors. You can see examples of each in the CSS for this page.

Simple selectors: any single selector, such as in the image above

Combined selectors: two or more simple selectors grouped together, as in: p,td {line-height:11pt;}

Class selectors: any selector with an assigned class that can be used to create different styles for different classes of the same selector. Example: a.nav:link {text-decoration: none;}

The above example creates a class ".nav" for the selector "a:link". I can call the class anything I want, but I used "nav" because it will be the link in my navigation menu. Any time I want to use this specific style for my links, all I have to do is identify the class. So my HTML would look like this: < a href=" quiz.htm " class="nav" >Quiz< / a>

Here is a list of important selectors:

  • body = sets style for the entire body of the page
  • background = sets style for the page background
  • p = sets style for the whole paragraph
  • font = sets style for font
  • td = sets style for table data cells
  • a:link, a:visited, a:hover, a:active = sets style for my links, visited links, hovered-over links, and active links, respectively.
  • li = sets style for list items
  • hr = sets style for horizontal rules
  • h1, h2, h3, etc. = sets style for headings of the specified size

Properties

Properties for selectors vary. Most often, properties involve colors, padding and margins, or alignment on the page. As you've already noticed, one selector can have many properties assigned to it, as in this example: p {font-style="normal"; font-size="12pt";}. You can also identify several selectors that will all share one property, as in this example: p,td,li {text-indent:"5px"}

Here are some examples of properties:

  • color = assigns a color to the selector
  • height = determines the height of the selector
  • width = determines the width of the selector
  • border = draws a border
  • padding = places a cushion of space
  • margin = determines the margin size
  • background = enables background images and colors
  • font = creates font declarations

Find a printable Properties and Values table here: Open Word document

Values

Values use various measurements depending on the selector and property. The most common kinds of values are lengths, percentages, colors, URLs, and shapes.

  • Lengths: The length values you'll typically use are em (font height) and px (pixel=1 dot on the screen)
  • Percentage: Any number followed by % will stipulate a percentage size out of 100
  • Colors: There are some color keywords recognized by browsers, but most coloring will require hexidecimal values; for example, 000000=black
  • URLs: Anytime you need to create a link or use an image, you are assigning a URL value
  • Shapes: Shape refers to the shape of a data cell of information (a rectangle), so the values include top, bottom, right, and left

For a longer "cheat sheet" of CSS properties and values, check out w3.org.

Single line or multi-line?

The above image shows the CSS code on a single line. As you learn to use CSS and search for new types of code on the internet or in CSS source files, you will notice that some CSS is written using multiple lines:

h1 {

float: left;

width: 155px;

height: 50px;

}

p, td {

font-family:"Times New Roman", Times, serif;

}

How you write your CSS is entirely up to you, but multi-line CSS makes scanning for selectors, properties, and values much easier. You'll notice that the selector(s) and the opening curly bracket have their own line, and the lines that following are comprised of a property and its value(s). Each property line ends with a semi-colon, which is used to seperate properties. It's good practice to place a semicolon after every declaration, including the last one. That way you can easily add properties.

Q:Which do you think is easier to scan and use: single line or multiple lines?

Regardless of whether you choose to use single line or multiple lines for your CSS, make sure you copy all necessary elements of the code when transferring it into your own style sheet. Don't leave out that closing curly bracket or your CSS will not function!