What is CSS ?
CSS stands for cascading style sheet.
Styles define how to display HTML element.
Before you continue you should understanding of HTML / XHTML .
A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. As always you use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on…) are accomplished within a CSS.
At this point you have some choices of how to use the CSS, either internally or externally.
Internal Style Sheet.
First we will explore the internal method. This way you are simply placing the CSS code within the <head></head> tags of each (X)HTML file you want to style with the CSS.
With this method each (X)HTML file contains the CSS code needed to style the page. Meaning that any changes you want to make to one page, will have to be made to all. This method can be good if you need to style only one page, or if you want different pages to have varying styles.
External Style Sheet.
Next we will explore the external method. An external CSS file can be created with any text or HTML editor such as “Notepad” or “Dreamweaver”. A CSS file contains no (X)HTML, only CSS. You simply save it with the .css file extension. You can link to the file externally by placing one of the following links in the head section of every (X)HTML file you want to style with the CSS file.
p {color:red;text-align:center;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
CSS Syntax
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:
p {color:red;text-align:center;}
click to try
CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":
click to try
Do NOT start an ID name with a number!
The class Selector
The class selector is used to specify a style for a group of elements. Unlike
the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:
click to try
You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned:
click to try
Do NOT start an ID name with a number!
Background Color
The background-color property specifies the background color of an element.
The background color of a page is defined in the body selector:
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
click to try
Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
body {background-image:url('paper.gif');}
click to try
Background Image - Set position and no-repeat
Showing the image only once is specified by the background-repeat property:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
click to try
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- a color name - like "red"
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
click to try
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
p.date {text-align:right;}
p.main {text-align:justify;}
click to try
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
click to try
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
p{font-family:"Times New Roman", Times, serif;}
click to try
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
- normal - The text is shown normally
- italic - The text is shown in italics
- oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
click to try
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
- Sets the text to a specified size
- Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
- Absolute size is useful when the physical size of the output is known
Relative size:
- Sets the size relative to surrounding elements
- Allows a user to change the text size in browsers
