Introduction to Cascading Style Sheets
A Cascading Style Sheet (CSS) is a rule-based language, which specifies the formatting instructions for the content specified in an HTML page. It purpose is to separate HTML content from its formatting so that web page designers would not worry about the formatting and layout. This is because they can define the layout and formatting of the content in a separate file saved as .css. In the .css file, the formatting instructions for an element are referred to as a rule set. CSS was invented in 1997.
Need of Style Sheets
A style sheet is a collection of rules that specifies the appearance of data in an HTML document. HTML is a markup language that focuses only on the layout of the content on a web page. For example, if you want to change the text in the H2 element to bold, this has to be done manually for all the H2 elements. Such a manual task might result into human errors such as missing an occurrence of the H2 element for applying the bold format. This result in format inconsistency among the H2 elements with an HTML page.
Benefits of css
Code Reusability: CSS saves time by specifying the formatting options of an element only once and applying to multiple HTML pages.
Less HTML Code: CSS helps in reducing the file size of HTML documents by specifying the formatting instructions in another file.
Device Independence: CSS is designed for different devices to provide the same look and feel of the HTML page across them.
Working of CSS
You can embed the CSS code within the HTML code or link the HTML file to the CSS file. The browser will locate the style sheet irrespective of its location and will apply it to the HTML page. There are certain steps involved in applying a style sheet to an HTML page. These steps are:
1. The user requests for a web page from the browser using the URL.
2. The server responds with the HTML file and related files such as image files, audio files, and external .css files, if any.
3. The browser executes the CSS code using the rendering engine and applies the styles to the HTML file.
4. Then web page is then displayed in the browser.
The rendering engine is software that applies the formatting instructions to the web page and displays the formatted content on the screen.
CSS Syntax
The general syntax of css consists of three parts namely, selector, property, and value. A selector is an HTML element for which you want to specify the style or the formatting instruction. A property is a css property that specifies the type of the style to be applied to the selector. CSS allows controlling the appearance of the content by providing various properties. These properties include text properties,, positioning properties, font properties, color properties, and so on. A value refers to the value of the CSS property. A CSS property can have multiple values. For example, the values of the color property include red, green, yellow, and so on.
The property and its value of a selector are separated with a colon (:). They are enclosed within the curly brackets ({}) that is known as the declaration block.
Multiple Properties and Selectors
You can various combinations for rules for HTML elements. First, you can specify multiple property-value pairs for a selector, which are separated by a semicolon (;) within the declaration block. Second, you can specify multiple selectors for a single property by grouping the selectors. To group the selectors, the selectors are separated by commas followed by a declaration block of properties and values. Third, you can specify properties for multiple selectors. Here, the comma-separated selectors are followed with multiple property-value pairs.
Length Measurement Units
CSS uses various units of measurements for specifying size of the font, width and height of margins, and so on. These units measure the horizontal and vertical length of the content. CSS supports two types of measurement units namely, relative and absolute.
Relative
Relative length specifies the length units related to other length property.
em- Specifies the font size (height) of a particular font. The em unit is relative to the value of the font-size property of the selector.
ex- Specifies the ‘x-height’ of a particular font. The ‘x-height’ value is approximately half the font size or the height of the lowercase letter ‘x’.
px- Specifies the size in pixels, which is relative to the screen of the device.
Absolute
Absolute lengths are specified when the web page designer is aware of the physical properties of the output device.
in- Specifies the size in inches, where 1 inch= 2.54 centimeters.
cm- Specifies the size in centimeters.
mm- Specifies the size in millimeters.
pt- Specifies the size in points, where 1 point= 1/72th of the inch.
pc- Specifies the size in picas, where 1 pica= 12 points.
Types of Style Sheets
There are three types of style sheets namely, inline, internal, and external style sheets. An inline style sheet uses the style attribute within an HTML element to specify the style for HTML elements.
An internal style sheet is also included within the HTML document. However, it is defined using the STYLE element with the HEAD element. The style rules appear in a declaration block for each HTML element under the STYLE element. The type attribute of the STYLE element specified the content type, which is text/css. This means that the content under the STYLE element is CSS code. You can specify any combinations of specifying style rules. The style rules specified for an element will be applied to all the sub-elements. Internal style sheets are useful when styles are to be applied to a specific web page.
