Learning CSS - Step 1 - The Basics - Graphic Design Forum and Web Design Forum

Mack · #1 (**permalink**) 12-06-2007, 02:57 PM

I will not take credit for the actual documentation. As i have a member of my production team doing "continual training" for my web designers, then i have him document what he went over into an in house wiki.

I figured alot of people could benefit from some of this information. So ill post a section once a week or so for the benefit of the group.

Learning CSS
Part 1: Basics

HTML/XHTML
In order to get a full understanding of how CSS styles HTML, we’ll need to get a basic understanding of HTML and XHTML (Extensible Hypertext Markup Language). The biggest difference between HTML and XHTML is that XHTML is more strict and less forgiving than HTML. For example, in HTML it is okay to write <BODY></body>, while in XHTML, it will return an error. Therefore, it is always in best practice to create your HTML in all lowercase tags. Also in XHTML, all tags must be closed. For example, <p></p>, <br />, <hr />, <img src="#" />. It is always in best practice to write in XHTML.

There are 2 different types of tags: inline and block-level. Inline tags allow multiple instances of that tag to be placed on the same line (a, em, span, strong, img). Block-level elements allow only one instance per line, placing the next tag below the one before it (table, p, h1, div, ul, li, ol).

A doctype is also important as it can effect the rendering of the CSS.

CSS Syntax/Overview
CSS (Cascading Style Sheets) styles the HTML. The syntax for CSS is as follows: selector { property: value; }

The selector is the HTML tag, id (#), or class (.) being styled. The styles are stated within curly braces. The property is what is being styled (margin, padding, font-size, etc) and the value is the value of the property (10px, 100%, #000000). It is always best to end a "property: value;" declaration with a semicolon. This can make or break your styles.

An id (#) refers to the identity of the element being styled. I can only be used once per page, therefore, it is best to use it to describe an area of the page ( #wrapper, #header, #footer, #bodyContent ). A class (.) refers to any HTML tag that is receiving special treatment. For example: p.quote, a.externalLink, li.highlighted. While HTML tags can receive more than one class separated by a space, it can only receive one id. <p class="class1 class2 class3" id="id1"></p>

Inline, Embedded and External Styles
CSS cascades, meaning that an elements' style inherits any style previously called for that element. For example, if there is a style of p { color: #FF0000; } at the top of a CSS file, any call for a styled p after that will inherit the #FF0000 color.

An external style sheet is located in an external file, "filename.css."
An embedded style is located in the head of the HTML file, between <style></style> tags, overwriting any specific style declared in the external style sheet.
An inline style is located on the tag itself, declared as style="margin: 0; color: #000000;"

"Classitis" / "Divitis"
Classitis is a term for the overuse of unnecessary classes on an element. Such as in the example below, where the h1 is the only tag within the div.

HTML Code:

<div>
<h1 class="headerText">Heading</h1>
</div>

It is best to directly target the h1.

Divitis is a term for the overuse of unnecessary divs in the markup. For example:

HTML Code:

<div>
<div align="center">
<h1>Heading</h1>
</div>
</div>

The <div align="center"> adds unnecessary markup to the HTML, when it can just be applied to the h1 CSS style.

Font Control
Below are style properties used in styling text:

font-weight: declares bold or normal
font-style: declares italic or normal
font-size: declares the font size (10px)
font-family: declares the font used. This uses a comma-separated list so that if one font is unavailable, then the next font is read, until it has the declaration of a sans-serif (Verdana, Arial, Helvetica, sans-serif;). If your font name has two words separated by a space, you need to enclose them in quotes ("Lucida Grande", "Arial Black", "Century Gothic";).
line-height: declares the line height of the font. It is best to set this to 50% more than the font size as this provides the user with visual "comfort" while reading. ie: 12px/18px, 10px/15px, 18px/27px.
text-decoration: declares whether text has an underline, overline, line-through, blink, and none.
text-align: declares whether text is aligned left, right, center, or justified
letter-spacing: declares the width of the space between letters
word-spacing: declares the width of the space between words

Most of these can be declared in one line:

HTML Code:

font: normal 12px/18px Verdana, Arial, Helvetica, "Century Gothic", sans-serif;

The order being: (font-weight or font-style) font-size/line-height font-family.

mick young · #2 (**permalink**) 06-07-2007, 07:52 AM

When's Step 2 available

Mack · #3 (**permalink**) 06-07-2007, 09:56 AM

damn, someone read it. Ill post step 2 today

Toon · #4 (**permalink**) 06-07-2007, 09:57 AM

I read it very helpful to anyone starting out

Zaoris · #5 (**permalink**) 10-07-2007, 11:27 PM

Thanks for this Mack, very handy for a starter.
Think these should be stickied somewhere..

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Learning CSS - Step 1- The Basics	Graphic Design Network	CSS Forum	1	15-05-2008 11:56 AM
How to continue after knowing the basics..	lowen.f	Graphic Design Forum	5	06-01-2008 02:00 AM
Learning CSS - Step 2 - Box Model and Background Images	Mack	CSS Forum	4	26-09-2007 12:04 AM
step-by-step design	dannynosleeves	CSS Forum	14	16-06-2007 07:37 PM
CSS Basics	Toon	CSS Forum	0	04-01-2007 10:04 AM