Chapter 3
Styling HTML with CSS
CSS was introduced together with HTML 4, to provide a better way to style HTML elements.
Styles were added to HTML 4.0 to solve a problem What is CSS?
CSS stands for Cascading Style Sheets
CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.
CSS is used to control the style of a web document in a simple and easy way.
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations
in display for different devices and screen sizes.
CSS Syntax and Selectors CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
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 CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded
by curly braces.
Example
In this example all <p> elements will be center-aligned, with a red text color:
p { color: red;//declaration text-align:
center;
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name,
id, class, attribute, and more.
The element Selector
The element selector selects elements based on the element name.
Example
You can select all <p> elements on a page like this (here, all <p> elements will be
centeraligned, with a red text color):
p { text-align:
center; color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
Example
The style rule below will be applied to the HTML element with id="para1":
#para1 { text-
align: center;
color: red;
}
Note: An id name cannot start with a number!
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name
of the class.
Example
In this example all HTML elements with class="center" will be red and center-aligned:
.center { text-align: center; color: red; }
You can also specify that only specific HTML elements should be affected by a class.
Example
In this example only <p> elements with class="center" will be center-aligned:
p.center { text-
align: center;
color: red;
}
HTML elements can also refer to more than one class.
Example
In this example the <p> element will be styled according to class="center" and to
class="large":
<p class="center large">This paragraph refers to two classes.</p> Note: A class name
cannot start with a number!
Grouping Selectors
If you have elements with the same style definitions, like this: h1 { text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from the code above:
h1, h2, p { text-align: center; color: red;
}
CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a
later date.
Comments are ignored by browsers.
Example
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
p{
color: red;
/* This is a single-line comment */ text-
align: center;
}
CSS can be added to HTML in the following ways:
Inline - using the style attribute in HTML elements
Internal - using the <style> element in the <head> section
External - using an external CSS file
The preferred way to add CSS to HTML is to put CSS syntax in separate CSS files.
Inline Styles
An inline style can be used if a unique style is to be applied to one single occurrence of
an element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain
any CSS property.
The example below shows how to change the text color and the left margin of a paragraph:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
HTML Style Example - Background Color
The background-color property defines the background color for an element: Example
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;"> This is a paragraph.</p>
</body>
</html>
Internal Style Sheet
An internal style sheet can be used if one single document has a unique style. Internal
styles are defined in the <head> section of an HTML page, by using the <style> tag, like
this:
<head> <style> body {background-
color:yellow;} p {color:blue;}
</style>
</head>
External Style Sheet
An external style sheet is ideal when the style is applied to many pages.
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
With an external style sheet, you can change the look of an entire Web site by changing
one file.
Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the
<head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Example mystle.css body {
background-color: lightblue;
} h1
{
color:
navy;
margi
n-
left:
20px;
}
