Lecture 4 web design khalidah ali ahmed
1
The CSS Selector
Example of css
In this example all <p> elements will be center-aligned, with a red text color:
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
output :
Hello World!
These paragraphs are styled with CSS.
Example Explained
P is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value.
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is 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.
Lecture 4 web design khalidah ali ahmed
2
Example
The CSS rule below will be applied to the HTML element with id="para1":
<html>
<head>
<style>
#para1 {
text-align: center;
color: red; }
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Output:
Hello World!
This paragraph is not affected by the style.
2-The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the
class name.
<html>
<head>
<style>
.center {
text-align: center;
color: red; }
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Output:
Red and center-aligned heading
Red and center-aligned paragraph.
Lecture 4 web design khalidah ali ahmed
3
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:
<html>
<head>
<style>
p.center {
text-align: center;
color: red;}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Output:
This heading will not be affected
This paragraph will be red and center-aligned.
HTML elements can also refer to more than one class.
Example:
<html>
<head>
<style>
p.center {
text-align: center;
color: red; }
p.large {
font-size: 300%; }
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Lecture 4 web design khalidah ali ahmed
4
Output:
This heading will not be affected
This paragraph will be red and center-aligned.
This paragraph will be red,
center-aligned,
and in a large font-size.
3-The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example:
The CSS rule below will affect every HTML element on the page:
<html>
<head>
<style>
* {
text-align: center;
color: blue;}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
Hello world!
Every element on the page will be affected by the style.
Me too!
Lecture 4 web design khalidah ali ahmed
5
And me!
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
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:
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Hello World!
Smaller heading!
This is a paragraph.
