Scribd
Upload
106 views104 pages

Css

CSS (Cascading Style Sheets) is a language used to style and lay out web documents. It allows separation of document content from document presentation through rules that define how elements should be displayed. CSS handles aspects like fonts, colors, spacing and layout in a way that allows for easier maintenance and presentation across different devices. Some benefits of CSS include easier site-wide styling changes, smaller file sizes, and more accessible websites.

Uploaded by

Tolera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
106 views104 pages

Css

CSS (Cascading Style Sheets) is a language used to style and lay out web documents. It allows separation of document content from document presentation through rules that define how elements should be displayed. CSS handles aspects like fonts, colors, spacing and layout in a way that allows for easier maintenance and presentation across different devices. Some benefits of CSS include easier site-wide styling changes, smaller file sizes, and more accessible websites.

Uploaded by

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

css

1
CSS (cascading style sheets)
 separate language used to style documents
 uses rules to say how a document should appear
 style sheets handles the presentation
 (X)HTML defines document structure and meaning
The Benefits of CSS
 Better type and layout controls.
 Less work. - change the appearance of an entire site by editing one
style sheet.
 Potentially smaller documents and faster downloads.
 More accessible sites. - making it more accessible for non-visual or
mobile devices

2
CSS
 Each CSS rule is made up of two parts:

A selector to indicate which elements a rule applies to.
 Declarations indicating the properties of an element you want to
change, such as its typeface or color, and the value you want this
to be, such as Arial or red. Declarations are very similar to
attribute names and their values

Example: a CSS which applies to <body> part is written as
Selector Declaration

body { font-family: arial;


color : #000000;}

CSS rule

3
Example on simple CSS
 CSS Code with similar formating as the previous example
body { background-color: #71ec90; Save the CSS file
font-family: arial; as
Guzo_css1.css in
color: #000000;} the
same folder with the
p {color: #cc2400;} HTML
 On the HTML code insert the <link> element
<head>
<title> GuZo Ethiopia Travel and Tour PLC : About us </title>
<link rel="stylesheet" type="text/css" href="Guzo_css1.css" />
</head>

4
Simple CSS Example
 first rule selects all markup inside the <body> element
 typeface (font-family) used for all text inside this element should
be Arial,
 the color should be black,
 and the background color (background-color) should be light
green
 Second rule selects all markup inside the <p>
 The color should be red

5
Attaching the styles to the document
 Inline styles. -apply properties and values to a single element using the
style attribute in the element itself (should be avoided)
<h1 style="color: red">Introduction</h1>
 Embedded style sheets.- placed in the head of the document
 it must contain a type attribute that identifies the content of the
style element as “text/css”
<head>
<title>Required document title here</title>
<style type="text/css">
/* style rules go here */
</style>
</head>
 External style sheets.
 is a separate, text-only document that contains a number of style
rules. It must be named with the .css suffix.
<head> <link rel="stylesheet" type="text/css" href="Guzo_css1.css" />
</head> 6
Example
<html>
<head>
<style type="text/css">
h1 {
color: green;
}
p {
font-size: small;
font-family: sans-serif;
color : red;
}
</style>
</head>
<body>
<h1> The title is green </h1>
<p> The content should be Red</p> 7
</body>
Some concepts
 Inheritance
 (X)HTML elements pass down certain style properties to the
elements they contain.
 Document structure

8
(Cont'd . . .) Some concepts
 In general, properties related to the styling of text—font size,
color, style, etc.—are inherited .
 Properties such as borders, margins, backgrounds, and so on that
affect the boxed area around the element tend not to be
inherited.

9
(Cont'd . . .) Some concepts
 Specificity
 When two rules in a single style sheet conflict, the type of
selector is used to determine the winner.
 The more specific the selector, the more weight it is given to
override conflicting declarations.
 Assigning Importance
 If you want a rule not to be overridden by a subsequent
conflicting rule, include the !important indicator
p {color: blue !important;}

10
Grouped Selectors
h1 { border: 1px solid blue; }
h2 { border: 1px solid blue; }
p { border: 1px solid blue; }
em { border: 1px solid blue; }
img { border: 1px solid blue; }

Is similar to
h1 ,h2 ,p ,em,img { border: 1px solid blue; }

eg.
<head>
<link rel="stylesheet" type="text/css" href="css2.css" />
</head>
<body>
<h1> heading one </h1>
<p>this is a <em>text</em> in para </p>
11
</body>
Example
eg.

h1 ,h2 ,p ,em,img { border: 1px solid blue; }


img {border: 5px solid blue;}

<body> In css file


<h1> heading one </h1>
<p>this is a <em>text</em> in para </p>
<img src="../../images/bonus10/platinum_05.jpg" height="300" width = "300" />
</body>

In html file

12
Values and Units
 Length Units
 are divided into two types:
 absolute length units and
 relative length units.
Absolute units should be avoided for
 Absolute Length Units web page style sheets because they are
not relevant on computer screens.
 Inches (in)
 Centimeters (cm) However, if you are creating a style
sheet to be used when the document is
 Millimeters (mm) printed, they are useful.
 Points (pt) - there are 72 points to an inch (18pt =0.25in)
 Picas (pc) - A pica is equivalent to 12 points

13
Relative Length Units
 they are measured in relation to other things
 em and ex units
 one "em" is defined to be the value of font-size for a given
font.
 If the font-size is 14 pixels, then for that element, 1em is equal
to 14 pixels.
 ex - refers to the height of a lowercase x in the font being used
 ex ~= 0.5 em
 em is mostly used for webdesign
 Pixel lengths
 considered relative because it varies with display resolution

14
FORMATTING TEXT
 The Font Properties
 CSS does not provide ultimate control over fonts
 Because you have no way of knowing which fonts are loaded on
users’ machines
 Font Families
Values: one or more font or generic font family names, separated by commas |
inherit
Default: depends on the browser
Applies to: all elements
Inherits: yes

15
Font Families
five generic font families:
Serif fonts - Times, Georgia, and New Century Schoolbook
Sans-serif fonts - Helvetica, Geneva, Verdana, and Arial,
Monospace fonts - Courier, and Courier New
Cursive fonts - Zapf Chancery, and Comic Sans.
Fantasy fonts - Algerian, and Cooper Black
eg. Use quotation
if the font type
body { font-family: Arial; } has space
tt { font-family: Courier, monospace; }
p { font-family: "Trebuchet MS", Verdana, sans-serif; }

16
Font limitations
 “Why specify more than one font?”
 Browsers are limited to displaying fonts that are already
installed on the user’s machine.
 CSS allows you to provide a list of back-up fonts should your
first choice not be available.
 When you specify a generic font family, the browser chooses
an available font from that stylistic category.
 p { font-family: "Trebuchet MS", Verdana, sans-serif; }

1 2 3

Font-
Font-type 17
family
trends
 the majority of professional web sites use Verdana because it
was specially designed to be legible at small sizes on computer
monitors.

18
Font Size
Values: length unit, percentage, xx-small | x-small | small | medium | large |
x-large | xx-large | smaller | larger | inherit
Default: medium
Applies to: all elements
Inherits: yes
One can specify text in a several ways:
1. At a specific size using one of the CSS length units,
 h1 { font-size: 1.5em; } /* 1.5 x 16 = 24 */

No space needed

19
(Cont'd … ) Font Size
2. As a percentage value, sized up or down from the element’s
default or inherited font size:
h1 { font-size: 150%; } /* 150% of 16 = 24 */
3. Using one of the absolute keywords (xx-small, x-small, small,
medium, large, x-large, xx-large).
 On most current browsers, medium corresponds to the default
font size:
h1 { font-size: x-large; }
4. Using a relative keyword (larger or smaller) to make the text
larger or smaller than the surrounding text:
strong { font-size: larger; }

20
Cont'd . . . font size
<head>
<style type="text/css">
xx-small { font-size : xx-small; color: green; }
x-small { font-size : x-small; color: green; }
small { font-size : small; color: green; }
medium { font-size : medium; color: green; }
large { font-size : large; color: green; }
x-large { font-size : x-large; color: green; }
xx-large { font-size : xx-large; color: green; }
p { font-size: small; font-family: sans-serif; color : red; }
</style>
</head>
<body>
<xx-small>The font-size is xx-small<br /> </xx-small>
<x-small> The font-size is x-small <br /></x-small>
<small> The font-size is small <br /></small>
<medium> The font-size is medium <br /></medium>
<large> The font-size is large <br /></large>
<x-large> The font-size is x-large <br /></x-large>
<xx-large> The font-size is xx-large <br /></xx-large> </body>

21
Cont'd . . . font size

Larger and smaller

<html>
<body>
<p>There are two relative keywords:
<span style="font-size:
larger">larger</span> and
<span style="font-size:
smaller">smaller</span>. They are used
to
shift the size of text relative to the parent
element.</p>
</body>
</html>

22
(Cont'd … ) Font Size
 The only acceptable values for font-size in contemporary web
design are
 em measurements,
 percentage values, and
 keywords.
 These are preferred because they allow users to resize text
using the text-zoom feature on their browser.

23
Font weight (boldness)
font-weight
 Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900 | inherit
 Default: normal
 Applies to: all elements
 Inherits: yes
 Eg
b {font-weight: bold;}

24
Font style (italics)
 The font-style property affects the posture of the text,
font-style
 Values: normal | italic | oblique | inherit
 Default: normal
 Applies to: all elements
 Inherits: yes
 italic version is usually a separate typeface design with curved
letter forms,
 oblique text takes the normal font design and just slants it.
p {font-style: normal;}
em {font-style: oblique;}
i {font-style: italic;}

25
Font Variant (Small Caps)
 allow designers to specify such a small-caps font for a elements.
font-variant
 Values: normal | small-caps | inherit
 Default: normal
 Applies to: all elements
 Inherits: yes

26
Example
<style>
h1 {font-variant: small-caps;}
h1 code, p {font-variant: normal;}
</style>

<h1>The Uses of <code>font-variant</code> On the Web</h1>


<p>
The property <code>font-variant</code> is very interesting...
</p>

27
The shortcut font property
 CSS provided the shorthand font property that compiles all the
font-related properties into one rule.
font
Values: font-style font-weight font-variant font-size/line-height
font-family | inherit
Default: depends on default value for each property listed
Applies to: all elements
Inherits: yes
h1 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 900;
font-style: italic; font-variant: small-caps;}
is the same as

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}

any omitted values are reset to their defaults.

28
Changing Text Color
color
 Values: color value (name or numeric) | inherit
 Default: depends on the browser and user’s preferences
 Applies to: all elements
 Inherits: yes
 The 17 standard color names defined in CSS2.1:
 yellow
 navy purple black red
fuchsia silver orange (2.1 only)
 blue green gray
 teal lime white
olive maroon
 aqua

29
ID selectors
 id attribute that gives an element a unique identifying name
Eg <li id="catalog1234">Happy Face T-shirt</li>
 One can write a style rule just for that list item using an ID selector
li#catalog1234 { color: red; } OR
#catalog1234 { color: red; } - since id is unique
ID selector

30
Class selectors
 the class identifier,is used to classify elements into a conceptual
group.
 multiple elements may share a class name.
 an element may belong to more than one class.
 Class names are indicated with a period (.) in the selector
p.special { color: orange; }

selects all paragraphs


with class="special",
 To apply a property to all elements of the same class,
.special { color: orange; }

Selects all paragraphs and


any other element that has been 31
marked up with class="special".
Specificity
 refers to the fact that more specific selectors have more weight
when it comes to handling style rule conflicts.
 ID selectors are more specific than (and will override)
 Class selectors, which are more specific than (and will
override)
 Contextual selectors, which are more specific than (and will
override)
 Individual element selectors
 eg.
p { line-height: 1.2em; } – Individual element selectors
blockquote p { line-height: 1em; } - Contextual selectors
p.intro { line-height: 2em; } - Class selectors

32
Vertical Alignment
 The Height of Lines
line-height
 defines the minimum distance from baseline to baseline in
text.
 is a way to increase (or decrease) the vertical space between
lines of text
Values: number, length measurement, percentage | normal | inherit
Default: normal
Applies to: all elements Multiplying factor

Inherits: yes
Three ways of making the line-height twice
p { line-height: 2; }
p { line-height: 2em; }
p { line-height: 200%; } 33
Eg – inheritance of line-height
body {font-size: 10px;}
div {line-height: 1em;} /* computes to '10px' */
p {font-size: 18px;}

<div>
<p>This paragraph's 'font-size' is 18px, but the inherited 'line-height'
value is only 10px. This may cause the lines of text to overlap each
other by a small amount.</p>
</div>

34
Vertically Aligning Text
 Specifies the vertical alignment of an inline element’s baseline
relative to the baseline of the surrounding text. It is also used to
set the vertical alignment of content in a table cell (td).
vertical-align
Values: baseline | sub | super | top | text-top | middle |
textbottom
| bottom | percentage | length | inherit

35
eg

36
Indentation and Horizontal Alignment
 The text-indent property indents the first line of text by a
specified amount
text-indent
Values: length measurement, percentage | inherit
Default: 0
Applies to: block-level elements and table cells
Inherits: yes

37
Eg Indentation 25%
100%

38
Horizontal Alignment
text-align
Values: left | right | center | justify | inherit
Default: left for languages that read left to right; right for
languages that read right to left;
Applies to: block-level elements and table cells
Inherits: yes

text-align: left aligns text on the left margin

text-align: right aligns text on the right margin

text-align: center centers the text in the text


block
39
text-align: justify aligns text on both right and
Text Decoration
text-decoration
Values: none | underline | overline | line-through | blink | inherit
Default: none
Applies to: all elements
Inherits: no, but since lines are drawn across child elements they
may look like they are “decorated” too
text-decoration: underline underlines the element
text-decoration: overline draws a line over the text
text-decoration: line-through draws a line through the text
text-decoration: blink makes text flash on and off (not supported by IE)

40
(Cont'd . . .) Text Decoration
 The most popular use of the text-decoration property is turning
off the underlines that appear automatically under linked text:
a { text-decoration: none; }
 If you turn off underlines under links, do so with care because
the underline is a strong visual cue that something is clickable.
 combine decorations in a single rule
a:visited {text-decoration: underline overline;}

41
Text Transformation
text-transform
Values: none | capitalize | lowercase | uppercase | inherit
Default: none
Applies to: all elements
Inherits: yes
text-transform: none -as it is typed in the source
text-transform: capitalize-capitalizes the first letter of each word
text-transform: lowercase -makes all letters lowercase
text-transform: uppercase -makes all letters uppercase

42
Example

43
Spaced Out
 The final two text properties are used to insert space between
 letters (letter-spacing) or
 words (word-spacing) when the text is displayed.
letter-spacing
Values: length measurement, normal | inherit
Default: normal
Applies to: all elements
Inherits: yes

44
Example

45
(Cont'd . . . ) Spaced Out
word-spacing
Values: length measurement, normal | inherit
Default: normal
Applies to: all elements
Inherits: yes

46
Example

47
COLORS AND BACKGROUNDS

Writing RGB values in style sheets

 There are four formats for providing RGB values in CSS:


rgb (255, 255, 255)
rgb (100%, 100%, 100%)
#FFFFFF
#FFF
All of these examples specify white.

48
Foreground Color
 The foreground of an element consists of its text and border
 You specify a foreground color with the color property
color
Values: color value (name or numeric) | inherit
Default: depends on the browser and user’s preferences
Applies to: all elements
Inherits: yes

49
eg

50
Background Color
 Before style sheets, you could apply a background color only to
the entire page.
 Now, with the background-color property, you can apply
background colors to any element.
background-color
Values: color value (name or numeric) | transparent | inherit
Default: transparent
Applies to: all elements
Inherits: no

51
eg

52
Eg Applying the background-color property to an inline element.

53
Pseudoclass Selectors
Pseudoselectors are indicated by the colon (:) character.
Anchor pseudoclasses
There are four main pseudoclasses that can be used as selectors:
a:link Applies a style to unclicked (unvisited) links
a:visited Applies a style to links that have already been clicked
a:hover Applies a style when the mouse pointer is over the link
a:active Applies a style while the mouse button is pressed
 to use all four anchor pseudoclasses in a single style sheet, they
need to appear in a particular order in order to function properly.
the required order is
 :link, :visited, :hover, :active.

54
Eg

link

hove
r

activ
e

visite
d
55
Background Images
Adding a background image
 The background-image property is used to add a background
image to an element.
background-image
Values: URL (location of image) | none
Default: none
Applies to: all elements
Inherits: no

56
Example

57
58
Background Tiling
background-repeat
Values: repeat | repeat-x | repeat-y | no-repeat | inherit
Default: repeat
Applies to: all elements
Inherits: no
If you want a background image to appear just once, use the no-
repeat keyword value

59
eg

60
Background Position
background-position
Values: length measurement | percentage | left | center | right | top
| bottom | inherit
Default: 0% 0% (same as left top)
Applies to: all elements
Inherits: no

61
62
eg

63
eg

64
Background attachment
background-attachment
Values: scroll | fixed | inherit
Default: scroll
Applies to: all elements
Inherits: no

 With the background-attachment property, you have the choice


of whether the background image scrolls or is fixed.

65
The Shorthand background Property
background
Values: background-color background-image background-repeat background-
attachment backgroundposition| inherit
Default: see indiviual properties
Applies to: all elements
Inherits: no
body { background: black url(arlo.jpg) no-repeat right top fixed; }
replaces this rule with five separate declarations:
body {
background-color: black;
background-image: url(arlo.jpg);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed; }
66
The Element Box

67
Setting the Content Dimensions
width
Values: length measurement | percentage | auto | inherit
Default: auto
Applies to: Block-level elements and replaced inline elements (such as images)
Inherits: no
height
Values: length measurement | percentage | auto | inherit
Default: auto
Applies to: Block-level elements and replaced inline elements (such as images)
Inherits: no

68
Handling overflow
overflow
Values: visible | hidden | scroll | auto | inherit
Default: visible
Applies to: Block-level elements and replaced inline elements (such as
images)
Inherits: no

69
Padding
 Padding is the space between the content area and the border
padding-top, padding-right, padding-bottom, padding-left
Values: length measurement | percentage | auto | inherit
Default: auto
Applies to: all elements
Inherits: no
padding
Values: length measurement | percentage | auto | inherit
Default: auto
Applies to: all elements
Inherits: no

70
The shorthand padding property
{ padding: top right bottom left; } { padding: top/bottom right/left; }

blockquote { blockquote {
padding: 1em 3em 1em 3em; padding: 1em 3em;
background-color: #D098D4; background-color: #D098D4;
} }

{ padding: top right/left bottom; } { padding: top/bottom/right/left; }

blockquote { div#announcement {
padding: 1em 3em 1em; padding: 15px;
background-color: #D098D4; border: 1px solid;
} }
71
Borders
border-top-style, border-right-style,
border-bottom-style, border-left-style
Values: none | dotted | dashed | solid | double | groove | ridge | inset
| outset | inherit
Default: none
Applies to: all elements
Inherits: no
border-style
Values: none | dotted | dashed | solid | double | groove | ridge | inset
| outset | inherit
Default: none
Applies to: all elements
Inherits: no
72
Border width (thickness)
border-top-width, border-right-width,
border-bottom-width, border-left-width
Values: length units | thin | medium | thick | inherit
Default: medium
Applies to: all elements
Inherits: no
border-width
Values: length units | thin | medium | thick | inherit
Default: medium
Applies to: all elements
Inherits: no
73
Border color
border-top-color, border-right-color,
border-bottom-color, border-left-color
Values: color name or RGB value | transparent | inherit
Default: the value of the color property for the element
Applies to: all elements
Inherits: no
border-color
Values: color name or RGB value | transparent | inherit
Default: the value of the color property for the element
Applies to: all elements
Inherits: no
74
Combining style, width, and color
border-top, border-right, border-bottom, border-left
Values: border-style border-width border-color or inherit
Default: defaults for each property
Applies to: all elements
Inherits: no
border
Values: border-style border-width border-color or inherit
Default: defaults for each property
Applies to: all elements
Inherits: no
75
Margins
margin-top, margin-right, margin-bottom, margin-left
Values: length measurement | percentage | auto | inherit
Default: auto
Applies to: all elements
Inherits: no
margin
Values: length measurement | percentage | auto | inherit
Default: auto
Applies to: all elements
Inherits: no
76
eg

77
Floating
 the float property moves an element as far as possible to the left
or right, allowing the following content to wrap around it.
float
Values: left | right | none | inherit
Default: none
Applies to: all elements
Inherits: no

78
Eg

79
Floating an inline text element

80
Floating block elements

81
Floating multiple elements

82
Clearing floated elements
 Applying the clear property to an element prevents it from
appearing next to a floated element, and forces it to start against
the next available “clear” space below the float.
clear
Values: left | right | both | none | inherit
Default: none
Applies to: block-level elements ony
Inherits: no

83
eg

84
Positioning
Position
Values: static | relative | absolute | fixed | inherit
Default: static
Applies to: all elements
Inherits: no
 Static - elements are positioned as they occur in the normal document
flow.
 Relative - Relative positioning moves the box relative to its original
position in the flow. The space the element would have occupied in the
normal flow is preserved.
 Absolute - Absolutely positioned elements are removed from the
document flow entirely and positioned relative to a containing element
 Fixed- the element stays in one position in the window even when the
document scrolls.

85
Specifying position
 the actual position is specified with four offset properties.
top, right, bottom, left
Values: length measurement | percentage | auto | inherit
Default: auto
Applies to: Positioned elements (where position value is relative,
absolute,or fixed)
Inherits: no

86
Relative Positioning
 moves an element relative to its original spot in the flow.

The original space in the document flow is preserved.


Overlap happens.
87
Absolute Positioning

the element is positioned relative to its nearest containing


block.
88
Containing blocks
 If the positioned element is not contained within another
positoned element,then it will be placed relative to the initial
containing block (createdby the html element).
 But if the element is contained within an element that has its
position set to relative, absolute, or fixed, the element willbe
positioned relative to the edges of that element instead.

89
example

90
Page Layout Strategies
 Three general page layouts
 Liquid pages resize along with the browser window.
 Fixed pages put the content in a page area that stays a specific
pixel width regardless of the browser’s dimensions.
 elastic pages have areas that get larger or smaller when the text
is resized.

91
Liquid page design
 the page area and/or columns within the page are allowed to get
wider or narrower to fill the available space in the browser window.

92
How to create liquid layouts
 Create a liquid layout by specifying widths in percentage values.

93
Eg Liquid layout combining fixed-width and
auto sized columns

94
Fixed Layouts
 stay put at a specified pixel width as determined by the designer.
 Fixed-width layouts are created by specifying width values in pixel
units
 Most fixed-width web pages are designed to fit in an 800x600 pixel
browser window,
 Careful - if the user’s browser window is not as wide as the page, the
content on the right edge of the page will not be visible.

95
How to create fixed-width layouts
 the entire page is put into a div (often named “content,” “container,”
“wrapper,” or “page”) that can then be set to a specific pixel width.

200 25

96
Elastic Layouts
 Elastic layouts expand or contract with the size of the text.
 This is an advantage over
 liquid layouts where line lengths can get too long,and
 fixed layouts where very large text may result in awkwardly few
characters per line.

97
How to create elastic layouts

 The key to elastic layouts is the em,


 In elastic layouts, the dimensions of containing elements are specified
in ems as well.

98
CSS TECHNIQUES

99
Changing List Bullets and Numbers
Choosing a Marker
 Use the list-style-type property to select the type of marker
that appears before each list item.
list-style-type
Values: none | disc | circle | square | decimal | decimal-leading-zero |lower-alpha |
upper-alpha | lower-latin | upper-latin | lower-roman | upper-roman | lower-
greek | inherit
Default: disc
Applies to: ul, ol, and li (or elements whose display value is list-item)
Inherits: yes

100
eg

101
Make your own bullets
list-style-image
Values: <URL> | none | inherit
Default: none
Applies to: ul, ol, and li (or elements whose display value is list-item)
Inherits: yes

 The list-style-type is set to disc as a backup in case the


image does not display,

102
Eg

103
CSS Rollovers
 :hover pseudoclass selector is used to create rollover effects

104

You might also like