CSS - Elements of Style

CSS is a style sheet language that is used to describe the presentation of a document written on a mark-up language like HTML. It is the acronym for Cascading Style Sheet and has recently become a widely accepted formatting preference due to its many practical advantages and power in providing simplicity, versatility and control to web content styling as well as web element behaviors.

The above image is a good example of CSS. The first item refers to the h1 selector (a header html tag) and its corresponding styling attributes. Let's examine it closely.

h1 is called a selector while everything inside the curly brackets { } is called a declaration block. Every declaration block consists of one or more declarations separated by a semi-colon (;). Each component declaration consists of a property (like color) followed by a colon (:) and its value.

A property describes an aspect of a HTML element's presentation. In our example color is one aspect of the element mark-upped as an h1 tag, border is another, while padding and font-weight is yet another aspect of an element mark-upped as a HTML h1 tag. In CSS, the HTML tag h1 (header tag) is referred to and also called a selector since its function is to select all HTML elements mark-upped as h1 in the HTML document and apply the all the properties enumerated in the declaration of an h1 selector. This is same as saying that in all h1 elements in a document, the same properties and property values will be applied. In our example, all h1 (header type 1) elements will have the same white font color [color:white;], a surrounding solid black border 1 pixel thick [border:1px solid black;], no padding space between the header text and border [padding:0 0 0 0;], and all header fonts will be displayed as bold [font-weight:bold;].

The second selector in our image example is the body selector which refers to all the HTML elements contained inside the body tag. Recall that the body tag basically contains all the text and image elements of a particular web page. This means that all elements like h1 p ul li a which doesn't have any prior declaration before this selector in CSS will have the same style defined by the declaration block of the body selector.

Any prior selector with a property in conflict with a succeeding selector property will be resolved as follows: The value of the latter property takes precedence over the former without affecting the values of the properties of the prior selector which are not in conflict with any of the latter's property. In our example, both h1 and body selector has a color property. The two color properties are in conflict. But since the body selector was declared latter, the color of both selector would now be rendered as black instead of h1 being white. Also, since other properties are not in conflict, these properties are rendered according to its respective values. This is the cascading nature of CSS.

Cascading Nature & Specificity

Put in another way, a child container inherits the properties of a parent container so long as it does not conflict with the parent's. When in conflict, the child's properties takes precedence. A more precise rule relating to the concept of cascading refers to "specificity". Specificity states that: the more specific the rank of an indicator with respect to another, the more specific indicator takes precedence. The details of these rules are beyond the scope of this article. However, it is worth to mention that the specificity is also dependent on the relative position (or placement) of a declaration within an HTML document.

Let's give a few examples:

  • Inline styles which are embedded with the HTML tag take direct precedence over all the rest. The effect however will only be application for that specific HTML tag. Relating to our example above, if we have an inline style like <p style="color:red;">, then that particular paragraph alone will have its text colored red while the rest of the other p tags will maintain a black text.
  • Specific styles declared in the head tag (container) takes precedence over references to an external style sheet wherein global CSS declaration are set.
  • Within a list of specific styles declared within the head tag, the latter declaration in the list takes precedence over the former (like the example explained above).

Creativity is the LIMIT

All HTML elements and tags can be selected and defined by its corresponding CSS selector each with its author-defined declaration block. The choice-list for CCS selectors can be extremely long as well as the choice-list for properties and its possible values. In fact, these combinations of selectors, declaration blocks, declarations, properties and property values are almost unlimited; creativity is your only limit.

Essential Links You Can Use
For Further Self Study

Global Transformation

CSS is merely a text document containing the set of author defined-selectors and declaration blocks that will be applied to all HTML elements on a webpage or several web pages comprising a website all at once. In others, certain tags like <h1> (header type1), <h2> (header type2), <p> (paragraph), <ul> (un-ordered list), and <li> (list item) that appears in almost all pages of the web site are simultaneously affected when a declaration block is revised for a particular selector. The change effect is instantaneous and global with respect to the referenced website. This is a quick solution instead of changing styling attributes for every instance a particular tag is used on each and every HTML document which will take time and unwanted errors. This is one of the major strengths of CSS. The cascading nature is another but is beyond the scope of this article.

The article above gives you an inspirational glimpse of the power and flexibilty of CSS and its apparent simplistics approach.

So if you are ready to take a serious plunge into CSS, we suggest you follow (click) the links below. The Internet is by far still the best source of free information and knowledge base!

Zen Garden
Zen Garden is an online experience to the multi-power of CSS to transform a single HTML document into another layout and theme. By applying different sets of CSS rules to a fixed and static HTML document, one can view the same web content diffrently with varying sensory impact. Try it! It will inspire your creativity to harness the full power of CSS.
CSS Reference
This is a complete and comprehensive listing of all CSS selectors that you use and apply right away with your HTML document.
W3 Schools
W3schools.com is a Full Web Building Tutorials - All Free! This link brings you directly to its CSS tutorial home. It's not only a tutorial but a comprehensive reference and guide for all HTML elements and tags, and CSS including various approaches and techniques of applying them in practice. The site also provides a special and helpful online feature for interactive HTML and CSS authoring using templates you edit and preview instantly on a dummy webpage. Just click on the example links close to the bottom of each page on the site. It even gives you a ligitimate diploma after completing a course sucessfully!

Good Luck!