Everything to CSS

Information and how it works

So what is css? First of CSS (Cascading Style Sheets) is a CSS is a rule-based language - you define the rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page. Also it allows you to further stylize your webpages and change spicific aspects of things like text, images, imbeds ext. CSS can be used for very basic document text styling - for example, for changing the color and size of headings and links. It can be used to create a layout - for example, turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation. Because there are so many CSS properties differenty ones have different allowable values, depending on which property is being specified. In our example, we have the color property, which can take various color values. We also have the font-size property. This property can take various size units as a value. Here are some example CSS properties.

When a browser displays a document, it must combine the document's content with its style information. It processes the document in a number of stages, which we've listed below. Bear in mind that this is a very simplified version of what happens when a browser loads a webpage, and that different browsers will handle the process in different ways. But this is roughly what happens.

• 1. The browser loads the HTML (e.g. receives it from the network).
• 2. It converts the HTML into a DOM (Document Object Model). The DOM represents the document in the computer's memory. The DOM is explained in a bit more detail in the next section.
• 3. The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images, videos, and even linked CSS! JavaScript is handled a bit later on in the process, and we won't talk about it here to keep things simpler.
• 4. The browser parses the fetched CSS, and sorts the different rules by their selector types into different "buckets", e.g. element, class, ID, and so on. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required (this intermediate step is called a render tree).
• 5. The render tree is laid out in the structure it should appear in after the rules have been applied to it.
• 6. The visual display of the page is shown on the screen (this stage is called painting).

Its a good idea to use CSS because it can help transform a boring basic white screen with black text on it to somthing like the website that your are currently reading this on. Your web site might have thousands of pages that look similar. Using CSS, you store the style information in common files that all the pages share. When a user displays a web page, the user's browser loads the style information along with the content of the page. When a user prints a web page, you might provide different style information that makes the printed page easy to read. CSS also helps you orginize the information in your website and the differnt aspects of it, it also allows you to have spicific looking aspects that only show on your website or cetain pages of that website. CSS is one of the main building blocks to make a website work without it you would just be looking at a white screen with a bunch of jumbled text.