CSS 101B: More Core CSS Syntax and Usage
Home Tutorials Reviews Weblog

Review: CSS Stylings - more core syntax of CSS are reviewed here
Feature: What and Where is CSS used most often


More CSS Basic Syntax


In the previous CSS tutorial, the core syntax of CSS was covered - and it turns out that CSS syntax is elegantly simple. First there is no programming, looping or other coding constructs. Rather, there is a Selector which names the style and targets where it can be applied. Then in curly braces, there is a Declaration Block that contains one or more Property+ Vlue pairs that determines the specific formating for this style rule. That is it. However, there is a proviso - there are just over 100 properties for CSS 1 and 2; and CSS 2.1 and 3 add nearly 3 dozen more. Combine this with over 70 basic selectors - and there is a great richness in CSS styles.

What CSS Can Style

CSS is used to style two things on Web pages - Text and its containers(95.5% of CSS usage), images (4% of usage)and Aural Codes (0.5% of CSS usage). Most other media such as audio, animations, vector and bitmap images, video and so forth are under proprietary "standards" such as Adobe Acrobat/PDF, Adobe Flash, IStream Viewpoint and the newly minted Microsoft Windows Presentation Framework/Everywhere also known as SilverLight - among others. So it is safe to consider CSS as primarily dealing with styling of text and the placement of images and other object containers on a page.

Note that I did not say Web page because a growing use of CSS is to style displays such as PDA or mobile phone or tablet PCs. CSS understands page sizes and how to fit blocks of text or media containers on that "display surface".

Okay so CSS deals with blocks of text and "media containers". What are media containers ? They are primarily rectangular regions of space on a page/panel set aside for text and images(about 90% of the time) while the other 10% of content are an animation, a Java Applet or other active program (like a portal in BI applications). CSS to version 2 does not work in ovals, circles or non-rectangular areas. CSS is box oriented. CSS knows the third dimension of layers or or so-called z-index, so it can stack layers of panels or flat boxes in space and correctly show the top most layers. CSS3 starts to address the issue of irregularly shaped surfaces. If you get the impression that CSS is the DTP-Desktop Publishing Language for Web pages and displays you are not far off the mark. So the logical next question is how does one create CSS style rules.

Core Ways of Creating CSS Style Rules

Given the richness of the CSS mandate I had really expected CSS to have a much more complex syntax and a quite varied number of ways of creating CSS style rules. In fact there are only 3 methods of specifying and creating CSS styles:

1)In an external .css text file which can be imported and then used to style a web page in two ways:
   i)using the <link> statement in the <head> of an HTML file as below.
     <link rel='stylesheet' type='text/css' href='osstyle.css'>
   ii)using the import statement in the <style>..</style> block at the <head> of a HTML file.
     @import url(pssytle.css);
2)in the <head> section of a web page within a <style>..</style> block;
3)directly in an HTML tag using the style= option.

Again, Thats all Folks! There are no other ways to add CSS styling to your web pages or displays except through dynamic programming in Cold Fusion, JavaScript or Flash.

This website uses the first method, the .css text file is osstyle.css and it is specified in the <head> section as:
<link rel='stylesheet' type='text/css' href='osstyle.css'>
However I could also have used an @import statement as follows:
<html><head><style type='text/css> @import url(osstyle.css); ...</style> ...</head> ...</html>
The important point is that my styles for most of theOpenSourcery.com pages are all in the same place. So in smart Web editors like Dreamweaver, Eclipse, NetBeans, and others, all my style rules are immediately made available to me and usually on access from a CSS Panel as in Dreamweaver in the screenshot at the left. Note how Dreamweaver lists which HTML tags have styling applied to them but also my own created CSS styles like .hilite, .redlite, etc. Also I can see what properties I have set for any tag or personal style by just selecting that style name.

Second if I need to make a styling change such as changing the gray background color, or increasing the indent on citations, or adding a new .underbold style rule - I make the changes in one place and all the website pages which use those style rules are instantly updated. Very nice and fast.

However, I also use the <style>...</style> block on a few web pages where I want to use the same styling rule over and over but do not want to clutter up my basic osstyle.css stylesheet file. Finally, I very rarely use the style= option or inline style rule, but only selectively when I cannot use straightforward HTML attributes. Typically it is in a situation like the following: style="margin-left: 12px;" - a one time precise positioning or a form tag that I may want to change using JavaScript and DOM code. This is very specialized but really, in all honesty, harder to maintain.

So lets put all this knowledge to good use and create the following rule in this pages <style>...<style> section:

.marquee { margin-left: 300px; background-color:blue; color: white; border-color: red; border-style: solid double; border-width: 4px; font-size: 14pt;}

Then add this to a span statement like so:
<span class="marquee"> Isn't CSS simple yet effective? </span> And here is the result:

Isn't CSS simple yet effective?

Summary

This tutorial has summarized the syntax of CSS plus when and where CSS is best used. It also looks at bringing styling rules into one or a few files making editing and changes to style and formatting of web and display pages much easier and more efficient. Also having a stylesheet file promotes reuse. The basic syntax of CSS turns out to be deceptively simple - the real challenge will be to learn all the formatting properties.

Finally there are three ways of specifying or creating stylesheet rules for use - 1)external stylsheets contained in a separate .css text file, 2)internal style sheet in the <style>...</style> block in the <head> section of a Web page or 3)asa inline style which is the style= option in a HTML tag. In the next tutorial I will explore when to create styles and how to target them. In addition, throughout these tutorials I shall be referring to chapters two books.CSS in Easy Steps by Mike McGrath - $15US covers CSS very concisely but with great illustrations. The second book will be Eric Meyer's CSS: The Definitive Guide 3dEdition - $45US. This voluminous book is by one of the acknowledged best CSS practitioners. Eric covers the topics in the last 3 tutorials on pages 1-22 of The Definitive Guide; while Mike has some nifty examples on pages 10-17 of CSS in Easy Steps.




Top of Page  Home  Tutorials 

Developers Weblog  Graphics Reviews and Tips