An Overview of CSS

What is CSS

CSS stands for Cascading Style Sheets. It is used to control the presentation of the website, basically how the website looks.

Why do we use CSS

If you are using Firefox, Go to View > Page Style > then click on No Style. See what your favorite websites look like without any styling. Would you keep using them?

But CSS is more than just making things look “pretty”. It can be used to make it easier for people to read/understand what they are being presented with. It can help people with visual impairments improve their ability to use a website. It can even lead to higher retention of users by making their life easier, by making your site easier to work with.

CSS allows us to control the look of:

• existing tags
• a special tag used only once (id)
• or a special tag potentially used multiple times (class)

How to use CSS

You can link in an external file as such by including the following code: (Using a tool like Dreamweaver will help do this automatically for you. That’s the advantage to a tool like Dreamweaver.)

The href attribute should point to a CSS file.

The rel tells the browsers what type of link it is.

The type define the type of file, so it knows how to download/interpret  it.

The rel and type attributes are not redundant, because there are also alternative style sheets so pages can swap style sheets dynamically. So if you don’t specify rel=”stylesheet” the browser will ignore your style sheet. (This is a lesson I learned the hard way when I was starting.)

You can even define the media attribute. This is so you can use different style sheets for on-line, print, handheld devices, etc.

By linking the style sheets in externally, it allows us to:

• save bandwidth by using cached versions, the visitor doesn’t continue to download the same information
• control the look and feel of the site easier by requiring as little as one file to change and upload

Any styles that are repeated on multiple pages should be placed in an external style sheet. If the style will be used on a single page, then you can consider embedding it on the page itself within a style tag, or in a separate style sheet file. This of course is just a suggestion, but it is considered a best practice by many web designers.

Redefining Tags

Inside the CSS file, you can redefine tags, so the default values aren’t used. For example if you want to change the h1 tag you could write:

h1 {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

The indent is optional, but many people use it to make it easier to read. While reading a single rule isn’t hard, reading dozens or hundreds of rules can make it difficult. Indenting just makes it easier.

Here we change the font size, and weight (bold, bolder, or normal for the most part), as well as the (foreground) color. There are dozens of properties that can be changed to make an existing tag look entirely different, including the font-family, border, and background-color.

pre {
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  color: #333333;
  background-color: #CCCCCC;
  padding: 10px;
}

In both cases you can see the tag name, then braces ({ }). Inside the braces, each property is listed, then a colon to separate the property from the value, then after each name/value pair a semi-colon.

Properties are from a limited set, and explain how a part of a tag looks. The values will be from a type that matches the type of property. So for example a font-family property can only include names of fonts. It cannot include colors, font sizes, etc. Where a font-size property must include a proper relevant size, including both a number and a unit of measure. For example 16 isn’t valid, because it is without a unit however, 16px is because it has both a unit and an amount.

When you use CSS on a non-visible tag, you will use it on a div (for block level control) and span (for in-line control).

Using IDs

Ids, start with a # symbol in CSS file. In the HTML code, it is listed as the id attribute. A tag can only have a single id value, and that value can only exist on one tag for that page.

#header { ... set style ...}

... say something ...

Ids should only be used once in an HTML file. They are often, but not always, used to define the look of the web page, including headers, footers, and navigation and content sections.

Using a Class

A class can be used over and over again inside the same HTML file. In the CSS file, the selector will start with a “.” (period).

.required { 
  color: #ff0000; 
  font-style: italic;
}

In the HTML, the code the period is not listed. You would instead find the class name as a value in the class attribute of your HTML tag, as is shown below.

first name

While this page was about CSS, Dreamweaver can really help you define your CSS. To learn how to add CSS to a webpage with Dreamweaver, click on the previous link.

Some additional external links to help you out:

• Gish – CSS Layout Techniques
• Benmeadowcroft.com
• Yahoo YUI Developer pages

 

An Overview of CSS was originally found on Access 2 Learn