CSS Basics

This article contains the review of the very basics of CSS, so that you get an idea of its functioning with modern web deign. Hope this time all the explanations will be clear for you.

All we know that there are three things to consider while creating a web page – content, form and function. CSS is in charge of the form of the web page if it is html-based. Thus, CSS can be called the visualization of html. Theoretically visual styling handled by CSS provides you with completely different design when you load a different CSS files onto the given HTML. Here is W3C explanation:

Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced … By attaching style sheets to structured documents on the Web (e.g. HTML), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new HTML tags.

Thus, CSS is all about presentation of HTML.

Default Styling

We also should talk about browsers. Each browser tries to provide a standard styling for each element. Thus, there are standard margins of p tags as well as the display behaviour of such html elements as blocks – inline – … In such way, default style guarantees that even unstyled html documents will be displayed correctly in their browsers.

However, there are also exceptions without which rules can’t exist. For example, the default styling of the legend element that can be fixed by currently supported CSS methods. On the whole, all the browser styling could be translated to simple CSS rules.

CSS Syntax

form p {display:block; color:red;}

• form p is the selector, the part of the css rule, defines the elements that should be targeted.
• { } are the brackets that contain all properties that should be applied to the targeted elements.
• display:block; is one css property (“display”) and its value (“block”). The semi-colon separates multiple property declarations.

CSS file is a collection of rules that can hold multiple properties. These properties are separated by semi-colon. If there is only one property or when the property is the last one, the semi-colon is not required. However, it is recommended to close each property declaration by default to avoid some errors.

CSS Cascade

CSS stands for cascading style sheet where style sheet is the files that contain styling rules. We can see the cascade effect in the way rules are applied to html elements.

Sometimes several rules apply to the same html tag. Thus, all properties of all rules will be applied. The other thing is when the same property is declared for both rules. This time the selector decides everything. Thus, “stronger” rule will be chosen and the value of the “stronger” rule will be applied. It is quite important concept to consider. However it also creates some problems because of browser bugs.

In case both rules are equally strong, the last rule “wins”. Note this when including the CSS files in your html document, because some rules can be overwritten by other CSS files and lead to unwanted effects.

Reference: www.onderhond.com/blog/work/hardcore-css