HTML: Introduction to CSS
Cascading Style Sheets (CSS) are what you use to apply style to your HTML documents. A CSS document is a text document that contains one or more rules which tell browsers how to format the elements on an HTML page. A rule consists of a selector that specifies the element to which to apply a style and a declaration that declares which style to apply. Declaration includes two components such as: property and value. There are many CSS properties you can set, including properties for positioning and sizing elements, properties for setting an element’s font and colour, and numerous others.
You simply cannot create professional websites these days without using a CSS stylesheet. Stylesheets move HTML pages into the realm of graphic arts. Gone are the days when a programmer, such as the author, could throw together a couple images and text mixed with some HTML tags, and call it a professional website. Consider a website with and without a CSS stylesheet applied. The difference is striking. CSS makes HTML Web pages as professional as printed magazine layout and design.
Before understanding CSS you must understand the HTML id attribute and class attribute. Every HTML element can have an id and class attribute. The id attribute assigns an element a unique name, while a class assigns the element a class name.
<p id=”imp_para” class=”important_paragraphs”></p>
If you are familiar with object-oriented programming then understanding an HTML class is easy. But for those who are not familiar with object-oriented programming, a class is a way to group similar elements. For instance, picture a website based on this book, with important information summarised in a table. Each page has its own table, but you want each table formatted similarly. You use a class.
<table class=”callout”>
— table info here — </table>
However, suppose you wanted one of the tables to use its own formatting. You would assign the particular table an id.
<table class=”callout” id=”specialTable”>
— table info here—</table>
The ‘div’ element
The div element is a block-level element that defines logical sections in an HTML document. CSS enables these logical sections to be formatted independently. Think of <div></div> tags as the basic building blocks in your HTML page. You position and format the blocks to achieve the desired page appearance.
You should always define a top-level division for your page.
<body><div id=”outermost”></div></body>
You then add nested <div></div> tags as needed to achieve the desired layout.
The div element is a block-level element. The purpose of the element is to divide the HTML page into logical sections, not other block-level elements. You can’t nest the div element in a paragraph or block quote, for instance. Instead, these elements should be nested in the div element. Think of the div element as the building blocks for a page.
The ‘span’ element
The span element is an in-line-level element and group’s in-line content. It allows you to specify CSS formatting for arbitrary text and other in-line elements. You can wrap any in-line content in a span and then apply CSS formatting to it.
