2. Introduction to CSS (Cascading Style Sheet)
2
What is CSS ?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages
all at once
• External style sheets are stored in CSS files
3. Introduction to CSS (Cascading Style Sheet)
3
Som advantages of CSS:
• Save time
• Load page faster
• Easy maintenance
• Superior(larger) styles to HTML
• Multiple device compatibility
• Global web standards
4. Introduction to CSS (Cascading Style Sheet)
4
Who Creates and Maintains CSS?
CSS is created and maintained through a group of people within the W3C
called the CSS Working Group. The CSS Working Group creates documents
called specifications. When a specification has been discussed and officially
ratified by W3C members, it becomes a recommendation.
NOTE: The World Wide Web Consortium, or W3C is a group that makes recommendations
about how the Internet works and how it should evolve.
5. CSS Syntax
5
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 property name and a value assigned to
property, separated by a colon.
6. In the following example all <p> elements will be center-aligned, with a red text
color:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body></html>
e1_first-ex>>
CSS Syntax
6
NOTE: To make the CSS code more readable,
you can put one declaration on each line.
7. • CSS selectors allow you to select and manipulate HTML elements.
• CSS selectors are used to "find" (or select) HTML elements based on their
id, class, type, attributes and more.
CSS Selectors
7
8. Element Selector:
â–Ş Element selector selects elements based on the element name. You can
select all <p> elements on a page like this: e2_element-selector>>
CSS Element Selector
8
<!DOCTYPE html><html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>All paragraphs will be affected </p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
9. id Selectors:
â–Ş The id selector uses the id attribute of an HTML element to select a specific
element.
â–Ş An id should be unique within a page, so the id selector is used if you want to
select a single, unique element.
▪ Use a hash character followed by the id element. “#id_name” LIKE:
#red {
text-align: center;
color: red;
}
CSS id Selector
9
NOTE: ID name must not start with a number!.
Also as pointed that id should be unique because java script is care about that..
10. id Selector example:
CSS id Selector
10
<!DOCTYPE html>
<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>
e3_id-selector>>
11. class Selectors:
â–Ş The class selector selects elements with a specific class attribute.
â–Ş Unlike id selector, classes are not unique, so the same class can be used for
multiple elements.
▪ Use a period character(.) followed by the class name. “.class_name” LIKE:
.center {
text-align: center;
color: red;
}
â–Ş You can also specify that only specific HTML elements should be affected by
a class. p.center {
text-align: center;
color: red;
}
CSS Class Selector
11NOTE: CLASS name must not start with a number!
12. class selector example: e4_class-selector>> e5_class-selector1>>
CSS Class Selector
12
<!DOCTYPE html><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>
<!DOCTYPE html><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>
13. CSS Universal Selector
13
The universal selector is an asterisk; it is like a wildcard and matches all element
types in the document.
*{CSS code..}
If you want a rule to apply to all elements, you can use this selector. Sometimes it
is used for default values that will apply to the whole of the document (such as a
font - family and font - size ) unless another more specific selector indicates that
an element should use different values for these same properties.
<!DOCTYPE html><html><head>
<style type="text/css">
*{ color: red; font-size: 25px;}
</style>
</head>
<body>
<p>this is a paragraph</p>
<span>this is a span</span>
<h1>this is heading</h1>
</body></html>
14. CSS Attribute Selector
14
Attribute Selector:
It is possible to style HTML elements that have specific attributes or attribute
values.
[attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.
selector[attribute] { CSS code..}
[attribute="value"] Selector
The [attribute="value"] selector is used to select elements with a specified
attribute and value.
selector[attribute=“value”] { CSS code..}
17. CSS Attribute Selectors
17
There are others like:
• CSS [attribute~="value"] Selector: select elements with an attribute value
containing a specified word.(the word must be separated with others by space)
• CSS [attribute|="value"] Selector : select elements with the specified
attribute starting with the specified value.
• CSS [attribute^="value"] Selector :select elements whose attribute value
begins with a specified value.
• CSS [attribute$="value"] Selector :select elements whose attribute value ends
with a specified value.
• CSS [attribute*="value"] Selector :select elements whose attribute value
contains a specified value.
e3_mor-attr-sel
Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like
class="top-text"!
Note: The value does not have to be a whole word!
Note: The value does not have to be a whole word!
Note: The value does not have to be a whole word!
18. CSS Combinators Selector
18
• A combinator is something that explains the relationship between the selectors.
• A CSS selector can contain more than one simple selector. Between the simple
selectors, we can include a combinator.
• There are four different combinators in CSS3:
1. descendant selector(space):matches all elements that are descendants of a
specified element.
2. child selector(>) :selects all elements that are the immediate children of a
specified element.
3. adjacent sibling selector(+):selects all elements that are the adjacent
siblings of a specified element.
4. general sibling selector (~):selects all elements that are siblings of a
specified element.
div p { background-color: yellow;}
div > p { background-color: yellow;}
div + p { background-color: yellow;}
div ~ p { background-color: yellow;}
body
h1
i
p
i
19. Combinators example(1) : descendant selector(space)
CSS Combinators Selector
19
<!DOCTYPE html><html><head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
body></html>
e1_combinators
20. Combinators example(2) : child selector(>)
CSS Combinators Selector
20
<!DOCTYPE html><html><head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span>
<!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
body></html>
e2_combinators
21. Combinators example(3) : adjacent sibling selector (+)
CSS Combinators Selector
21
<!DOCTYPE html><html><head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
body></html>
e3_combinators
22. Combinators example(4) : general sibling selector(~)
CSS Combinators Selector
22
<!DOCTYPE html><html><head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
body></html>
e4_combinators