CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:
The most common way to add styling, is to keep CSS syntax in separate CSS files. But, in this tutorial, we use internal styling, because it is easier to demonstrate, and easier for you to try it yourself.
You can learn much more about CSS in our CSS Tutorial. |
CSS styling has the following syntax:
The element is an HTML element name. The property is a CSS property. The value is a CSS value.
Multiple styles are separated with semicolon.
Inline styling is useful for applying a unique style to a single HTML element:
Inline styling uses the style attribute.
This inline styling changes the text color of a single heading:
An internal style sheet can be used to define a common style for all HTML elements on a page.
Internal styling is defined in the <head> section of an HTML page, using a <style> element:
External style sheet are ideal when the style is applied to many pages.
With external style sheets, you can change the look of an entire site by changing one file.
External styles are defined in the <head> section of an HTML page, in the <link> element:
The CSS property color defines the text color to be used for an HTML element.
The CSS property font-family defines the font to be used for an HTML element.
The CSS property font-size defines the text size to be used for an HTML element.
The <font> tag, supported in older versions of HTML, is not valid in HTML5. |
Every visible HTML element has a box around it, even if you cannot see it.
The CSS border property defines a visible border around an HTML element:
The CSS padding property defines a padding (space) inside the border:
The CSS margin property defines a margin (space) outside the border:
The CSS examples above use px to define sizes in pixels (screen pixels). |
All the examples above use CSS to style HTML elements in a general way.
The CSS styles define an equal style for all equal elements.
To define a special style for a special element, first add an id attribute to the element:
then define a different style for the (identified) element:
To define a style for a special type (class) of elements, add a class attribute to the element:
Now you can define a different style for this type (class) of element:
Use id to address single elements. Use class to address groups of elements. |
In older HTML versions, several tags and attributes were used to style documents.
These tags are not supported in HTML5.
Avoid using the elements: <font>, <center> and <strike>.
Avoid using the attributes: color and bgcolor.
Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »
Tag | Description |
---|---|
<style> | Defines style information for a document |
<link> | Defines a link between a document and an external resource |