Web Design Course: CSS lecture 2

Web Programming and
Design
CSS (Cascading Style Sheet)
By: Gheyath M. Othman

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>

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;
}
<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>

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

• 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

e6_external-style>>
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)

Internal 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

Internal Style Sheet example:
8
e7_enternal-style>>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body></html>
CSS style used inside the page in head section

Inline 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>

Inline Style Sheet example:
10
e8_inline-style>>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
</body></html>

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>>

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

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

CSS Background Examples
14
Example-1-:page background
<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
<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>>

15
Example:background-image
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body></html>
e2_>>

16
Example:background-repeat
<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_>>

17
Example:background-position
<!DOCTYPE html><html> <head>
<style>
body {
background-image: url("../img_flwr.gif");
background-position:center center;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>background position..</p>
<p>background position..</p> <p>background
position..</p> <p>background position..</p>
</body></html>
e4_>>

Web Design Course: CSS lecture 2

More Related Content

What's hot (20)

Similar to Web Design Course: CSS lecture 2 (20)

Recently uploaded (20)

Web Design Course: CSS lecture 2