History of CSS
While the use of CSS is now considered “best practices” for websites, the idea of style sheets 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. The main idea is that you group formatting features,such as font sizes and colors and bolding, into a style and give the style a name; then, you can use the style over and over. This saves you the time of having to remember how you formatted your text earlier.
Even for the web, documents were written about how CSS should work , years before the browsers caught up. For many years, web developers wouldn’t use CSS because they couldn’t count on the browsers to figure out the code and show the web pages correctly. Instead, it was easier for web developers to misappropriate HTML tags for their visual designs. For example, HTML has a blockquote tag that is supposed to mark off areas of your page that are direct quotes. The blockquote tag indents a half inch; so, web designers decided that every time they wanted something scooched in a half an inch, they would just (mis)use the blockquote.
The problem is that HTML was not intended to be an artist’s tool. It was designed to be a way to show the structure of the content (titles, subtitles, etc) – not the visual design structure! One result of this use of HTML was an incredible amount of formatting code on each web page, as designers became creative at making HTML do what they wanted. Every time you wanted to change the formatting from the text above, you needed a new set of formatting code.
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 provide more formatting options and much finer tuning. For example, instead of being stuck with 7 font sizes, you can now use an infinite number of sizes and unit combinations.
On the down side, CSS may also take you longer to learn. In fact, some developers are just going back to tables because of the learning curve for CSS. Other designers are building sloppy CSS code in the rush to convert to CSS from tables. Neither of these are necessary!
As hinted above one important principle of CSS is that content structure and visual structure are treated as two separate ideas. This idea may be a puzzle because, in the development process, 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. With CSS, you identify an area as the title of the web page in the HTML file, and then in a separate file (the style sheet), you tell what the title should look like. Then you use those styles on all or some of your pages. If you don’t like what the styles look like, you just change the style sheet and all the pages change.
In fact, with CSs, the person putting the content on the HTML page and the person creating the style sheet don’t even have to be the same. CSSZenGarden is a website project 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, visual continuity will help people feel more comfortable with your website.
To learn CSS, you will have two basic concepts to master: 1) how the CSS code works, 2) how the CSS is used on your HTML page.
A Quick Look at CSS Coding
Not only are the principles of CSS somewhat different from HTML, coding for CSS is very different from HTML. The code lists the name of the style and how that style should be formatted when it is used on a web page. For example, the style below is called BodyText
.BodyText
{
font-size: 12px;
line-height: 24px;
text-align: justify;
font-weight: 400;
}
Notice that this looks very different from HTML. All of the formatting is between the curly braces. Each property has a name, a colon, a value and a semi-colon. Many designers start their use of CSS by using it to format text. Using CSS to place elements on a web page is much more difficult, but starting with text formatting is a good way to get started!
This article was originally developed as part of the course materials for web development classes at Dickinson Lifelong Learning Center.
