Learning Website Design: Session 4 - Understanding CSS

In this session we will take a look at the basics of CSS. CSS stands for Cascading Style Sheets. And as its name implies, it is a sheet that determines styles in a cascading way.

Sheet

The styles can be written inline with your markup, at the header of your html documents or in separate pages (sheets). Those sheets get called from the markup and called to style the markup. In other words, the markup stands by itself and looks like a succession of tags that only stand semantically. This helps the purpose of improving the way that search engines read the content. Why? Because they don’t care about the way it looks. They only care about the content.

Cascading

The cascading means that they are applied in the order that they are encountered. In other words, if you place a style for the heading tags and then later override the directive with another style, the latter would be applied. The cascading also means that they are applied in order of specificity. What that means is that the more specific the selector would be used.

Style

The sheet defines the “style” of the elements of the markup. You select a tag and then you write directive on how you want those tags to be displayed.

The anatomy of a CSS directive:

Css Directive Anatomy

The (1) first part is also known as the selector. It’s purpose is to select the tag or tags from the markup that are to be affected by the directive. It can be as specific or as general as needed. In this case, the selector is for a heading tag(h1) with an ID(#) of first and a class(.) of top. In other words, only one heading tag is to be selected. Which one? The one that has an id of first (remember that ID should be unique occurrences in markup). And also has a class of .top. Selectors can also include attributes. Attributes are encompassed by square brackets and they select particular attributes of the markup tags.

The dots(.) select classes. So for example .top refers to a class named top. A class can be applied to many tags, so it can appear in repetitive parts of your markup; this is in contrast with IDs.

The pound sign (#) selects ids. Id as its name implies, identify a particular and unique tag, therefore can only appear once in a document. In the example above the #first selects an ID of first.

The (2) second part is called the rule. The rule is composed of the property: here in pink, and the value: here in black. The properties are reserved keywords that determine style elements such as color, background-color, position, line-height and others. The values sometimes are hexadecimal values such as #fff for color white and other times just reserved keywords such as left, right, relative or absolute.

Little Details:

By using commas in the selectors you can select several distinctive tags and apply the rules to them.

Each rule set (property:value) end with a semicolon except when only one directive long, however you can include it when only one directive long. So, I recommend getting in the habit of always finishing the rules with a semi-colon. ALWAYS!

Many people like to declare the rules in the same line, one after the other. In my personal opinion it just doesn’t improve readability. So try to write rules in their own line so it becomes easier for you to read them in the future.

Comments can be written by encapsulating them with:

/* Comments go here */
h1 #first .top {
color:#fff;
}

That is it… I hope that you guys now have a better understanding of the basics of CSS and how it interacts with the markup. Obviously this is just an intro, but it should serve you as a good foundation and hopefully you will understand better the world of web design.

Thank you guys,

Alex_ @ merkados
http://www.merkados.com
Website Design Raleigh, Durham & Chapel Hill

Posted in Uncategorized |