Adding CSS

Adding CSS
 
Adding CSS
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Style sheets can be added to a Web page in three different ways, which vary in their properties.

Tables of related styles

This method is the most easy one for setting styles and rules to be applied for the site. Styles are stored in a separate file that can be used for any number of web pages. To link a table of related styles use the tag <LINK> in the page header (Example 1).

Example 1. Linking tables of related styles.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="mysite.css" />
    or
    <link rel="stylesheet" type="text/css" href="http://www.mysite.com/main.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

The path to the file with the styles can be either relative or absolute, as shown in this example.

Advantages of this method

  1. Only one file with styles is used for any number of web pages, it is also possible to use the file with other sites.
  2. You can change the style sheet without having to modify the web pages.
  3. When you change the style in a single file, the style is automatically applied to all the pages that have it. Very convenient. Respectively if you specify the font size in one place, it changes in hundred or more pages on our website.
  4. Before the page boots the file with the styles is placed into cache on the local computer, separate from the web pages, so the upload of the site is a bit faster.

Global style tables

The style is set in the document, and is usually located in the header of the web page. This method is less flexible than the previous one, but also allows you to put all the styles in one place. In this case, right in the body of the document. Style is set with the <STYLE> tag (Example 2).

Example 2. Using global style tables.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      h1 {
        font-size: 120%; /* Font size */
        font-family: Verdana, Arial, Helvetica, sans-serif; /* Forn-family */
        color: #336; /* Text color */
      }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

This example shows the change in the header style <H1>. On the Web page just specify this tag and the styles will be added automatically.

Internal styles

Internal styles are essentially an extension for a single type tag that is used on a web page. To set the style use the parameter style. Its attributes are specified using the style sheet language (Example 3).

Example 3. Using internal styles.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>
    <h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336;">Hello, world!</h1>
  </body>
</html>

It is recommended to use internal styles for individual tags or not use them at all, since changing too many elements becomes problematic. Internal styles don't go together with the idea of a structured document (when the content and design are separated).

All of these methods can be used either separately or in combinations with each other. In any case, you must keep in mind their hierarchy. First use internal styles, then table of global styles and only then the table of related styles. Example 4, shows two methods of adding style sheets applied simultaneously.

Example 4. Combination of different methods of applying styles.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      h1 { 
        font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; 
      }
    </style>
  </head>
  <body>
    <h1 style="font-size: 36px; font-family: Times, serif; color: red;">Hello, world!</h1>
    <h1>Hello, world!</h1>
  </body>
</html>

In this example, the first header is set in red with font size of 36 pixels, and the next in green and in different font-family.


 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation