|
| You are here : Web design > Languages > C S S | DinkostaOnline |
|
| Cascading Style Sheets (CSS) existed as a recommendation of W3C since 1996, but the real acceptance of CSS happened in the last one or two years (with the arrival of newer browsers like IE 5). Nowadays almost every web-site contains Cascading Style Sheets in its source code. This web technology gives web authors greater control over the look of elements in a web page. CSS makes it possible to remove the underline in text-links, to make text-rollovers without JavaScript, to absolutely position elements on a page, define a style-change rule once and then use it on several pages (and that way reducing the amount of work) and so on. Style sheets can be placed in the header of the HTML document, embedded in <style>...</style> tags. Style rules can also be placed in the body section and in that case it applies usually to individual elements (for example: <p style="color:red;font:bold 18">). The third option is to specify external style sheets: that is a document with plain text where all the rules are specified and which is saved with a .css extension. Rules defined in such a document can be applied to all HTML documents which are linked to it, for example: <link rel="stylesheet" href="xy.css" type="text/css>, where xy is the name of the external document. |
Here is a sample HTML document: <HTML><HEAD> <TITLE>Home page</TITLE> </HEAD> <BODY> <H1>My home page</H1> <P>This is my home page. </BODY></HTML> To set the text color of the H1 elements to blue, you can write the following CSS rule: H1 {color: blue} A CSS rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). While the example above influences only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined) it will determine the final presentation of the document. The HTML 4.0 specification defines how style sheet rules may be specified for HTML documents: either within the HTML document, or via an external style sheet. To put the style sheet into the document, use the STYLE element: <HTML><HEAD>
<TITLE>Home page</TITLE>
<STYLE type="text/css">
H1 {color: blue}
</STYLE>
</HEAD>
<BODY>
<H1>My home page</H1>
<P>This is my home page.
</BODY></HTML>
For maximum flexibility, it's recommended that authors specify external style sheets; they may be changed without modifying the source HTML document, and they may be shared among several documents. To link to an external style sheet, you can use the LINK element: <HTML><HEAD> <TITLE>Home page</TITLE> <LINK rel="stylesheet" href="hom.css" type="text/css"> </HEAD> <BODY> <H1>My home page</H1> <P>This is my home page. </BODY></HTML> The LINK element specifies: Δ the type of link: to a "stylesheet". Δ the location of the style sheet via the "ref" attribute. Δ the type of style sheet being linked: "text/css". Let's add more colors to our example:
<HTML><HEAD>
<TITLE>Home page</TITLE>
<STYLE type="text/css">
BODY {color: black}
H1 {color: blue}
</STYLE>
</HEAD>
<BODY>
<H1>My home page</H1>
<P>This is my home page.
</BODY></HTML>
The style sheet now contains two rules: the first one sets the color of the BODY element to 'black', while the second one sets the color of the H1 element to 'blue'. Since no color value has been specified for the P element, it will inherit the color from its parent element, namely BODY. The H1 element is also a child element of BODY but the second rule overrides the inherited value. In CSS there are often such conflicts between different values, and this specification describes how to resolve them. CSS2 has more than 100 different properties, including 'color'. Let's look at some of the others:
<HTML><HEAD>
<TITLE>Home page</TITLE>
<STYLE type="text/css">
BODY {font-family: "Verdana", sans-serif;
font-size: 14pt;margin: 3em;}
</STYLE>
</HEAD>
<BODY>
<H1>My home page</H1>
<P>This is my home page.
</BODY></HTML>
The first thing to notice is that several declarations are grouped within a block enclosed by curly braces ({...}), and separated by semicolons, though the last declaration may also be followed by a semicolon. The first declaration on the BODY element sets the font family to "Verdana". If that font isn't available, the browser will use the 'sans-serif' font family which is one of five generic font families which all browsers know. Child elements of BODY will inherit the value of the 'font-family' property. The second declaration sets the font size of the BODY element to 14 points. The "point" unit is commonly used in print-based typography to indicate font sizes and other length values. It's an example of an absolute unit which does not scale relative to the environment. The third declaration uses a relative unit which scales with regard to its surroundings. The "em" unit refers to the font size of the element. In this case the result is that the margins around the BODY element are three times wider than the font size. • Class and ID Classes let you create grouping schemes among styled HTML tags by adding the style definition of a particular class to the style definitions of several different tags. In the stylesheet, a class name is preceded by a period (.) to identify it as such. An example:
<style>
P {font-family: sans-serif; font-size: 12pt}
H2 {font-family: serif; font-size: 24pt}
.red {color: red}
.green {color: green}
.blue {color: blue}
</style>
The ID attribute is used for a uniquely defined style within a stylesheet. In the stylesheet, an ID name is preceded by a hash mark (#) to identify it as such:#dab {color: red;font: bold 20} And in the BODY : <h2 id="dab">Text rendered in the dab style.</h2> Applied on a page it would look like this: Text rendered in the dab style.• Text-Level Attributes: <SPAN> and <DIV>The <span> tag is generally used to apply a style to inline text: <p><span class="red">This text would be rendered as red-style</span> and this would not. The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements: <div class="green"> <p>The "green" style would be applied to this text, and to <a href="page.html">this text</a> as well. </div>The style attribute provides a way to define a style for a single instance of an element. If you define the style for a paragraph like <p style="font-size:10pt;color:red">This text ...</p> you would get: This text is rendered as red, 10-point type The class, ID, and style attributes can be applied within the <span> and <div> elements. Used with class or ID, the <span> and <div> tags work like customized HTML tags, letting you define logical containers and apply a style to their contents.
|
