CSS Introduction
Jakob Jenkov |
This text is a brief introduction to CSS. I have full CSS tutorial too.
Cascading Style Sheets (CSS) is a mechanism used to style your HTML documents. Styling means setting how the text and HTML elements should look. Styling includes decisions such as whether to display a border around an HTML element (e.g. a table), displaying text in bold, selecting the font to display text in etc.
Cascading style sheets are typically separated from the HTML document itself. Separating the looks of an HTML document from the text and HTML elements itself has a few advantages:
- Makes the HTML code easier to read and maintain, since styling is not mixed with content.
- Styles can be set in one, central place.
- Styles can be applied to multiple HTML elements with a single style declaration.
- Styles can be isolated in a CSS file, and reused across multiple HTML documents.
There are three ways to include CSS styles in an HTML document:
- In each HTML element.
- In a separate
styleelement. - In a separate CSS file.
This text will show all three methods. This text will not cover CSS in all its details, but merely provide an introduction to CSS. You will need to consult other resources (books or websites) to learn more about CSS.
CSS Properties
CSS style settings consists of a key - value pair. The key is the name of a CSS property to set a value (style) for. Here is a simple example:
font-family : arial;
This CSS property is named font-family and its value (style) is arial.
The property is ended with a semicolon.
CSS in HTML Elements
CSS can be included in any HTML element using the style attribute. Here is an example:
<p style="font-family: arial;"> </p>
This example sets the font family of the p element to the font family named arial.
It is possible to set multiple CSS properties inside the style attribute value. You do so by
writing the second property after semicolon ending the first CSS property. Here is an example:
<p style="font-family: arial; font-size: 12px;"> </p>
This example sets both the font family and font size used for the text inside the p
element.
CSS in a style Element
By gathering the style properties inside a style element, you can set styles to be applied to all elements of a certain type.
Here is an example:
<style>
p {
font-family: arial;
font-size : 12px;
}
</style>
This example sets the font family and font size for all p elements in the HTML document.
This way you only need to set the style for the p elements in your page once.
By exchanging
the p with the name of other elements, e.g. b or h1, h2
etc. you can set styles for other HTML elements too. For instance:
<style>
p {
font-family: arial;
font-size : 12px;
}
h1 {
font-familly: arial;
font-size : 18px;
}
</style>
This example sets CSS properties for both p and h1 elements.
CSS in Style Sheet Files
Instead of putting the CSS properties inside a style element, you can put them
inside a CSS style sheet file. The style sheet file should not contain the style element,
by the way. Only the style definitions themselves.
By putting the style definitions in their own style sheet file you don't have to redefine the CSS styles for each HTML document. You can just reference the CSS file from the HTML document. Here is how such a reference looks:
<link rel="stylesheet" type="text/css" href="/stylesheet.jsp" >
This example references a CSS style sheet file named stylesheet.jsp found at the root
of the website (/stylesheet.jsp).
This link element should be placed inside the head element
of the HTML document. Here is how that looks:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/stylesheet.jsp" >
</head>
<body>
</body>
</html>
| Tweet | |
Jakob Jenkov | |
