How To: CSS

What is CSS?

CSS stands for Cascading Style Sheets, and as such it is considered a stylesheet language. Stylesheet languages, like CSS, are used in conjuction with mark-up languages such as HTML, XHTML, and XML. It has elements for setting positions, colors, underlining, bolding, italicizing, fonts, font sizes, borders... the list goes on.

Why CSS?

This a little bit tougher question, but it boils down to a need for developers to separate the presentation (Colors, some positions, fonts, and decorations), structure (most html tags), and content (pictures, and text) of the pages they make. With these separated, one can easily apply a new presentation to old structure and content without having to completely redesign every web page they publish. Respected developer Michael Cohen has written an article on the topic if you wish to read more.

A Little More

At this point, you're either convinced of the power of CSS, or you don't care and are just looking to get the assignment done. Either way, here are some reallly impressive examples. (and even a jaw-dropping example or two.)

Learning CSS

Unlike HTML, CSS has many, many properties that each have a set of acceptable values, and thus there is no feasible way to cover all of the properties that you might like to use in the course of completing this assignment. However, there is a basic structure that all css files conform to. Look over the following, then head to the CSS Sample.

Commenting

/* Comments look like this. They can be on multiple lines.
They begin with a / followed by a * and they end with the opposite */

Basic Declaration

Start with an html element, such as the <div> tag, a class such as "specialStuffIMade", or an id such as "myContent". Or, maybe even specifically unordered lists that have a class of cool_style (This means everything else with class="cool_style" won't be affected, just the unordered lists). Notice that they have distinctive ways of being written.

div {}
.specialStuffIMade {}
#myContent{}
ul.cool_style {}

Next, we can add any number of properties that we want. Let's say that everything <div> tags should use the font Century Gothic (Since it's multiple words it has to be "Century Gothic"). If the person reading our page doesn't have Century Gothic, we'll use Arial. If they don't have Arial, we'll use any old Sans-Serif font face that they do happen to have. (More about fonts).

We'll also make the text in every element that has class="specialStuffIMade" blue with an overline and have an orange background. (See: More Colors) We'll also give this a hanging indent.

The element that has an id="myContent" should get a 5 pixel thick greenish border that makes it look engraved. Also, we'll move it 16 pixels down and 4 left from where it would normally be just for funzies. This means we'll have to set position to relative. (See: More Borders and More Positioning)

Lastly, let's make all the bullets for our unordered list be unfilled in circles. (See: More Lists)

div {
  font-family: "Century Gothic", Arial, Sans-Serif;
  }
  
.specialStuffIMade {
  color: blue; 
  text-decoration: overline; 
  background-color: #FF9900;
  }
  
#myContent {
  border: 5px inset #00CC33;
  position: relative;
  top: 16px;
  left: -4px;
  }
  
table.cool_style {list-style-type: circle;}

What now?

By now you should have read the How To: HTML page in addition to this page. With that information and the provided samples (HTML CSS), you should be well on your way to making something that starts to meet the requirements of the assignment.