I had promised Doug I would have an upcoming post “that would change his life.”
Well, since I am busy with a few projects, I have not had time to devote to this post. Of course this life changing post will finally convert Doug from using tables to CSS for page layout. In the meantime, I thought I would get things rolling by explaining some of the basics.
Syntax: There are three parts to CSS syntax.
So, a generic example of CSS syntax: selector {property: value;}
Classes and IDs
Classes are defined by a “.” then class name. Ex: .class_name {font-weight: bold;} Classes give you the opportunity to have an HTML element have multiple looks with CSS. For example, classes are used a lot with paragraph elements to make certain paragraphs look different. In my latest design, I have two columns. The paragraphs in the left column have different line height, and different font properties than the right column so I created two separate paragraph classes: p.main {line-height: 1.5em; font-size: 1.25em;} and then p.side { line-height: 1.25em; font-size: 1em;} Note: when creating your own classes, you only need to use a class name like .jappler {property: value;}. When using just a custom selector (no HTML element), the style can be used for all elements. When you create classes for HTML elements, you will need to use the HTML element name then the class you want to use: h2.side {font-size:90%}. Also, remember that when using HTML elements with classes, that the “.” is placed between the HTML element and the class name, not before.
IDs are defined by a “#” then the ID name. Ex. #id_name {font-weight: bold;} The W3C defines class ID as “a unique identifier to an element.” IDs are mostly used for layout since you are should reference an ID once per page. Naturally, there are in most cases, one header, one footer, one menu, etc.
I am still confused, which do I use: Classes or IDs?
You should use IDs when there is only one occurence of it per page. (Ex. #header {background: #fff; height: 86px;} Use classes when there are one or more occurrences per page. (Ex. .center {text-align:center;}
Span Class v. Div Class
When first learning CSS, I was also confused about when to use span class="something"> vs. div class="something" . I soon learned that you should use span class where I used to use the font tag. I use a div class where I have other inline elements that I want to fall under the div.
So, for the beginners out there. Do not get too frustrated, just start out by finding a layout you like, and begin modifying it. If you are not sure what something does, look at W3 Schools. Once you know the basics, you can shed the cumbersome WYSIWYG editors for the text editor and web browser approach to design like I use.
Further Resources
Classes vs. IDs
W3 Schools
[tags]CSS, Divs v. IDs, span classes[/tags]
