I hope this list can answer the most common questions on Cascading Style Sheets.
What is CSS?
CSS is a simple styling language that allows attaching style to HTML or XML elements. CSS by definition means cascading style sheets. The term cascading derives from the fact that multiple style sheets can be applied to the same web page. CSS allows you to change the appearance of hundreds of web pages by changing just one file. CSS designers can create style sheets that define how different elements can such as headers, links, colors, and fonts appear.
CSS was developed by the World Wide Web Consortium (W3C)
What are Cascading Style Sheets?
Cascading Style Sheets are a template containing a collection of rules. The governing body of the web, the W3C, recommended the use of CSS in December 1996 with the ratification of the CSS Level 1 specification. A CSS sheet is attached to an HTML document, to influence its layout when accessed via a browser. CSS supports cascading, i.e. a single document may use two or more stylesheets that are than applied according to specified priorities.
Why use Cascading Style Sheets?
By designing your pages using a single, or even multiple, external style sheets, you can apply those changes to your site by modifying the style sheet and then simply uploading the modified version.
How do style sheets work?
Put simply, a style sheet is a set of instructions that suggest how a web browser should draw a page.
A style sheet is made up of a series of instructions called statements. These statements define elements such fonts, text and links which affect an HTML page that the style sheet is embedded or attached to. To effect the style of the corresponding HTML page the elements must be marked up inside HTML tags.
Each statement is made up of a selector that selects page elements and a declaration that tells a browser how selected elements should be drawn.
How do I link to a style sheet?
A style sheet can be associated with an HTML document. by placing a link in the head of the HTML file which points to the CSS file.
With this link, when the browser begins reading the page, it sees the style sheet link and downloads the style sheet then uses the style sheet to draw the page.
The advantage of external style sheets is that they can be reused on several HTML documents. If you want to change the style of your pages, you also do not have to alter the HTML code, but only the style sheet.
<link href="style.css" rel="stylesheet" type="text/css" />
The markup above shows how I linked my CSS file - style.css to this HTML document.
CSS box model
In an attempt to understand CSS layout and after many CSS tutorials everything was made clear by the box model diagram presented in W3 Schools. I have attempted to break down this example and present it in a visual style.
The diagram below helps visualize CSS positioning. For the purpose of this tutorial, each element of the box model is shown as a rectangle.
CSS box model hierachy
The main content area which is shown as the text is surrounded by padding, border, and margins.
CSS designers can create style sheets that define how different elements can such as headers, links, colors, and fonts appear.