Scribd
Upload
30 views36 pages

Unit 2 - 1

The document summarizes different CSS selectors that can be used to style elements on a web page, including element selectors, id selectors, class selectors, and grouping selectors. CSS selectors allow targeting specific HTML elements to apply styles. The universal selector selects all elements, while id and class selectors target elements with matching id or class attributes. Grouping selectors improves code organization by applying the same styles to multiple selectors in one rule.

Uploaded by

weldetekle welday
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
30 views36 pages

Unit 2 - 1

The document summarizes different CSS selectors that can be used to style elements on a web page, including element selectors, id selectors, class selectors, and grouping selectors. CSS selectors allow targeting specific HTML elements to apply styles. The universal selector selects all elements, while id and class selectors target elements with matching id or class attributes. Grouping selectors improves code organization by applying the same styles to multiple selectors in one rule.

Uploaded by

weldetekle welday
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36

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 {
• 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>
• <!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 {
• text-align: 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. • *{
• text-align: center;
• 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>My best friend is Mickey.</p>
• <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>
} • <div class="intro">
• <p>My name is Donald.</p>
• <p>I live in Duckburg.</p>
• </div>
• <p>My best friend is Mickey.</p>
• <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>
} • <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>
• <!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>
• <p id="hometown">I live in Duckburg.</p>
• </div>
• <p>My best friend is Mickey.</p>
• </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>
• <p>I live in Duckburg.</p>
• </div>
• <p>My best friend is Mickey.</p>
• </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>
• <p>This is a paragraph.</p>
• </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>
• <p>This is a paragraph.</p>
• </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>
• <!-- These paragraphs will be red -->
• <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
?

You might also like