What is CSS?

History of CSS

While the use of CSS is now considered "best practices," the idea of a "style sheet" has been around for a long time. Programs, such as Microsoft Word, Adobe PageMaker, and other desktop publishing programs allow users to create styles for uniform formatting in one document or throughout a group of documents. Even for the web, there were design documents of how CSS should work years before the browsers caught up. For many years, web developers didn't use CSS because they couldn't count on the browsers to show the web pages correctly. Instead, it was easier for web developers to use HTML tags for design.

More information about the history of CSS

What is CSS?

CSS can mean a lot of things, depending on how you use it. CSS is both a type of code, and a principle of how that code is used. Compared to formatting with HTML, CSS will provide more formatting options. On the down side, CSS may also take you longer to learn. This lesson will show you a few of the underlying principles of CSS.

One important principle of CSS is that content and formatting are separate.

This idea may be a puzzle because most people put something on a web page, highlight it and add the formatting before they go on to the next part of the page. Without being specific about details, with CSS, you could put all your text and graphics on a page and then add all the formatting later - from a different file! In fact, the person putting the content on the page and the person formatting the page don't even have to be the same. Here is a web site that took that idea, created the content, and then let other people build the styles. They made a contest to see what different styles people would come up with!

Another important principle behind CSS is that the formatting for your web site should be uniform.

This is true for your print documents too. From page to page, your fonts should help people feel that they are on the same site. If you use Arial on one page, you shouldn't use Times or Verdana on another page. CSS will help you take control of the formatting on your whole site.

The CSS coding affecting an element on a web page could be at any of these three levels:

1) inline, 2) internal to your HTML file, 3) external - a different file that is somewhere else on your web site.

To learn CSS, you will have two basic concepts to master: 1) how the CSS code works, 2) how the CSS is used in general

CSS Coding

The coding for CSS is very different from HTML, but it works inside your HTML file because browsers can still interpret the code. The code is based on the idea that you should "define" a style. Each style has a name and the pieces of code that describe what that style should look like.

For example, this text is formatted with a style called SmallText. This style could be named anything, but that was the name chosen. In the block of code, SmallText is described as being Verdana, 12 point font with leading of 24, full justification (so that it lines up on both sides) and bolding level of 400. No color has been chosen for SmallText; so, it will pick up the browser's default color, which is usually black. The code for SmallText looks like this:

.SmallText
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
text-align: justify;
font-weight: 400;
}

Notice that these lines of lettering are closer together than the lines for SmallText is.. That is because these lines are a style called SmallTextTight, which is the same as SmallText in everything except the line-height.

The Subtitles of this article use a style called Subtitle. It is important to plan and name your styles appropriately. SmallText and SmallTextTight say more about what the style looks like than where it will be used. SmallText could be called BodyText because that is how it is being used on this page. The name Subtitle says more about where the sytle will be used on each page.

Syllabus