2. CSS Comments
• A CSS comment starts with /* and ends with */. Comments can also span
multiple lines: like
CSS Comments
2
<!DOCTYPE html><html><head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line comment */
</style>
</head>
<body>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body></html>
3. You can group selectors. Separate each selector with a comma.
Grouping Selectors
3
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
h1, h2, p {
text-align: center;
color: red;
}
<!DOCTYPE html><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>
4. When a browser reads a style sheet, it will format the document according to
the information in the style sheet.
Three Ways to Insert CSS:
Ways of Inserting CSS Styles
4
There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
5. • The style sheet file must be saved with a .css extension. The file should not
contain any html tags.
External Style Sheet:
Ways of Inserting a Style Sheet
5
• With an external style sheet, you can change the look of an entire website
by changing just one file!
• Each page must include a reference to the external style sheet file inside
the <link> element. The <link> element goes inside the head section:
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
HTML files
CSS file
With
(mystyle.css)
HTML filesHTML filesHTML filesHTML files
6. e6_external-style>>
Ways of Inserting a Style Sheet
6
External style sheet example:
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" type="text/css" href=“mystyle.css">
</head>
<body>
<h1>This heading will be affected by external styles.</h1>
</body></html>
HTML file
body{ background-color:skyblue}
h1{
color:red;
text-align:center;
}
CSS file (mystyle.css)
7. Internal Style Sheet:
Ways of Inserting a Style Sheet
7
• An internal style sheet may be used if one single page has a unique style.
• Internal styles are defined within the <style> element, inside the head
section of an HTML page:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
}
</style>
</head
8. Internal Style Sheet example:
Ways of Inserting a Style Sheet
8
e7_enternal-style>>
<!DOCTYPE html><html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
CSS style used inside the page in head section
9. Inline Style Sheet:
Ways of Inserting a Style Sheet
9
• An inline style may be used to apply a unique style for a single element.
• An inline style loses many of the advantages of a style sheet (by mixing
content with presentation).
• To use inline styles, add the style attribute to the relevant tag. The style
attribute can contain any CSS property.
<h1 style="CSS code…">This is a heading.</h1>
10. Inline Style Sheet example:
Ways of Inserting a Style Sheet
10
e8_inline-style>>
<!DOCTYPE html><html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
<p>This is a paragraph.</p>
</body></html>
11. Multiple Styles Will Cascade into One
11
Styles can be specified:
• in an external CSS file
• inside the <head> section of an HTML page
• inside an HTML element
Cascading order
Question//What style will be used when there is more than one style specified
for an HTML element?
Inline style (inside an HTML element) has the highest priority, which means that
it will override a style defined inside the <head> tag, or in an external style
sheet, or in a browser (a default value).
e9_priority-style>>
12. CSS Background
12
CSS background properties are used to define the background effects of an
element. CSS properties used for background effects are:
Property Description Values
background A shorthand property for
setting all background
properties
in one declaration
background-color
background-image
background-repeat
Background-attachment
Background-position
Background-color
e1_>> e1_1>>
Sets the background
color of an element
color-rgb
color-hex
color-name
transparent
Background-image
e2_>>
Sets an image as the
background
url(URL)
none
13. CSS Background
13
Property Description Values
Background-repeat
e3_>>
Sets if/how a
background image will
be repeated
repeat
repeat-x
repeat-y
no-repeat
Background-position
e4_>>
Sets the starting
position of a
background image
top left
top center
top right
center left
Center center
Center right
Bottom left
bottom center
bottom right
x% y%
Background-attachment
e5_>>
Sets whether a
background image is
fixed or scrolls with
the rest of the page
scroll
fixed
14. CSS Background Examples
14
Example-1-:page background
<!DOCTYPE html><html><head>
<style>
body { background-color: #b0c4de; }
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>This is a background color example.</p>
</body></html>
Example-2-:elements background
<!DOCTYPE html><html><head>
<style>
h1 { background-color: #6495ed;}
div { background-color: #b0c4de;}
p { background-color: #e0ffff;}
</style>
</head><body>
<h1>CSS background-color example!</h1>
<div>This is a text inside a div element.
<p>This p has its own background color.</p>
We are still in the div element.</div>
</body></html>
e1_>> e1_1>>
16. CSS Background Examples
16
Example:background-repeat
<!DOCTYPE html><html><head>
<style>
body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>background repeat..</p>
</body></html>
You can use repeat-x
You can use repeat-y
You can use repeat
e3_>>