Приглашаем посетить
Маркетплейс (market.find-info.ru)

2.1 What is CSS style?

Table of Contents

Previous Next

2.1 What is CSS style?

While Web site visitors demand more attractive, fast loading, and interesting sites, traditional formatting and page layout are no longer efficient enough to handle more complex design requirements. As a simple example, imagine a page with hundreds of lines and more than 50 paragraphs. Each paragraph is to be formatted by the traditional font face and size attributes. It would be an administrative nightmare to make any changes. Therefore a structural cascading mechanism is urgently needed. To rescue this reusability crisis, W3C came up with an elegant solution called the Cascading Style Sheet (CSS). It is a structure that separates formatting features from the contents of a page.

CSS works by specifying the element you want to modify, and stating how you want it to be displayed by the Web browser. For example, a typical CSS may look like this:




<style>
 h2 {color:red;font-family:arial;font-size:14pt}
</style>

This CSS defines the characteristics or style for the second-level headers (i.e., <h2>). In this case, the text within the element <h2> will be displayed using the Arial font, 14pt, and red color. More importantly, the style h2 can be cascaded over by subsequent CSS definitions.

CSS is the term used to broadly refer to several style methods of applying style elements to HTML pages. These are the inline style, internal (embedded) style, and external style sheets. A style is simply a set of formatting instructions that can be applied to a piece of text.

Styles define how to display HTML elements. The results are better font control, color management, margin control, and even the addition of special effects such as text shading. Multiple style definitions will cascade into one. This means that the first is overridden by the second, the second by the third, and so on.

2.1.1 Inline style

You have already met a number of CSS styles in Chapter 1. They are basically inline styles. You can add inline style to any "sensible" HTML elements by using the style attribute in the associated element. The browser will then use the inline style definitions to format only the contents of that element. The style attribute can contain any CSS property. Example ex02-01.htm shows how to define the style of a document body and how to change its default definitions.




Example: ex02-01.htm - Inline CSS Style

 1: <?xml version="1.0" encoding="UTF-8"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Inline CSS Style - ex02-01.htm</title></head>
 6: <body style="font-family:Times;font-weight:bold;background:#000088">
 7:
 8:  <div style="font-size:20pt;text-align:center;color:#00ffff">
 9:   Inline CSS Style </div>
10:  <p style="font-family:arial;font-size:16pt;color:#ffff00;
11:  margin-left:20px;margin-right:20px">
12:   With CSS, we can control the margins of an element.
13:   This is a paragraph with margin-left:20px and margin-right:20px.
14:   </p>
15:
16: </body>
17: </html>

In this example, the style attribute is used within the <body> element (line 6). The default font and background color are now set to bold Times and color value #000088 (dark blue) respectively. All CSS properties have to be included inside the double quotation marks of the style attribute and are separated by semi-colons.

The division element <div> in line 8 has all the CSS properties from <body> with some additional definitions. A division is similar to a paragraph but without an additional line break. Next to this division, there is a paragraph element <p> (line 10). This paragraph changes the default font family to "arial" and adds some margin controls. When an element has two or more of the same CSS definitions, the earlier ones will be overridden by the latest one. That is, the styles will be cascaded into one.

Notice how you can call for a font using the font's name as well as point size. In CSS, you can also use points (pt), pixels (px), percentage (%), inches (in), and centimeters (cm) to control sizing and positioning of an element. As a good design habit, always include the measurement units in your page.

A screen shot of page ex02-01.htm is shown Fig. 2.1.

Figure 2.1. ex02-01.htm

graphics/02fig01.jpg


2.1.2 The embedded style element <style>

In addition to inline style, there are also internal (or embedded) and external styles. External style is a separate file for CSS properties and will be discussed in section 2.1.3. Internal styles are usually defined within the <style> element. A typical example is




<style type="text/css">
     h2 {color:#00ffff;font-size:20pt;text-align:center}
     h4 {margin-left:70%}
     body {font-family:arial;font-size:14pt;color:#ffff00;
    background-image: url("backgr01.jpg")}
</style>

The browser will then read the style definitions and format the document accordingly.

A browser normally ignores unknown elements. This means that an earlier browser that does not support styles will ignore the <style> element, but the content of <style> will still be displayed on the page. It is possible to prevent an earlier browser from displaying the content by hiding it in the HTML comment symbols.




Example: ex02-02.htm - The Style Element <style> I

 1: <?xml version="1.0" encoding="UTF-8"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> The Style Element <style> I - ex02-02.htm</title></head>
 6: <style type="text/css">
 7:    h2 {color:#00ffff;font-size:20pt;text-align:center}
 8:    h4 {margin-left:70%}
 9:    p {font-family:arial;font-size:16pt;color:#ffff00;
10:        margin-left:20px;margin-right:20px}
11:    body {font-family:arial;font-size:14pt;color:#ffff00;
12:        background-image: url("backgr01.jpg")}
13: </style>
14: </head>
15: <body>
16:   <h2>Internal CSS Style</h2>
17:   <h4>This area was created by CSS margin
18:   margin-left:70% and margin-right:20%</h4>
19:    <p>With CSS, you can control text font, color, dimension, position,
20:   margin, background and much more ...</p>
21: </body>
22: </html>

Lines 613 define an internal style. This adds CSS information to a Web page. Line 7 assigns the level 2 heading with color #00ffff, font size 20pt, and text centrally aligned. Line 8 sets the left and right margins of the level 4 heading to be 70% and 20% of the element's width respectively. Line 9 defines the default font typeface "arial," font size, color value, and left and right margins of a paragraph element. The body also has a background image backgr01.jpg. This page has a screen output as shown in Fig. 2.2.

Figure 2.2. ex02-02.htm

graphics/02fig02.gif


As can be seen from this example, with CSS styles you have precise control over how you would like your text to be displayed. There are also a number of CSS elements that can take a URL. In CSS, the URL should be contained within round brackets, immediately preceded by the statement URL without an equals sign as illustrated in line 12.

Another useful aspect of the CSS style is the inline keyword class. This gives you ways of breaking down your style rules into very precise pieces to provide a lot of variety. You define a style class by putting a dot in front of a CSS definition. This class style can be used in almost any XHTML element with attribute class= and the unique class name.

Example ex02-03.htm defines two CSS classes. One of them is dedicated to defining a button on your browser window.




Example: ex02-03.htm - The Style Element <style> II

 1: <?xml version="1.0" encoding="UTF-8"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> The Style Element <style> II - ex02-03.htm</title></head>
 6: <style type="text/css">
 7:   .txtSt {font-family:arial;color:#ffff00;font-size:20pt;
 8:         font-weight:bold}
 9:   .butSt {background-color:#aaffaa;font-family:arial;font-weight:bold;
10:         font-size:14pt;color:#008800;width:240px;height:30px}
11: </style>
12: </head>
13: <body style="background:#000088;text-align:center">
14: <div class="txtSt">Internal CSS Style Example II</div><br/>
15: <input type="button" class="butSt" value="CSS Style Button" />
16: </body>
17: </html>
18:

The screen shot is shown in Fig. 2.3. In this example, line 7 defines the CSS class with the unique name txtSt with appropriate CSS properties. Lines 910 define another class butSt for a button. All elements that you named class="textSt" will have the .txtSt class attributes. Similarly the <input> element that has class="butSt" will use the .butSt attributes to format the button on the Web.

Figure 2.3. ex02-03.htm

graphics/02fig03.jpg


2.1.3 External CSS style sheets

An external style sheet is ideal when the style is applied to many pages. The style information is placed in a separate document with the file extension .css. With an external style sheet, you can change the look of an entire Web site by changing the corresponding style information file. Each page must link to the style sheet using the <link> element, which usually goes within the <head> section. For example,




<head>
<link rel="stylesheet" type="text/css" href="ex02-04.css">
</head>

The browser will read the style definitions from the external CSS file ex02-04.css and format the document accordingly.

An external style sheet can be written in any text editor and should be saved with the file extension .css. You should also be sure either that this file is in the root directory with the HTML files that you intend to process or that the link is coded appropriately. An example of a style sheet file is shown below.

The following is an example of an external style sheet at work:




Example: ex02-04.htm - External CSS Style

 1: <?xml version="1.0" encoding="UTF-8"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> External CSS Style - ex02-04.htm</title></head>
 6: <link rel="stylesheet" type="text/css" href="ex02-04.css">
 7: </head>
 8: <body>
 9: <div style="text-align:center;color:#00ffff">
10:  External CSS File</div><br /><br />
11: <div>
12: This is a paragraph defined by the division element &lt;div&gt;with
13: margin-left:20% and margin-right:20%</div>
14: <hr>
15: <div>
16: This is another paragraph defined by the division element and separated
17: by a horizontal line. All CSS properties are defined in the external CSS
18: file: ex02-04.css
19: </div>
20: </body>
21: </html>
22:

This page includes a link (line 6) to an external style sheet called ex02-04.css. This file defines all the default formatting features used inside the page. The corresponding external CSS style sheet ex02-04.css is given next:




Example: ex02-04.css - Eternal CSS File For ex02-04.htm

1: hr {color: sienna}
2: div {margin-left:20px; margin-right:20px; color:#ffff00}
3: body {background-image: url("backgr01.jpg");
4:    font-family:arial; font-size:14pt;color:#ffff00; font-weight:bold}

Any page containing this link adopts the styles defined in the external style sheet ex02-04.css. In this example, the horizontal rule line <hr> is changed to the color sienna. Additional margin control is added to the <div> element and the element <body> is given a different style definition. Bold "arial" and color value #ffff00 in a font size of 14 points are used as default attributes. A background image backgr01.jpg is also added to specify graphics as background images. This page has a screen output as shown in Fig. 2.4.

Figure 2.4. ex02-04.htm

graphics/02fig04.gif


2.1.4 Designing Web logos with CSS

Web site logos and trademarks are popular applications on the Web. You can combine inline styles, internal styles, and external style sheets in a Web page to give you maximum control. The browser will display the Web page by first looking at inline styles, then internal styles, and whatever isn't covered in the linked external CSS style sheets. This is a powerful feature of CSS. Imagine you have a large Web site that you're controlling with a single style sheet. You may also have a page on which you want to alter some of the styles to suit a particular purpose. This can be easily achieved by combining various styles together. What you have to do is simply to place the modified styles as an internal style sheet within the Web page that you want to alter. You can also further refine individual areas within the page by adding inline styles.

The following example shows how to use an internal style with classes to define various typefaces, sizes, background colors, margin controls, and placement of objects on a Web page:




Example: ex02-05.htm - Web Logo Designs with CSS

 1: <?xml version="1.0" encoding="UTF-8"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5: <head><title> Web Logo Designs with CSS - ex02-05.htm</title></head>
 6: <style>
 7:   .car_Box {color:#000088;background-color:white;
 8:         width:250pt;height:80pt;
 9:         font-family:"Times New Roman";font-weight:bold}
10:   .car_L1 {color:#000088;font-size:38pt;
11:         font-weight:bold;font-family:"impact";
12:         text-align:center;margin-top:10pt}
13:   .car_L2 {color:white;background-color:#000088;
14:         font-size:16pt;font-weight:bold;
15:         text-align:center;
16:         margin-left:12pt;margin-right:12pt;
17:         font-family:"arial";
18:         letter-spacing:6pt}
19:
20:   .abc_Box {color:white; background-color:#000022;
21:         width:200pt;height:80pt;
22:         font-weight:bold;font-family:"Times New Roman";
23:         margin-top:0.3em; position:relative;
24:         top:-10%; left:52% }
25:   .abc_L1 {font-size:34pt; font-weight:bold;
26:         font-family:"Times New Roman";
27:         text-align:center; margin-top:10pt }
28:   .abc_L2 {color:#DD0000; font-size:22pt;
29:         font-family:"Times New Roman";font-weight:bold;
30:         text-align:center; margin-top:-5pt }
31:
32:   .loan_Box {color:#000088; background-color:white;
33:         width:180pt; height:80pt;
34:         font-family:"Times New Roman"; font-weight:bold }
35:   .loan_L1 {color:#000088; font-size:38pt;
36:         font-weight:bold; font-family: "impact";
37:         text-align:center }
38:   .loan_L2 {color:white; background-color:#000088;
39:         font-size:16pt; font-weight:bold;
40:         text-align:center; font-family:"arial" }
41: </style>
42:
43: <body>
44: <div style="font-family:arial; font-size:24pt; color:#008800;
45:   font-weight:bold; text-align:center" >
46:   Designing Web Logo With CSS
47: </div>
48:
49: <div class="car_Box" align="center">
50:   <div class="car_L1">Racing Sports</div>
51:   <div class="car_L2">FORMULA CARS</div>
52: </div>
53:
54: <div class="abc_Box">
55:   <div class="abc_L1">ABC.COM</div>
56:   <div class="abc_L2">Online Shopping</div>
57: </div>
58:
59: <div class="loan_Box" align="center">
60:   <div class="loan_L2">YesToAll Bank</div>
61:   <div class="loan_L1"><img src="ex02-04.gif"
62:       style="width:180pt;height:30px" alt="pic"></div>
63: </div>
64:
65: <div style="width:250px; height:80px; text-align:center;
66:  background:#0000aa;
67:     position:absolute;top:250px; left:320px">
68:     <div style="font-family:arial; font-size:14pt; text-align:center;
69:   color:#ffff00">Have A Fun Game here!</div>
70:  <div>
71:  <img src="ghost_l.gif" style="width:40px;height:40px" vspace="20"
72:   alt="pic">
73:   <img src="other.gif" style="width:140px;height:80px" alt="pic">
74:   <img src="ghost_r.gif" style="width:40px;height:40px" vspace="20"
75:   alt="pic">
76:       </div>
77: </div>
78: </body>
79: </html>

Various CSS classes are defined within the internal <style> element in lines 642. For example, the class car_Box (lines 79) specifies the default font typeface to be bold Times Roman. It also sets a rectangular box with dimensions 250 points by 80 points, a color value #000088, and a white background. Many items can be encased in boxes to produce very good effects.

The inline style within the <div> element in lines 4445 is designed to temporarily override any existing CSS information that may have already been specified elsewhere. Thus the text "Designing Web Logos With CSS" will be displayed at the center in bold, 24pt, Arial font typeface with the color value #008800. This is an example of cascading in action.

Line 61 shows how to combine a class style loan_L1 with inline style. You can also further refine the CSS element displays of individual areas within a Web page with inline styles as shown in lines 7077. A screen shot of ex02-05.htm is shown in Fig. 2.5.

Figure 2.5. ex02-05.htm

graphics/02fig05.jpg


    Table of Contents

    		Previous Next