10 - HTML-Styling a page

We can present our web page in a very pleasing manner or like however we imagine using CSS. We have a beautiful feature called CSS in HTML to style our web pages.

CSS is the medium through which we can inform the browser how we want our text or content to be displayed.

CSS is Cascading style sheet. Since the technologies are always evolving, there have and will be different versions of CSS but we will deal with only what is relevant today. We have CSS1, CSS2 and CSS3.CSS4 is the current latest specification. CSS simplifies the process of applying styles.

Before jumping to the actual topic let us see what we can actually do if we learn CSS,

We can format the,

· Color of the text,

· Style of the fonts

· Spacing between paragraphs

· Formatting columns & margins

· Background images

· Background colors

CSS can be added to HTML code in 3 ways,

1. Inline

2. Internal

3. External

 

Inline Styling

Using the style attribute we can apply the inline styling to a tag. The applied styling is only applicable to the tag on which it is used.

The general syntax is,

      <element style= "…style rules…">content</element>

For example,

<html>
  <head>
    <title>
       Inline styling
    </title>
  </head>
  <body>
     <p style= "color: green;">This text is styled using Inline styles</p>
  </body>
</html>

 

The output of the above program would be,

Inline styles affect the stand alone property of HTML. In the above example, if we want to change the text to another color, we have to go to every line & edit the code. This consumes a lot of time & effort. So, avoid inline styles wherever possible.

Internal Styling

This method of styling has the style tag in the head section. It is also called embedded CSS. Rules defined within style tag would be applicable to the whole document wherever applicable.

The general syntax is,

<html>
  <head>
    <style>
      …Style rules…
    </style>
  </head>
  <body>
     …..
  </body>
</html>

Example for inline/embedded styling

<html>
  <head>
    <style>
     h1{
       color:blue;
       }
     p{
       color:red;
      }
    </style>
  </head>
  <body>
    <h1>Heading in blue</h1>
    <p>Paragraph in red</p>  
  </body>
</html>

 

The output of the above program would be,

 

When we use the above code, all the paragraphs in the page will be colored in red and all h1 headings in blue color.

Internal style sheets are preferable over Inline style sheets.

External Styling

This is the most sought method for applying styles to web pages.

It is an ideal and ultimate choice when we want to style several web pages. The style rules are supplied in a separate file called CSS file.

It is created using notepad and saved with .css extension. This CSS file exclusively contains the style rules we wish to apply to our web site or a group of web pages.

In external style sheet, when we want to change some font type or color or anything like that, we can just edit it in the CSS file and the change gets applied wherever it is applicable. So we can change the entire look of the web site by just making change in one file. Each web page is linked to the style sheet using link tag. The link tag is included in the head element.

The general syntax for External style sheets is,

<html>
  <head>
    <link rel=”stylesheet” type=”text/css” href= ”name of CSS file”>
  </head>
  <body>
    ….
  </body>
</html>

Example for External style sheets,

Include the following code in a notepad and save it with the name style.css

/* style.css -- A simple style sheet */
body
{
  background-color : yellow;
}
h2
{
  text-align:center;
  background-color:green;
}
p
{
  font-family : arial;
  color : blue;
  font-size :20px;
}

Code to be included in html file,

 

<html>
  <head>
    <title> Cascading external style sheet </title>
    <link type=”text/css” href=”style.css”>
  </head>
  <body>
    <h2>Cascading style sheet</h2>
    <p> This page is styled with external style sheet.</p>
  </body>
</html>

The output of the above program would be,

 

 

If you are not getting the desired output, place the absolute path of css file in href. Open the folder in which you have css file and copy the path you see in the file browser, and include it in href. For example,

C:\ProgramFiles\HTML\style.css

This way you could style your web pages using Cascading style sheets.

Advantages of CSS:

· Easy to maintain

To update a change simply change the style file and the elements in all web

Pages will be updated automatically.

· Page loads Faster

Since the style rules are written in another file, the page loads faster. Less code means more speed.

· Write once and use many times

You can use the same style sheets for any number of web pages. This saves a lot of time.

· Better look than HTML

The CSS has wide variety of attributes than HTML. So, we have many options to style our elements.

· Compatible with future browsers

Use CSS to make your code compatible with the future browsers.

Though it has many advantages the only disadvantage is the browser compatibility, all the features of CSS are not supported in some web browsers.

Difference between HTML4.01 and HTML5:

HTML4 supports many tags and attributes.

The <font>, <strike>, <center> tags and

the attributes color and bgcolor are not supported in HTML5

Like us on Facebook