Introduction Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) or simple style sheets are text files that contain one or more rules in the form of property/value pairs for determining how elements in a Web page should be displayed. In other words, CSS is a simple mechanism of describing common presentation semantics for every page in a Website. The use of CSS in a Web page helps in enabling the separation of content from the presentation elements, which includes the layout , color and, fonts used in the Web page.
W3C has developed some specifications (or rules) for creating and using style sheets in an HTML Web page, which are called CSS specifications. Till now, three versions of CSS specifications have been released : CSS 1, CSS2, and CSS 3. In the latest specification of CSS, W3C has recommended that the HTML elements that purely dealt with style-related aspects, such as <u>, <center>, and <strike>, should be deprecated and in place of these HTML elements their replacements in CSS should be used.
The various advantage of using CSS in an HTML Web page are:
- Improvement in content accessibility.
- More flexibility and control in the manner the content is presented on a Web page.
- Helps multiple Web pages of a Website to share the same formatting
- Reduces the complexity in adding structural content, such as presenting content in a tabular format.
Understanding Style Sheets
CSS is a style sheet that is used to provide the set of style rules for HTML elements and display the layout with formatting on a Web page. The syntax of CSS is slightly different from that of HTML. In contrast to the angle brackets (‘<’ and ‘>’), equal sign, and quotation marks found in HTML syntax, CSS syntax contains curly braces, colon and semicolon. The syntax of a CSS rule is as follows:
Selector {property1:property1-value; property2:property2-value; property3:property3-value…….}In the preceding syntax, selector is the element that the rule defines; property1, property2, property3 are the properties (attributes) defined for that element; and property1-value, property2-value, property3-value are values assigned to these properties. The portion of the syntax enclosed within the curly braces is termed as declaration.
Using the above CSS rule syntax, you can create a CSS rule to set the background properties (background-color, background-image, and background-repeat) for <body> element, as follows;
body{background-color:#0000ff; background-image:url(imageaddress.jpg); background-repeat:repeat-x}The preceding CSS rule sets three background properties (background-color, background-image, and background-repeat) for the <body> element in three declarations. You can, however, set these three properties in just one declaration, using the shorthand property named background. A shorthand property is a CSS property, which enables you to set two or more properties in one declaration), as follows:
body{background:#0000ff url(imageaddress.jpg) repeat-x}
After getting familiar with the basic concepts of style sheets, let’s now the various ways in which styles can be created.
In HTML 5, you can use CSS to format the HTML elements by adding color, font style and size. With the use of CSS, it helps you not to use the same HTML element, such as <font> tag for changing the font color, size, and style of the HTML elements on a Web page. You can incorporate CSS styles with an HTML document in four ways:
- By using external style sheets
- By using embedded style sheets
- By using inline styles
- By using style classes