Unit 2 - 1

UNIT 2:
USE CSS TECHNIQUES TO CREATE WEB

PAGES
Presentation by: Weldetekle W.

Styling elements of a web page by using CSS techniques
CSS Selectors
A CSS selector selects the HTML element(s) you want to style.
CSS selectors are used to "find" (or select) the HTML elements you want
to style.
We can divide CSS selectors into five categories:
1.Simple selectors (select elements based on name, id, class)
2. Combinator selectors (select elements based on a specific relationship
between them)
3. Pseudo-class selectors (select elements based on a certain state)
4. Pseudo-elements selectors (select and style a part of an element)
5. Attribute selectors (select elements based on an attribute or attribute value)
• <!DOCTYPE html>
The CSS element Selector • <html>
• <head>
• The element selector selects HTML • <style>
elements based on the element • p{
name. • text-align: center;
• Example • color: red;
• all <p> elements on the page will be • }
center-aligned, with a red text color: • </style>
• </head>
p{ • <body>
text-align: center; • <p>Every paragraph will be affected by the
style.</p>
color: red;
• <p id="para1">Me too!</p>
} • <p>And me!</p>
• </body>
• </html>
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.
• Note: An id name cannot start with a number!
• <!DOCTYPE html>
• <html>
Cont… • <head>
• <style>
• #para1 {
• Example:
• text-align: center;
#para1 { • color: red;
text-align: center; • }
• </style>
color: red;
• </head>
} • <body>
• <p id="para1">Hello World!</p>

• The CSS rule above will be
• <p>This paragraph is not affected by the
applied to the HTML element style.</p>
with id="para1":
• </body>
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.
• Example:
.center {
text-align: center;
color: red;
}
• In this example all HTML elements with class="center" will be red and
center-aligned
• <!DOCTYPE html>
Cont… • <html>
• <head>
• <style>
• .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>
• <!DOCTYPE html>
Cont… • <html>
• You can also specify that only • <head>
• <style>
specific HTML elements
• p.center {
should be affected by a class. • text-align: center;
• Example • color: red;
p.center { • }
• </style>
text-align: center; • </head>
color: red; • <body>
}
• <h1 class="center">This heading will not be
• In this example only <p> affected</h1>
elements with class="center" • <p class="center">This paragraph will be red and
center-aligned.</p>
will be red and center-aligned
• </body>
• <!DOCTYPE html>
• <html>
Cont…
• <head>
• HTML elements can also refer to • <style>
more than one class. • p.center {
• Example: • color: red;
• In this example the <p> element • }
will be styled according to • p.large {
• font-size: 300%;
class="center" and to class="large": • }
<p class="center large">This • </style>
paragraph refers to two classes.</p> • </head>
• <body>
• Try it Yourself • <h1 class="center">This heading will not be
affected</h1>
Note: A class name cannot start with • <p class="center">This paragraph will be red and center-
aligned.</p>
a number! • <p class="center large">This paragraph will be red,
center-aligned, and in a large font-size.</p>
• </body>
• <!DOCTYPE html>
The CSS Universal Selector • <html>
• <head>
• The universal selector (*) selects • <style>
all HTML elements on the page. • *{
• Example
• color: blue;
• The CSS rule below will affect • }
every HTML element on the • </style>
page: • </head>
*{ • <body>
• <h1>Hello world!</h1>
text-align: center; • <p>Every element on the page will be affected by the
color: blue; style.</p>
• <p id="para1">Me too!</p>
}
• <p>And me!</p>
• </body>
• </html
The CSS Grouping Selector
• The grouping selector selects all the HTML • It will be better to group the
elements with the same style definitions.
• Look at the following CSS code (the h1, h2,
selectors, to minimize the
and p elements have the same style definitions): code.
h1 {
text-align: center;
• To group selectors, separate
color: red; each selector with a comma.
}
h2 {
• Example
text-align: center; • In this example we have
color: red;
}
grouped the selectors from
p{ the code above:
text-align: center;
color: red;
}
• <!DOCTYPE html>
Cont… • <html>
• <head>
• <style>
h1,h2,p { •
•
h1, h2, p {
text-align: center;
text-align: center; • color: red;
• }
color: red; • </style>
} • </head>
• <body>
• <h1>Hello World!</h1>
• <h2>Smaller heading!</h2>
• <p>This is a paragraph.</p>
• </body>
• </html>
All CSS Simple Selectors
Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.class p.intro Selects only <p> elements with class="intro"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements
• <!DOCTYPE html>
• <html>
CSS #id Selector • <head>

• <style>
• Example • #firstname {
• background-color: yellow;
• Style the element with • }
id="firstname": • </style>
• </head>
• <body>
#firstname {
• <h1>Demo of the #id selector</h1>
background-color: yellow; • <div class="intro">
} • <p id="firstname">My name is Donald.</p>
• <p id="hometown">I live in Duckburg.</p>
• </div>
• <p>My best friend is Mickey.</p>
• </body>
• </html>
• <!DOCTYPE html>
CSS .class Selector • <html>
• <head>
• Example • <style>
• .intro {
• Select and style all elements
• background-color: yellow;
with class="intro": • }
• </style>
• </head>
.intro {
• <body>
background-color: yellow; • <h1>Demo of the .class selector</h1>
} • <div class="intro">
• <p>My name is Donald.</p>
• <p>I live in Duckburg.</p>
• </div>
• <p class="intro">My best friend is Mickey.</p>
• </body>
• <!DOCTYPE html>
CSS element .class Selector • <html>
• <head>
• <style>
• Example
• p.intro {
• Select and style every <p> • background-color: yellow;
element with the class "intro": • }
• </style>
• </head>
p.intro { • <body>
background-color: yellow; • <h1>Demo of the element.class selector</h1>
• <p>My name is Donald.</p>
• </div>
• <p class="intro">My best friend is Mickey.</p>
• </body>
• <!DOCTYPE html>
• <html>
CSS * Selector • <head>
• <style>
• Example • *{
• Select all elements, and set their • background-color: yellow;
background color to yellow: • }
• </style>
• </head>
*{ • <body>
background-color: yellow; • <h1>Demo of the * selector</h1>
• <p id="firstname">My name is Donald.</p>
• </div>
• </body>
• <!DOCTYPE html>
•
CSS element Selector •
<html>
<head>
• <style>
• p{
• Example • background-color: yellow;
• Select and style all <p> • }
elements: • </style>
• </head>
• <body>
p{ • <h1>Demo of the element selector</h1>
background-color: yellow; • <div>
} • <p id="firstname">My name is Donald.</p>
• </div>
• </body>
• <!DOCTYPE html>
• <html>
• <head>
CSS element, element Selector
• <style>
• h2, p {
• Example • background-color: yellow;
• }
• Select and style all <h2> • </style>
elements AND all <p> elements: • </head>
• <body>
• <h1>Demo of the element, element selector</h1>
h2, p {
• <h2>Welcome to My Homepage</h2>
background-color: yellow; • <div>
} • <p>My name is Donald.</p>
• </div>
• </body>
CSS Types
How to add CSS

• When a browser reads a style sheet, it will format the HTML
document according to the information in the style sheet.
There are three types of cascading style sheets:
1. External CSS
2. Internal CSS
3. Inline CSS
1. External CSS
• With an external style sheet, you can change the look of an entire
website by changing just one file!
• Each HTML page must include a reference to the external style sheet
file inside the <link> element, inside the head section.
• <!DOCTYPE html>
Cont…
• <html>
• Example • <head>
External styles are • <link rel="stylesheet" href="mystyle.css">
 defined within the <link> element, • </head>
 inside the <head> section of an • <body>
HTML page
• <h1>This is a heading</h1>
• </body>
• </html>
Cont…
An external style sheet can be written in any text editor, and
must be saved with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
"mystyle.css“
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Cont…
• Note: Do not add a space between the property value (20) and the unit
(px):
• Incorrect (space): margin-left: 20 px;
• Correct (no space): margin-left: 20px;
2. Internal CSS
An internal style sheet may be used if one single HTML page has a
unique style.
The internal style is
defined inside the <style> element,
inside the head section.
Example
• <!DOCTYPE html>
2. Internal CSS • <html>
• <head>
• <style>
• body {
• background-color: linen;
• }
• h1 {
• color: maroon;
• margin-left: 40px;
• }
• </style>
• </head>
• <body>
• <h1>This is a heading</h1>
• </body>
3. Inline CSS
• An inline style may be used to apply a unique style for a single

element.
• To use inline styles, add the style attribute to the relevant element.
• The style attribute can contain any CSS property.
• Inline styles are defined within the "style" attribute of the relevant
element
Cont…
• <!DOCTYPE html>
• <html>
• <body>
• <h1 style="color:blue;text-align:center;">This is a heading</h1>
• <p style="color:red;">This is a paragraph.</p>
• </body>
• </html>
• Tip: An inline style loses many of the advantages of a style sheet (by
mixing content with presentation).
Multiple Style Sheets
If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be used.
Assume that an external style sheet has the following style for the <h1>
element:
h1 {
color: navy;
}
• Then, assume that an internal style sheet also has the following style for
the <h1> element:
h1 {
color: orange;
}
Cont…
If the internal style is defined after the link to the external style
sheet, the <h1> elements will be "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Cont…
• However, if the internal style is defined before the link to the external
style sheet, the <h1> elements will be "navy":
• <head>
• <style>
• h1 {
• color: orange;
• }
• </style>
• <link rel="stylesheet" type="text/css" href="mystyle.css">
• </head>
Cascading Order
What style will be used when there is more than one style specified
for an HTML element?
All the styles in a page will "cascade" into a new "virtual" style sheet
by the following rules, where number one has the highest priority:
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
• So, an inline style has the highest priority, and will override external
and internal styles and browser defaults.
HTML and CSS Comments
You can add comments to your HTML source by using the 
syntax
CSS Comments
• CSS comments are not displayed in the browser, but they can
help document your source code.
• CSS 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.
• A CSS comment is placed inside the <style> element, and
starts with /* and ends with */:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p{
• color: red; /* Set text color to red */
• }
• </style>
• </head>
• <body>
• <h2>My Heading</h2>
• 
• <p>Hello World!</p>
• <p>This paragraph is styled with CSS.</p>
• <p>CSS comments are not shown in the output.</p>
• </body>
• </html>
• /* This is a single-line comment */
p{
Cont… color: red;
}
• You can add comments wherever you want in the code:
• Example
p{
color: red; /* Set text color to red */
}
• Comments can also span multiple lines:
• Example
/* This is
a multi-line
comment */
p{
color: red;
Thank you
?

Unit 2 - 1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 2 - 1

Uploaded by

Copyright:

Available Formats

UNIT 2:

USE CSS TECHNIQUES TO CREATE WEB

Presentation by: Weldetekle W.

• The id selector uses the id attribute of an HTML element to select a

• <p id="para1">Hello World!</p>

#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

element.class p.intro Selects only <p> elements with class="intro"

* * Selects all elements

element p Selects all <p> elements

CSS #id Selector • <head>

How to add CSS

• An inline style may be used to apply a unique style for a single

You might also like