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