Things you want to know about websites

 

Working with CSS

CSS stands for Cascading Style Sheet. Style sheets are a great way to format the layout and appearance of a webpage. They give much more flexibility and control in designing webpages.

To use a style sheet with our document we have to include it in our document or say it other way, we have to tell the browser to use the sheet for formatting.

There are generally three methods to include styles sheet information in your Html document.

  1. Use an external style sheet.
  2. Use an internal or header style sheet.
  3. Use an inline style sheet.

Using and External Style Sheet

In this method all the style sheet information is included in an external file. This is quite useful when you have a website with many pages that share the same style sheet file. So, changing the contents of a single CSS file will change the appearance of the entire site.

To include an external style sheet file we use the <link> element. The <link> tag is placed inside the <head> element.

Example

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

Here style.css is the external CSS file.

Using an Internal or header Style Sheet

In this method the style sheet information is added inside an html document. The style sheet can only be applied to the same document only.

To include an internal style sheet we use the <style> element. The <style> tag is placed inside the <head> element.

Example

<head>
<style type="text/css">
p {
   font-size:13px;
   color:green;
  }
</style>
</head>

Using Inline Style Sheet

Inline style sheet is applied individually to an element. The style sheet information only affects the element in which it is defined.

To include inline style sheet information we use style attribute.

Example

<p style="font-size:12px;color:green">
This is paragraph
</p>

Result,

This is paragraph


Bookmark or Add to Favourites

Next:

Html-Span and Div

Related:

CSS Layouts

Link to this page

Copy and paste the following code in an html document to link to this page,