Learning Website Design: Session 4 – Understanding CSS

December 9th, 2009 admin Location: Raleigh, NC, Topic: Web Design | Digital Media

[private]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

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[/private]

About the Author

Alex Centeno MBA., is an international creative director and digital media strategist. Currently residing minutes away from the Research Triangle Park (RTP) - North Carolina, and with over 10 years of interactive marketing training and experience, Alex leads Merkados' international clients to maximizing their online business strategies. One of Alex's biggest strengths is his world-class capacity to effectively combine interactive marketing, digital media design and web development.

You may find further information about Alex Centeno MBA. at: and Twitter.

Sobre el Autor

Alex Centeno MBA., Es un director creativo y estratega de medios digitales reconocido internacionalmente. En la actualidad reside a tan solo minutos del Research Triangle Park (RTP) - Carolina del Norte, y con más de 10 años de entrenamiento y experiencia en marketing interactivo, Alex lidera a los clientes internacionales de Merkados™ para maximizar sus estrategias de negocios en línea. Una de las mayores fortalezas de Alex es su capacidad global de combinar de manera efectiva, mercadeo interactivo, diseño de medios digitales y desarrollo web.

Para más información sobre Alex Centeno MBA. puede visitar: y Twitter.