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.
- Use an external style sheet.
- Use an internal or header style sheet.
- 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
Next:
Related:
Link to this page
Copy and paste the following code in an html document to link to this page,