Html #part3
CSS Tutorial
CSS is a stylesheet language that describes the presentation of an HTML (or XML) document.
Example
body
{
background-color: #d0f5fs;
}
h1
{
color: orange;
text-align: center;
}
p
{
font-family: "Times New Roman";
font-size: 30px;
}
What is CSS?
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen,
paper, or in other media.
- CSS also saves lot of work.
CSS Syntax
A CSS rule set consists of a selector and a declaration block:
H1 {color:blue; font-size:12px;}
Selector : H1
Declaration: Color:blue, font-size:12px
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by
semicolons.
Each declaration includes a property name and a value, separated by a colon.
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
- External style sheet
- Internal style sheet
- Inline style
External Style Sheet
With an
external style sheet, you can change the look of an entire website by changing
just one file!
Each page must include a reference to the external style sheet file inside the <link>
element. The <link> element goes inside the head section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The file should not contain any html tags.
The style sheet file must be saved with a .css extension.
An example of a style sheet file called "myStyle.css", is shown below:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the head section
of an HTML page:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles
An inline style may be used to apply a unique style for a single element.
An inline style loses many of the advantages of a style sheet (by mixing
content with presentation). Use this method sparingly!
To use inline styles, add the style attribute to the relevant tag. The
style attribute can contain any CSS property. The example shows how to change
the color and the left margin of a <h1> element:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
include this code in html file itself.
