N341  Cascading Style Sheets

 Modified: 

Table of
Contents

  

Other CSS Resources


 

CSS Syntax

Casading Style Sheet generally extends style to an HTML tag.

<b>bold</b>

produces bold but:

<b style="color: red">bold</b> 

adds style to produce bold.

Example

To make bold text red and italic text green

<head>
</head>
<body>
This <b style="color: red; font-size:35px">Hello</b> <i style="color: green">World</i>! is red and green.
</body>

This Hello World! is red and green
   

Example

An HTML file with CSS to modify all uses of the B and I tags to make bold text in the file red and italic text green:

<head>
   <style> 
       b {color: red; font-size:35px} 
       i {color: green}
   </style>
</head>
<body>
This <b>Hello</b> <i>World</i>! is red and green.
</body>

This Hello World! is red and green
   

Example

An HTML file with CSS to modify only certain bold text red and italic text green.

Define a style class headline for bold and green for italic.

<head>
   <style>
      B.headline {color:red; font-size:22px; font-family:arial}
      I.green {color:green; font-size:34px}
   </style>
</head>

<body>
Normal <b>bold</b> and <i>italic</i><br>
Headline <b class="headline">bold</b> and green style <i class="green">italic</i>
<p>Regular text</p>
<p>More regular text</p>
</body>

Normal bold and italic
Headline bold and green style italic
Regular text
More regular text.

 

Exercise 0
CSS Syntax
  1. Copy the last example above, paste into FrontPage as code.
  2. Preview to make sure that it works.
  3. Modify to make the P tag style of the "Regular text" to be blue and font size of 40. Preview.
  4. Modify the P tag to make a BigBlue class and apply to the "More regular text" only. Preview.

 

How to Insert a Style Sheet
 

External Style Sheet

An external style sheet is useful when the style is applied to many pages to develop a standard look-and-feel for a site. With an external style sheet included into each site page, you can change the look of an entire Web site by changing the one style sheet file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: 

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

<body>
Normal <b>bold</b> and <i>italic</i><br>
Headline <b class="headline">bold</b> and green style <i class="green">italic</i>
<p>Regular text</p>
<p>More regular text</p>
</body>

The browser will read the style definitions from the file mystyle.css, and format the document according to it. An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is: 

mystyle.css 

B.headline {color:red; font-size:22px; font-family:arial}
I.green {color:green; font-size:34px}

Normal bold and italic
Headline bold and green style italic
Regular text
More regular text.

 

Internal Style Sheet

An internal style sheet has style definitions embedded within the HTML file which we have already seen. An HTML file with CSS to modify only certain bold text red and italic text green:

<head>
   <style>
      B.headline {color:red; font-size:22px; font-family:arial}
      I.green {color:green; font-size:34px}
   </style>
</head>

<body>
Normal <b>bold</b> and <i>italic</i><br>
Headline <b class="headline">bold</b> and green style <i class="green">italic</i>
<p>Regular text</p>
<p>More regular text</p>
</body>

Normal bold and italic
Headline bold and green style italic
Regular text
More regular text.

 

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.

Inline styles use the style attribute in the relevant tag. The style attribute can contain any CSS property.

The example shows how to change the color for specific text: 

This <b style="color: red">Hello</b> <i style="color: green">World</i>! is red and green.

This Hello World! is red and green

 

Multiple Style Sheets

Inheritance

Child properties are more specific than parent properties for the same selector. 

For example, a parent or external style sheet has these properties for the h3 selector:

h3 { text-align: left; font-size: 8pt; color: red}

And a child or internal style sheet has these properties for the h3 selector:

h3 { text-align: right; font-size: 20pt}

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:

h3 { text-align: right; font-size: 20pt; color: red }

The color: red is inherited from the external style sheet and the text-align: right and the font-size: 20pt  is replaced by the internal style sheet.

 

Exercise 1
How to Insert
a Style Sheet

Divide the previous exercise into an external style sheet file and an HTML file that uses the class definitions.

  • Cut out the CSS style definitions from the previous exercise.
  • Create a new file in FrontPage and paste in the style definitions as HTML. Save as mystyle.css.
  • In the remaining file, define a link to the style definitions as:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

  • Preview. The results should be identical to the previous exercise.

 

General CSS

class

 The class element allows defining styles that are not associated with any tag. For example:
<head>
   <style>
      .Big {font-size:40px}
      .Red {color:red}
   </style>
</head>

<body>
<p class="Big">Big text</p>
<span class="Big Red">Big Red text</span>
</body>

Big text
Big Red text

   

<span>
  • The <span> tag is used to apply CSS style to a set of text, etc. that does not need a visible tag of <b>, <i>, etc. 
     
  • The following example changes the font size for all text enclosed by the span tag.
Normal <span style="font-size: 34px"> <b>bold</b> and <i>italic</i> </span>text.

Normal bold and italic text.

 

Positioning
 

Relative and Absolute

Text and images can be positioned over each other using positioning selection of absolute or relative. This offers an alternative to tables as a way of organizing the page.

  • Absolute positioning is placed from the top left corner of the screen.
     
  • The following example illustrates overlaying the following three objects.

Positioned Text
  • A high z-index defines an object that overlays a lower numbered z-index where 1 is the background.
<img src = "css_3.gif" style = "position: absolute; top: 0px;  left: 0px;   z-index: 1" />
<img src = "css_2.gif" style = "position: absolute; top: 25px; left: 100px; z-index: 2" />
<p style = "position: absolute; top: 50px; left: 50px; font-size: 20pt; z-index: 3;">
Positioned Text
</p>

Positioned Text

  • Relative positioning is placed from the current position, more difficult to do but maintains the indentation, etc. of the page.
     
  • The example above actually used the following relative positioning, otherwise it would have appeared at the top of the page.
<img src = "css_3.gif" style = "position: relative; z-index: 1"
                                 width="250" height="250" />
<img src = "css_2.gif" style = "position: relative; top: -50; left: -200; z-index: 2" />
<p style = "position: relative; top: -200px; z-index: 3; font-size: 20pt">
Positioned Text</p>

 

Exercise 2
Absolute
Positioning

The digits at the end of the exercise have been positioned using tables. Add absolute positioning to the image tag of each to place on the a page instead of using tables. The result should look about the same. 

  • Create a new FrontPage page, copy and paste the following HTML.
  • In IE, right click on each digit and Save Target As... each digit to your W:\ drive.
  • Edit page to add absolute positioning and save to W:\
  • Test. You should be able to click the digits and appear in the text box.

The HTML for and form is:

<a href="" onClick="document.Code.display.value=document.Code.display.value+'0'; return false;">  
       <img src = "digit0.gif" style = "position: absolute; top: 50; left: 200; z-index: 1"/>  </a>
<form name=Code>
     <input type=text name=display value="">
</form>
Enter Code


Enter Code

 

Exercise 3
Relative
Positioning

Repeat Exercise 2 using relative positioning.