Scribd
Upload
4 views74 pages

Chapter III

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in defining the presentation of HTML elements through selectors and declarations. It explains various CSS rules, including element, class, and ID selectors, as well as how to attach styles to HTML documents using inline, internal, and external methods. Additionally, it covers CSS properties related to backgrounds, fonts, colors, and text alignment, along with examples and best practices for implementation.

Uploaded by

eyasu119
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
4 views74 pages

Chapter III

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in defining the presentation of HTML elements through selectors and declarations. It explains various CSS rules, including element, class, and ID selectors, as well as how to attach styles to HTML documents using inline, internal, and external methods. Additionally, it covers CSS properties related to backgrounds, fonts, colors, and text alignment, along with examples and best practices for implementation.

Uploaded by

eyasu119
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/ 74

CHAPTER III :CSS

CASCADING STYLE SHEET


BASICS

prepared by Suleyman Y.
CSS
2

Stands for Cascading Style sheets


Styles define how to display
HTML elements
A CSS rule has two main parts: a
selector, and one or more
declarations:
The selector is normally the
HTML element you want to style.
prepared by Suleyman Y.
CSS cont…
3

Style sheets describe presentation


rules for HTML elements.
Styles are simply a list of selectors
Each selector can have a number of
style rules.
Each rule describes some attribute
of the selector.

prepared by Suleyman Y.
CSS Cont…
4

Each declaration consists of a


property and a value.
 The property is the style
attribute you want to change.
Each property has a value.
For example:
h1 {font-size: 12px; color: red;}
here
prepared by Suleyman Y.
CSS
5

link element associates style sheet with doc.

prepared by Suleyman Y.
CSS….
6

type attribute specifies style language used

prepared by Suleyman Y.
CSS….
7

href attribute provides style sheet URL

prepared by Suleyman Y.
CSS…
8

title attribute provides style sheet name

prepared by Suleyman Y.
CSS…
9

Alternative, user selectable style sheets


can be specified

prepared by Suleyman Y.
Basic CSS rule syntax
10

selector {
property: value;
property: value;……
property: value;
}
Example
p {
font-family: sans-serif;
color: red;
}

prepared by Suleyman Y.
CSS Rules….
11

A CSS file consists of one or more


rules
Each rule starts with a selector
A selector specifies an HTML
element(s) and then applies style
properties to them
a selector of * selects all elements

prepared by Suleyman Y.
Attaching a CSS file <link>
12

A page can link to multiple style sheet files


 In case of a conflict (two sheets define a style for
the same HTML element), the latter sheet's
properties will be used
The syntax is:

<head>
<link href="filename
"type="text/css"
rel="stylesheet" />
</head>
prepared by Suleyman Y.
CSS Cont…
13
h1 is an html tag used as
selector and
{font-size: 12px; color: red;}
this is Declaration where
font-size and color are
properties where 12px and
red are their respective values

prepared by Suleyman Y.
CSS Cont…
14

CSS selectors can be Either of


the following options
Single element type:
 P{font-size: smaller; letter-spacing: 1em}

Multiple element types:


 H1,h2,h3,h4,h5,h6{background-color: purple; font-
family: sans-serif;}
All element types:
*{font-weight: bold; font-color: red;}

Specific elements by id:


 #p1,#p4{background-color: aqua }
prepared by Suleyman Y.
CSS Element Selector
15

Uses the element or the tag to be


styled
Different properties and values
are followed
A CSS declaration always ends
with a semicolon, and declaration
groups are surrounded by curly
brackets
Example for Element selector
prepared by Suleyman Y.
Element Selector Cont…
16
p {color:red;text-align:center;}
or we can put it as
p
{
color:red;
text-align:center;
}
To make it more readable and clear
prepared by Suleyman Y.
CSS ID Selector
17

The id selector is used to specify a


style for a single, unique element.
 The id selector uses the id
attribute of the HTML element, and
is defined with a "#".
They are user defined elements
represented as an Id .
Are not mostly applicable
prepared by Suleyman Y.
CSS ID Selector ……
18
For example
<p id=”welcome”>Welcome to
SAMARA UNIVERSITY</p>
We can then create a CSS rule
with the id selector:
#welcome{text-
align:center;color:red; }
Here the style will affect the text
welcome in the paragraph
prepared by Suleyman Y.
CSS Class Selector
19

Used when we need to affect


more elements at a time
The class selector is used to
specify a style for a group of
elements
the class selector is most often
used on several elements.

prepared by Suleyman Y.
CSS ID Selector…..
20

Allows us to set a particular


style for many HTML elements
with the same class.
The class selector uses the
HTML class attribute, and is
defined with a period. “.”

prepared by Suleyman Y.
CSS Class Selector…
21

Example
<h2 class=”center”>Summary</h2>
We can then create a CSS rule with the class
selector:
.center
{
text-align: center;
font-size:16px;
}
prepared by Suleyman Y.
CSS class Selector…
22
Though all the elements in a class are
affected by the style
We can also specify the elements to be
affected by the style in the class using
the specific element with the class
Example
p.center {text-align:center;}
Here we are affecting only the
paragraph element in the class center
prepared by Suleyman Y.
CSS Comments
23

As the usual programming


languages comments are possible
to be used in web scripting
languages.
used to explain our code,
Can help us when we edit the
source code at a later date.
Comments are ignored by
browsers.
prepared by Suleyman Y.
CSS Comments….
24

A CSS comment begins with "/*",


and ends with "*/",
Example
/*This is a comment*/
p { text-align:center;
/*This is another comment*/
color:black; font-family:arial; }
prepared by Suleyman Y.
CSS Comments….
25

CSS (like HTML) is usually not


commented as rigorously as
programming languages such as
Java
The // single-line comment style is
NOT supported in CSS
The <!-- ... --> HTML comment
style is also NOT supported in CSS
prepared by Suleyman Y.
Hyperlink-class
26

a: link {style for never visited links}


a: visited {style for visited links}
a: active {style for link that is currently being
clicked}
a: hover {style when the mouse cursor is
hovering over the link} – rollover effect.
a:hover {color=red; text-transform:
uppercase; font-weight=bold}
examples/css/link_rollover.html

prepared by Suleyman Y.
Types of CSS
27

Three ways to insert style to html


documents
 Inline

 Internal(Document level)
 External imported

Only the location where they are


written is different their
application is same
prepared by Suleyman Y.
External CSS
28

An external style sheet is ideal


when the style is applied to many
pages
With an external style sheet, you
can change the look of an entire
Web site by changing one file
Each page must link to the style
sheet using the <link> tag. The
<link> tag goes inside the head
prepared by Suleyman Y.
External CSS…
29

Example
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
CSS Has file extension .css
Multiple external style can be
specified for a single html document
prepared by Suleyman Y.
External CSS….
30

 An external style sheet can be written in any text editor.


 The file should not contain any html tags.
 Example External CSS
hr
{
color:sienna;
}
h
{
margin-left:20px;
}
body
{
background-image:url("images/back40.gif");
}

prepared by Suleyman Y.
External CSS….
31
NB. Do not leave spaces between
the property value and the units
As margin-left:20 px;
instead of margin-left:20px;
It may not work for most of
currently used web browsers.
Like Firefox and others

prepared by Suleyman Y.
Internal Style Sheet
32

We can use this style when a single


document has a unique style.
Defined in the head section of an
HTML page, by using the <style>
tag,
Examples

prepared by Suleyman Y.
Internal CSS…
33

Example
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
Body
{background-image:url("images/back4
0.gif");}
</style> </head>
prepared by Suleyman Y.
Inline CSS…
34

Used inside the particular tag that is


needed to be styled
It loses many advantages of CSS.
The style attribute is used in the tag
to be styled
Example
<p style="color:sienna;margin-
left:20px">This is a paragraph.</p>

prepared by Suleyman Y.
Cascading Order
35

 Styles will be applied to HTML in the


following order:
1. Browser default
2. External style sheet
3. Internal style sheet (inside the <head>
tag)
4. Inline style (inside other elements,
outermost first)
 When styles conflict, the “nearest”
(most recently applied) style wins
prepared by Suleyman Y.
Cascading Order…
36
External style sheet:h3 {color: red;
text-align: left;
font-size: 8pt
}
Internal style sheet: h3 {text-align: right;
font-size: 20pt
}
Resultant attributes: color: red;
text-align: right;
font-size: 20pt
prepared by Suleyman Y.
Grouping styles
37
A style can select multiple elements separated
by commas
The individual elements can also have their
own styles
Example
p, h1, h2 {
color: green;
Font-family: sans-serif;
}
h2 {background-color: yellow;}
prepared by Suleyman Y.
CSS Properties
38

Background properties
background-color
background-image

 background-repeat
 background-attachment
 background-position

prepared by Suleyman Y.
CSS Properties….
39

Background-image:
 To display an image on the background of
the page
 The image fills the elements content area

Example
body{background-image:
url("images/draft.jpg");
background-repeat: repeat-x;
}
prepared by Suleyman Y.
CSS Properties….
40

Background-repeat:
can be:
 repeat (default),
 repeat-x,
 repeat-y,
 or no-repeat

prepared by Suleyman Y.
CSS Properties….
41

Background-position
value consists of two tokens,
each of which can be top, left,
right, bottom, center, a
percentage, or a length value in
px, pt, etc.
value can be negative to shift
left/up by a given amount
prepared by Suleyman Y.
CSS Properties…
42

Example:
body {background-image:
url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px
20px;
}

prepared by Suleyman Y.
CSS Properties cont…
43
Color Properties
 Text –color:

 Background-color:

Example
p {
color: red;
background-color: yellow;
}
prepared by Suleyman Y.
CSS Properties cont…
44

Font Properties
 Font-size: how large the letters will be

drawn
 Font-family: which font will be
used
 font-style: used to enable/disable
italic style
 font-weight :used to enable/disable
bold style
prepared by Suleyman Y.
CSS Properties cont…
45

Example
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
}
prepared by Suleyman Y.
CSS Properties…
46
We can specify multiple fonts from
highest to lowest priority
Generic font names:
serif, sans-serif, cursive, fantasy,

monospace
If the first font is not found on the
user's computer, the next is tried

prepared by Suleyman Y.
CSS Properties…
47

Font-Size:
Specify the size of the text
Has different units
 pt specifies number of point, where a
point is 1/72 of an inch on screen
 px specifies a number of pixels on the

screen
 em specifies number of m-widths,

where 1 em is equal to the font's


prepared by Suleyman Y.
CSS Properties
48

CSS Fonts can also be represented by


using
 Percentage (of parent font-size)
 p{font-size:90%;}

 Absolute size keyword: xx-small, x-small,


small, medium (initial value), large,
x-large, xx-large
 User agent specific; should differ by ~ 20%
 Relative size keyword: smaller, larger
 Relative to parent element’s font
prepared by Suleyman Y.
CSS Properties…
49

Line Height
Height of line box given by
line-height
Initial
value: normal (i.e., cell
height; relationship with em
height is font-specific)
Other values (following are
equivalent):
prepared by Suleyman Y.
CSS Properties….
50

This line heights are the same even


though they are expressed differently

prepared by Suleyman Y.
CSS Properties…
51

Example for Font-size weight & styles


p {
font-variant: small-caps;
font-size: 24pt
font-weight: bold;
font-style: italic;
Font-family: font-family: Garamond,
"Times New Roman", serif;
}
prepared by Suleyman Y.
CSS Properties…
52

property description
alignment of text within its
text-align
element
decorations such as
text-decoration
underlining
line-height,
gaps between the various
word-spacing,
portions of the text
letter-spacing
indents the first letter of each
text-indent
paragraph
text-align can be left, right,
center, or justify

prepared by Suleyman Y.
CSS Properties….
53

Example Text Properties:


p{
text-decoration: underline;
Text-align: justify;
}
can also be over-line, line-through,
blink, or none
effects can be combined:
text-decoration: over-line underline
prepared by Suleyman Y.
CSS Properties…
54

More Font Properties


A font family is a collection of related
fonts (typically differ in size, weight,
etc.)
font-family property can accept a list of
families, including generic font families
Generic font-families are:
sans-serif; Serif; cursive; fantasy and
mono-space
prepared by Suleyman Y.
CSS Properties…
55

Color Properties
Font color specified by color
property
Two primary ways of specifying
colors:
 Color name: black, gray, silver, white,
red, lime, blue, yellow, aqua, fuchsia,
maroon, green, navy, olive, teal, purple
 RGB values

prepared by Suleyman Y.
Alternative formats for colors
56

prepared by Suleyman Y.
CSS Properties….
57
 The list-style-type property:
to list things in the order of roman numbers like:
i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.

prepared by Suleyman Y.
CSS Properties….
58

Example
Ol
{
list-style-type: lower-roman;
}
ul
{
list-style-type: square;
}
prepared by Suleyman Y.
CSS Properties….
59

body style properties:


 Applies a style to the entire body of our page
 Saves us from manually applying a style to each

element
Examples
body {
font-size: 16px;
font-weight: bold;
font-style: italic;
}
prepared by Suleyman Y.
CSS Properties….
60

Aside: Favorites icon (“favicon”)


 The link tag, placed in the HTML page's head
section, can specify an icon
this icon will be placed in the browser title bar
and bookmark/favorite
Syntax: <link href="filename" type="MIME
type" rel="shortcut icon" />
Example: <link href="yahoo.gif"
type="image/gif" rel="shortcut icon" />

prepared by Suleyman Y.
External CSS Practices…
61

p.excerpt { font-style : italic;


margin-right : 2em;
margin-left : 2em;
Font-family:sans-serif;
Text-decoration: line-through;
}
/*Save this by file name abc.css */

prepared by Suleyman Y.
External CSS Practices…
62

<html>
<head>
<title>Style Example</title>
<link rel="stylesheet"
type="text/css" href="style.css">
</head>
<p class="excerpt">affected
text</p>
</html>
prepared by Suleyman Y.
CSS Box Model
63

Every rendered element occupies a


box:

prepared by Suleyman Y.
CSS Box Model
64

prepared by Suleyman Y.
CSS Box Model
65

prepared by Suleyman Y.
Normal Flow Layout
66

In normal flow processing, each


displayed element has a corresponding
box
 html element box is called initial containing
block and corresponds to entire document
 Boxes of child elements are contained in boxes

of parent
 Sibling block elements are laid out one on top

of the other
 Sibling inline elements are one after the other

prepared by Suleyman Y.
Normal Flow Layout
67

prepared by Suleyman Y.
Normal Flow Layout
68

prepared by Suleyman Y.
Normal Flow Layout
69

What is a “block element”?


 Element with value block specified for
its display property
 User agent style sheet (not CSS)

specifies default values; typical block


elements include html, body, p, pre, div,
form, ol, ul, dl, hr, h1 through h6
 Most other elements except li and table

related have inline specified for


display
prepared by Suleyman Y.
Beyond Normal Flow Layout
70

CSS allows for boxes to be positioned outside


the normal flow:
We can use different positioning:
Relative positioning:

<span style="background-
color:red">&nbsp;&nbsp;&nbsp;&nbsp;
span </span><span class="right">Red</span>
containin
g
text
moves
left

prepared by Suleyman Y.
Beyond Normal Flow….
71

Float positioning:

span taken out of


normal
flow and “floated”
to the
left of its line box

prepared by Suleyman Y.
Beyond Normal Flow….
72

Absolute Positioning:

span’s removed
from
normal flow and
positioned relative
to another box

prepared by Suleyman Y.
Beyond Normal Flow Layout
73

Properties used to specify


positioning:
 position: static (initial value),
relative, or absolute
 Element is positioned if this
property not static
 Properties left, right, top, bottom
apply to positioned elements
Primary values are auto (initial

value) or CSS length


prepared by Suleyman Y.
Beyond Normal Flow Layout
74

float: none, left, or right


 Applies to elements with
static and relative
positioning only

prepared by Suleyman Y.

You might also like