Chapter 3 - CSS.pdf

CHAPTER THREE
CASCADING STYLE SHEETS(CSS)
1
Prepared By Alemu G.

CSS Basics
 CSS stands for Cascading Style Sheet.
 A cascading style sheet file allows you to separate your web
sites HTML content from its style.
 As always you use your HTML tags to arrange the content, but
all of the presentation/formatting (fonts, colors, background,
borders, text formatting, link effects & so on...) are accomplished
within a CSS.
 CSS is a web page layout method that has been added to
HTML to give web developers more control over their design and
content layout.
2

CSS Basics
 Using CSS allows a designer to create a standard set of
commands (either embedded inside the web page or from an
external page) that controls the style of all subsequent pages.
 With CSS you can add style (fonts, colors, spacing, and size) to
web documents.
 More advanced techniques control the layout of the page
without the use of tables or other cumbersome HTML.
 CSS is that CSS separates the layout and the styles of a web
page.
 This is often difficult to comprehend for web designers that are
used to compiling their creative and HTML coding in a single web
page document.
3

CSS Basics
 Styles such as fonts, font sizes, margins, can be specified in one
place, and then the Web pages feed off this one master list, with
the styles cascading throughout the page or an entire site.
 Styles solve a common Problem. HTML tags were originally
designed to define the content of a document.
 They were supposed to say "This is a header", "This is a
paragraph", "This is a table", by using tags like <h1>, <p>,
<table>, and so on.
 The layout of the document was supposed to be taken care of
by the browser, without using any formatting tags.
4

CSS Basics
 Styles sheets define HOW HTML elements are to be displayed,
just like the font tag and the color attribute in HTML.
 Styles are normally saved in external .css files.
 External style sheets enable you to change the appearance
and layout of all the pages in your Web, just by editing one
single CSS document!
 CSS is a breakthrough in web design because it allows
developers to control the style and layout of multiple web pages
all at once.
 As a web developer you can define a style for each HTML
element and apply it to as many web pages as you want. To
make a global change, simply change the style, and all elements
in the Web are updated automatically.
5

CSS Basics
Benefits of CSS
❑ Better type and layout controls - Presentational HTML never
gets close to offering the kind of control over type,
backgrounds, and layout that is possible with CSS.
 Less work - You can change the appearance of an entire site
by editing one style sheet. Making small tweaks and even
entire site redesigns with style sheets is much easier than when
presentation instructions are mixed in with the markup.
6

CSS Basics
 Potentially smaller documents and faster downloads - Old
school practices of using redundant font elements and nested
tables make for bloated documents. Not only that, you can
apply a single style sheet document to all the pages in a site
for further byte savings.
 More accessible sites - When all matters of presentation are
handled by CSS, you can mark up your content meaningfully,
making it more accessible for non-visual or mobile devices.
 Reliable browser support - Nearly every browser in current
use supports all of CSS Level 1 and the majority of CSS Level
7

CSS Basics
CSS version
 There are three levels/versions of CSS:
• CSS1,
• CSS2, and
• CSS3
i. CSS 1
 The first CSS specification to become an official W3C
Recommendation is CSS level1.
 It was published in December 1996.
8

CSS Basics
 Among its capabilities are support for:
• Font properties such as typeface and emphasis
• Color of text, backgrounds, and other elements
• Text attributes such as spacing between words, letters, and
lines of text
• Alignment of text, images, tables and other elements
• Margin, border, padding, and positioning for most elements
• Unique identification and generic classification of groups of
attributes
9

CSS Basics
ii. CSS 2
 CSS level 2 specification was developed by the W3C and
published as a Recommendation in May 1998. It is a superset of
CSS 1. It includes a number of new capabilities like absolute,
relative, and fixed positioning of elements and z-index, the
concept of media types, support for aural style sheets and
bidirectional text, and new font properties such as shadows.
 CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS 2. It
removes poorly-supported or not fully interoperable features
and adds already-implemented browser extensions to the
specification. .
10

CSS Basics
iii. CSS 3
 CSS Level 3 builds on CSS Level 2 module by module, using the
CSS2.1 specification as its core.
 Each module adds functionality and/or replaces part of the
CSS2.1 specification.
 The CSS Working Group intends that the new CSS modules will
not contradict the CSS2.1 specification: only that they will add
functionality and refine definitions.
11

CSS Syntax
 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. Each declaration consists of a property and a value. The
property is the style attribute you want to change. Each property
has a value.
12

CSS Syntax
 CSS declarations always ends with a semicolon, and
declaration block/groups are surrounded by curly brackets:
p { color:red; text-align:center; }
 To make the CSS more readable, you can put one declaration
on each line, like this:
p {
color: red;
text-align: center;
}
13

CSS Syntax
CSS Comments
 Comments are used to explain your code, and may help you
when you edit the source code at a later date. CSS comments,
like JavaScript comments, are ignored by browsers.
 A CSS comment begins with /* and ends with */ like this:
/*This is a comment*/
p{
text-align:center;
/*This is another comment*/
font-family:arial;
}
14

Liking CSS to HTML
 It is possible to link CSS with your html pages in two different
ways: internal style, and external style. Internal CSS can be either
inline or embedded.
Creating an Inline Style
 You can apply styles to a single element using the style
attribute in the element itself. Inline styles have the structure:
<tag style=”property: value”>
 Example:
<h1 style="color: red">Introduction</h1>
15

Liking CSS to HTML
Creating Embedded Styles
 In the embedded method, we simply place the CSS code within
the <head></head> tags of each HTML file you want to style
with the CSS. The CSS is put inside the <style> tag. The format
for this is shown in the example below:
<head>
<title><title>
<style type="text/css">
/* CSS Content Goes Here */
</style>
</head>
<body>
16
Example:
Body{
Background: Gray;
Font-size:32px;
}

Liking CSS to HTML
 With this method each HTML file contains the CSS code
needed to style the page.
 This means any changes you want to make to one page, will
have to be made to all.
 This method can be good if you need to style only one page,
or if you want different pages to have varying styles.
17

Liking CSS to HTML
Creating an External Style Sheet
 An external style sheet is a separate, text-only document that
contains a number of style rules.
 An external CSS file contains no HTML, only CSS. You have to
save the CSS file with the .css file extension.
 You can link the external file by placing one of the following
links in the head section of every HTML file you want to style with
the CSS file.
<link rel=”stylesheet” type=”text/css” href=”filename.css”/>
<style type=”text/css”>@import url(“filename.css”)</style>
18

Inheritance
 An element that is directly contained within another element
(with no intervening hierarchical levels), is said to be the child of
that element.
 Conversely, the containing element is the parent. For example,
the em element is the child of the p element, and the p element is
its parent.
 All of the elements higher than a particular element in the
hierarchy are its ancestors.
 Two elements with the same parent are siblings.
19

Inheritance
 When you write a font-related style rule using the p element
as a selector, the rule applies to all of the paragraphs in the
document as well as the inline text elements they contain.
 Certain properties are inherited. It is important to note that
some style sheet properties inherit and others do not. In general,
properties related to the styling of text — font size, color, style,
etc. — are passed down.
 Properties such as borders, margins, backgrounds, and so on
that affect the boxed area around the element tend not to be
passed down.
20

Inheritance
 This makes sense when you think about it. For example, if you
put a border around a paragraph, you wouldn’t want a
border around every inline element (such as em, strong, or a)
it contains as well.
 You can use inheritance to your advantage when writing style
sheets. For example, if you want all text elements to be
rendered in the Verdana font face, you could write separate
style rules for every element in the document and set the font-
face to Verdana.
 A better way would be to write a single style rule that applies
the font-face property to the body element, and let all the text
elements contained in the body inherit that style.
21

Inheritance
 Any property applied to a specific element will override the
inherited values for that property. Example: All texts in the
following page is displayed as red because of inheritance
<html>
<head>
<title> CSS </title>
<style type=”text/css”>
body { color: red;}
</style>
</head>
<body>
<h2> Well Known Novels </h2>
<p> Romeo and Juliet </p>
<p> Things Fall Apart</p>
<p>Kingdom of God is Among You</p>
</body>
</html>
22

Inheritance
Conflicting styles: the cascade
 Ever wonder why they are called “cascading” style sheets?
CSS allows you to apply several style sheets to the same
document, which means there are bound to be conflicts.
 For example, what should the browser do if a document’s
imported style sheet says that h1 elements should be red, but its
embedded style sheet has a rule that makes h1s purple?
 The folks who wrote the style sheet specification anticipated
this problem and devised a hierarchical system that assigns
different weights to the various sources of style information.
23

Inheritance
 The cascade refers to what happens when several sources of
style information vie for control of the elements on a page:
style information is passed down until it is overridden by a
style command with more weight.
 As we have learned, there are three ways to attach style
information to the source document, and they have a cascading
order as well.
 Generally speaking, the closer the style sheet is to the content,
the more weight it is given.
 Embedded style sheets that appear right in the document in
the style element have more weight than external style sheets.
24

Inheritance
 Inline styles have more weight than embedded style sheets
because you can’t get any closer to the content than a style right
in the element’s opening tag.
 To prevent a specific rule from being overridden, you can
assign it “importance” with the !important indicator.
 If you want a rule not to be overridden by a subsequent
conflicting rule, include the !important indicator just after the
property value and before the semicolon for that rule. For
example, to make paragraph text blue always, use the following
rule:
p {color: blue !important;}
25

Inheritance
 Even if the browser encounters an inline style later in the
document (which should override a document-wide style sheet),
like this one:
<p style="color: red">
 that paragraph will still be blue, because the rule with the
!important indicator cannot be overridden by other styles in the
author’s style sheet.
26

Inheritance
Grouped Selectors
 If you ever need to apply the same style property to a number
of elements, you can group the selectors into one rule by
separating them with commas.
 This one rule has the same effect as the five rules listed
separately.
h1, h2, p, div, img { border: 1px solid blue; }
 Grouping them makes future edits more efficient and results in
a smaller file size.
27

Inheritance
Rule order
 If there are conflicts within style rules of identical weight,
whichever one comes last in the list wins. Take these three rules,
for example:
p { color: red; }
p { color: blue; }
p { color: green; }
</style>
 In this scenario, paragraph text will be green because the last
rule in the style sheet overrides the earlier ones.
28

Practice
1. Write an external CSS that formats paragraphs (<p> tags)
and link to HTML page.
2. Write internal CSS to format your HTML page
29

CSS - Styling Background
1. Styling Backgrounds
 You can style the background of an element in one declaration
with the background property.
background: #ffffff url(path_to_image) top left no-repeat fixed;
 Values:
• color
• position
• Repeat
• Image
• attachment
Or you can set each property individually
 Example:
h1 { background: url(“banana.gif”) top left repeat fixed; }
30

Background Attachment
 If you are using an image as a background.
 You can set whether the background scrolls with the page or is
fixed when the user scrolls down the page with the background-
attachment property
background-attachment: fixed | scroll;
Background Color
 You can specifically declare a color for the background of an
element using the background-color property.
background-color: value;
31

 Values:
• color name – e.g. red, green, blue…
• hexadecimal number - e.g. #ff0000, #00ff00, #0000ff…
• RGB color code – e.g. rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0,
255) …
• transparent
 Example:
<style type=”text/css”>
h1 { background-color: rgb(255, 255, 0); }
p { background-color: #0000FF; }
</style>
32

Background Image
 You can set an image for the background of an HTML element
(<p>, <h1>, <body>, <table>, etc) using the background-
image property.
background-image: url(path_to_image) | none;
 Example: this sets background image of paragraphs
p { background-image: url("tulips.jpg"); }
33

Background Position
 You can position an image used for the background of an
element using the background-position property.
background-position: value;
 Values:
 Example
p { background-image: url("tulips.jpg");
background-position: top right;
}
34
Top left Center Center Bottom right
Top center Center right x-% y-%
Top right Bottom left x-pos y-pos
Center left Bottom center

Background Repeat
 You can set if an image set as a background of an element is
to repeat (across=x and/or down=y) the screen using the
background-repeat property.
background-repeat: no-repeat | repeat | repeat-x | repeat-y;
Example:
body { background-image: url("tulips.jpg");
background-position: top right;
background-repeat: repeat;
}
35

CSS - Styling Text
Color
 You can set the color of text with the following:
color: value;
 Possible values are
• color name – example red, black…
• hexadecimal number – example #ff0000, #000000
• RGB color code – example rgb(255, 0, 0), rgb(0, 0, 0)
 E. g.
p {color: blue;}
36

CSS - Styling Text
Letter Spacing
 You can adjust the space between letters in the following
manner.
 Setting the value to 0, prevents the text from justifying. You
can use negative values.
 Negative values make the text to overlap each other.
letter-spacing: normal | length;
e.g. h2 { letter-spacing: 6; }
37
Normal
-2
6

CSS - Styling Text
Word Spacing
 You can adjust the space between words in the following
manner. You can use negative values.
 word-spacing: normal | length;
 Example:
p { letter-spacing: 8px;
word-spacing: 1.5em;
}
Line height
 You can set the distance between lines in the following way:
 line-height: normal | number | length | percentage;
38

CSS - Styling Text
Text Align
 You can align text with the following:
text-align: left | right | center | justify;
 Examples:
P { text-align: left; }
H1 { text-align: center; }
Div { text-align: right; }
 This text is aligned left.
 This text is aligned center.
 This text is aligned right.
39

CSS - Styling Text
Text Decoration
 You can decorate text with the following:
text-decoration: none | underline | overline | line through | blink;
 Examples:
h2 { text-decoration: line through; }
This text is underlined.
This text has a line through it.
40
This text is overlined.

CSS - Styling Text
Text Indent
 You can indent the first line of text in an HTML element with the
following:
text-indent: length | percentage(%);
Text Direction
 You can sets the text direction
direction: ltr | rtl;
 For the direction property to affect reordering in inline
elements, the unicode-bidi property’s value must be embed or
override.
41

CSS - Styling Text
unicode-bidi
 unicode-bidi: normal | embed | bidi-override;
 The meanings of the values are:
• normal: The element does not open an additional level of
embedding with respect to the bidirectional algorithm. For
inline elements, implicit reordering works across element
boundaries.
• embed: If the element is inline, this value opens an additional
level of embedding with respect to the bidirectional algorithm.
Inside the element, reordering is done implicitly.
42

CSS - Styling Text
❑ bidi-override: For inline elements this creates an override. For
block container elements, this creates an override for inline-
level descendants not within another block container element.
This means that inside the element, reordering is strictly in
sequence according to the ’direction’ property; the implicit part
of the bidirectional algorithm is ignored.
Example: div {
direction: rtl;
unicode-bidi: bidi-override; }
<div> Hebrew and Arabic are written from right to left. </div>
This is displayed as:
43

CSS - Styling Text
Text Transform
 You can control the case of letters in an HTML element with the
following:
text-transform: none | capitalize | lowercase | uppercase;
Example:
h3 { text-transform: uppercase;}
White Space
 You can control the whitespace in an HTML element with the
following:
white-space: normal | pre | nowrap | pre-wrap | pre-line;
44

CSS - Styling Text
 This property declares how white space(tab, space, etc) and
line break(carriage return, line feed, etc.) inside the element is
handled. Values have the following meanings:
• normal: This value directs user agents to collapse sequences of
white space, and break lines as necessary to fill line boxes.
• pre: This value prevents user agents from collapsing sequences
of white space. Lines are only broken at preserved newline
characters.
• nowrap: This value collapses white space as for ’normal’, but
suppresses line breaks within text.
45

CSS - Styling Text
• pre-wrap: This value prevents user agents from collapsing
sequences of white space. Lines are broken at preserved
newline characters, and as necessary to fill line boxes.
• pre-line: This value directs user agents to collapse sequences
of white space. Lines are broken at preserved newline
characters, and as necessary to fill line boxes.
❑ The ‘white-space’ processing model is as follows:
1. Each tab (U+0009), carriage return (U+000D), or space
(U+0020) character surrounding a linefeed (U+000A)
character is removed if ’white-space’ is set to ’normal’,
’nowrap’, or ’pre-line’.
46

CSS - Styling Text
2. If ’white-space’ is set to ’pre’ or ’pre-wrap’, any sequence of
spaces (U+0020) unbroken by an element boundary is treated
as a sequence of non-breaking spaces. However, for ’pre-wrap’,
a line breaking opportunity exists at the end of the sequence.
3. If ’white-space’ is set to ’normal’ or ’nowrap’, linefeed characters
are transformed for rendering purpose into one of the following
characters: a space character, a zero width space character
(U+200B), or no character (i.e., not rendered), based on the
content script.
4. If ’white-space’ is set to ’normal’, ’nowrap’, or ’pre-line’, every
tab (U+0009) is converted to a space (U+0020) any space
(U+0020) following another space (U+0020) is removed.
47

Practice
48
1. Write a CSS that uses background image and aligns
paragraphs to right, with red text color.
2. Write internal CSS that gives extra spaces between letters
and capitalize all <h1> tags in HTML page

CSS - Styling Fonts
Font
 The font property can set the style, weight, variant, size, line
height and font:
font: [ [ font-style || font-variant || font-weight] || font-size [
/line-height] || font-family ];
 Example:
font: italic bold normal small/1.4em Verdana, sans-serif;
 The above would set the text of an element to an italic style a
bold weight a normal variant a relative size a line height of
1.4em and the font to Verdana or another sans-serif typeface.
49

CSS - Styling Fonts
Font -Family
 You can set what font will be displayed in an element with the
font-family property. There are 2 choices for values: family-
name, generic family.
 Syntax:
font-family: family-name, generic family;
 If you set a family name it is best to also add the generic
family at the end. As this is a prioritized list. So if the user does
not have the specified font name, it will use the same generic
family.
font-family: Verdana, sans-serif;
50

CSS - Styling Fonts
Font Size
 You can set the size of the text used in an element by using the
font-size property.
font-size: absolute size | relative size | length | percentage(%);
 Absolute sizes are:
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
51

CSS - Styling Fonts
 The following table provides user agent guidelines for the
absolute-size mapping to HTML heading and absolute font-
sizes.
 Relative sizes are:
• larger
• smaller
 A relative-size is interpreted relative to the table of font sizes
and the font size of the parent element.
52
CSS absolute-size
values
xx-small x-
small
small medium large x-large xx-large
HTML font sizes 1 2 3 4 5 6 7

CSS - Styling Fonts
 For example, if the parent element has a font size of medium,
a value of larger will make the font size of the current element be
large.
 If the parent element’s size is not close to a table entry, the
user agent is free to interpolate between table entries or round
off to the closest one.
Length Units in CSS
 There are two types of length units: relative and absolute.
Relative length units specify a length relative to another length
property. Style sheets that use relative units can more easily scale
from one output environment to another.
53

CSS - Styling Fonts
 The absolute units consist of the physical units (in, cm, mm, pt,
pc) and the px unit:
• in: inches — 1in is equal to 2.54cm.
• cm: centimeters
• mm: millimeters
• pt: points — the points used by CSS are equal to 1/72nd of 1
inch.
• pc: picas — 1pc is equal to 12pt.
• px: pixel units — 1px is equal to 0.75pt.
54

CSS - Styling Fonts
 Example: all the following are possible
 h1 { margin: 0.5in } /* inches */
 h2 { line-height: 3cm } /* centimeters */
 h3 { word-spacing: 4mm } /* millimeters */
 h4 { font-size: 12pt } /* points */
 h4 { font-size: 1pc } /* picas */
 p { font-size: 12px } /* px */
 Relative units are:
• em: the current font-size of the relevant font
• ex: the x-height of the relevant font
55

CSS - Styling Fonts
 The em unit is equal to value of the font-size property of the
element on which it is used.
 The exception is when em occurs in the value of the font-size
property itself, in which case it refers to the font size of the
parent element.
 Example:
body
{
font-size: 12px;
text-indent: 3em; /* i.e., 36px - based on font-
size*/
}
56

CSS - Styling Fonts
 The ex means the x-height. The x-height is so called because it is
often equal to the height of the lowercase ‘x’. However, an ex is
defined even for fonts that do not contain an ‘x’.
 The x-height of a font can be found in different ways. Some fonts
contain reliable metrics for the x-height. If reliable font metrics are
not available, user agents may determine the x-height from the
height of a lowercase glyph. In the cases where it is impossible or
impractical to determine the x-height, a value of 0.5em should be
used.
57

CSS - Styling Fonts
Font Style
 You can set the style of text in an element with the font-style
property:
font-style: normal | italic | oblique;
Font Variant
 You can set the variant of text within an element with the font-
variant property:
font-variant: normal | small-caps;
Font Weight
 You can control the weight of text in an element with the font-
weight property:
font-weight: value;
58

CSS - Styling Fonts
 Possible values are:
lighter Normal 100 200
300 400 50 600
700 800 900 bold bolder
 The font-weight property selects the weight of the font. The
values 100 to 900 form an ordered sequence, where each
number indicates a weight that is at least as dark as its
predecessor. The keyword normal is synonymous with 400, and
bold is synonymous with 700. Keywords other than normal and
bold have been shown to be often confused with font names and
a numerical scale was therefore chosen for the 9-value list.
59

CSS - Styling Fonts
 The bolder and lighter values select font weights that are
relative to the weight inherited from the parent. It is computed as
follows:
Example:
body { font-weight: 600;}
p { font-weight: bolder } /* this is based on 600 & it changes to 900*/
60
inherited value Bolder Lighter
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

CSS - Styling Links
 User agents commonly display unvisited links differently from
previously visited ones.
 CSS provides the pseudo-classes ’a:link’ and ’a:visited’ to
distinguish them. Other pseudo-classes are:
• a:link pseudo-class applies for links that have not yet been
visited.
• a:visited pseudo-class applies once the link has been visited by
the user.
61

CSS - Styling Links
• a:hover pseudo-class applies while the user designates an
element with some pointing device, but does not activate it. For
example, a visual user agent could apply this pseudo-class
when the cursor (mouse pointer) hovers over a box generated
by the element.
• a:active pseudo-class applies while an element is being
activated by the user. For example, between the times the user
presses the mouse button and releases it.
• a:focus pseudo-class applies while an element has the focus
(accepts keyboard events or other forms of text input).
62

CSS - Styling Links
 Below are the various ways you can use CSS to style links.
▪ a:link {color: #009900;}
▪ a:visited {color: #999999;}
▪ a:hover {color: #333333;}
▪ a:focus {color: #333333;}
▪ a:active {color: #009900;}
 Remark: You must declare the a:link and a:visited before you
declare a:hover. Furthermore, you must declare a:hover before
you can declare a:active.
 Using the above code will style all links on your web page,
unless you declare a separate set of link styles for a certain area
of your webpage. Look at pseudo-classes sub-section for more.
63

CSS - Styling Links
List Style
 You can control the appearance of ordered and unordered
lists in one declaration with the list-style property:
list-style: image position type;
 Or you can control them individually
List Style Image
 You can use an image for the bullet of unordered lists with the
list-style property
list-style-image: url(“path to image file”);
 If you use an image, it is a good idea to declare the list-style-
type also in case the user has images turned off.
64

CSS - Styling Links
List Style Position
 You can control the position of ordered and unordered lists
with the list-style-position property. It specifies if the list-item
markers should appear inside or outside the content flow.
list-style-position: inside | outside;
List Style Type
 You can control the type of bullet ordered and unordered lists
use with the list-style-type property.
list-style-type: value;
 Values
None disc circle square decimal decimal-leading-zero
lower-roman upper-roman lower-alpha upper-alpha lower-Greek
lower-latin upper-latin Armenian Georgian
65

CSS BOX MODEL
 In CSS, the term box model is used when talking about design
and layout. The CSS box model is essentially a box that wraps
around HTML elements, and it consists of: margins, borders,
padding, and the actual content.
 The box model allows us to place a border around elements
and space elements in relation to other elements.
 The image below illustrates the box model.
66

CSS BOX MODEL
 Explanation of the different parts:
• Margin - Clears an area around the border. The margin does
not have a background color, and it is completely transparent
• Border - A border that lies around the padding and content.
The border is affected by the background color of the box
• Padding - Clears an area around the content. The padding is
affected by the background color of the box
• Content - The content of the box, where text and images
appear
 In order to set the width and height of an element correctly in
all browsers, you need to know how the box model works.
67

CSS BORDER
Border
 You can set the color, style and width of the borders around an
element in one declaration by using the border property.
 border: color style width;
 Or you can set each property individually
 Example:
border: 1px solid #333333;
Border Color
 You can set the color of a border independently with the
border-color property.
border-color: color name | hexadecimal number | RGB color
code | transparent;
68

CSS BORDER
Border Width
 You can set the width of a border independently with the
border-width property.
border-width: length | thin | medium | thick;
 Or you can set the elements for each border side individually
Border Bottom
 You can set the color, style and width of the bottom border
around an element in one declaration with the border-bottom
property.
border-bottom: color style width;
 Or you can set each value individually
 Example: border-bottom: 1px solid #333333;
70

CSS BORDER
Border Bottom Color
 You can set the color of the bottom border around an element
with the border-bottom-color property.
 border-bottom-color: value;
 You can set the style of the bottom border around an element
with the border-bottom-style property:
border-bottom-style: value;
Border Bottom Width
 You can set the width of the bottom border around an element
with the border-bottom-width property.
border-bottom-width: value;
71

CSS BORDER
Border Left
 You can set the color, style and width of the left border around
an element with the border-left property.
border-left: color style width;
 Example:
border-left: 1px solid #333333;
Border Left Color
 You can set the color of the left border around an element with
the border-left-color property.
border-left-color: value;
72

CSS BORDER
Border Left Style
 You can set the style of the left border around an element with
the border-left-style property. border-left-style: value;
Border Left Width
 You can set the width of the left border around an element
with the border-left-width property. border-left-width: value;
Border Right
 You can set the color, style and width of the right border
around an element in one declaration with the border-right
property. border-right: color style width;
 Example: border-right: 1px solid #333333;
73

CSS MARGIN
 The margin clears an area around an element outside the border. The
margin does not have a background color, and is completely transparent.
 The top, right, bottom, and left margin can be changed independently using
separate properties. A shorthand margin property can also be used, to change
all margins at once.
74
Property Description Values
margin A shorthand property for setting the
margin properties in one declaration
margin-top
margin-right
margin-bottom
margin-left
margin-bottom Sets the bottom margin of an element Auto
length
%
margin-left Sets the left margin of an element auto
length
%
margin-right Sets the right margin of an element auto
length
%
margin-top Sets the top margin of an element auto
length
%

CSS MARGIN
 Example:
#A {
margin: 4em;
border: 1px solid red;
background: #FCF2BE;
}
#B {
margin-top: 2em;
margin-right: 250px;
margin-bottom: 1em;
margin-left: 4em;
background: #FCF2BE;
}
body {
margin: 0 10%;
background-color: #BBE09F;
}
75

CSS PADDING
76
 The padding clears an area around the content (inside the
border) of an element.
 The padding is affected by the background color of the
element.
 The top, right, bottom, and left padding can be changed
independently using separate properties.
 A shorthand padding property can also be used, to change all
padding at once.
 Syntax:
padding: length | percentage | auto | inherit

CSS PADDING
77
 Examples:
 padding: 10px; /* Applied to all sides. */
 padding: 10px 6px; /* First is top and bottom, second is left
and right. */
 padding: 10px 6px 4px; /* First is top, second is left and
right, third is bottom. */
 padding: 10px 6px 4px 10px; /* Applied clockwise to top,
right, bottom, and left edges consecutively. */

CSS PADDING
78
 If you provide only two values, the first one is used for the top
and the bottom edges, and the second one is used for the left
and right edges:
{ padding: top/bottom right/left; }
 The syntax for three values is as follows:
{ padding: top right/left bottom; }
 Here, the first value is used for top, second value for left and
right, and third value for left.
 Padding is applied in clockwise direction.

CSS PADDING
79
 Other properties
Property Description Values
Padding A shorthand property for setting all the
padding properties in one declaration
padding-top
padding-right
padding-bottom
padding-left
padding-bottom Sets the bottom padding of an element length
%
padding-left Sets the left padding of an element length
%
padding-right Sets the right padding of an element length
%
padding-top Sets the top padding of an element length
%

Practice
80
1. Write a CSS that creates a <p> tag that has silver dotted
borders around it.
2. Based on the above, change the top padding to 10, and 30
and see the effect.

CSS – Styling Tables
81
Table Borders
 To specify table borders in CSS, use the shorthand border
property.
border: border-width border-style border-color;
 The example below specifies a black border for table, th, and
td elements:
table, th, td {
border: 1px solid black; }
 Notice that the table in the example above has double
borders.

82
 This is because both the table, th, and td elements have
separate borders.
 Related properties which take the same value as border are:
 border-left: border-width border-style border-color;
 border-right: border-width border-style border-color;
 border-top: border-width border-style border-color;
 border-bottom: border-width border-style border-color;

84
Border Width
 The border width properties specify the width of the border
area.
 border-width: value;
 Value can be:
• thin: a thin border.
• medium: a medium border.
• thick: a thick border.
• length: the border’s thickness has an explicit value. E.g. 10px

85
 If there is only one component value, it applies to all sides.
 If there are two values, the top and bottom borders are set to
the first value and the right and left are set to the second.
 If there are three values, the top is set to the first value, the left
and right are set to the second, and the bottom is set to the third.
 If there are four values, they apply to the top, right, bottom,
and left, respectively.
Example (top, right, bottom, and left):
h1 { border-width: thin } /* thin thin thin thin */
h1 { border-width: thin thick } /* thin thick thin thick */
h1 { border-width: thin thick medium } /* thin thick medium thick */

86
 Related properties that take the same value as border-width
are:
◼ border-top-width: value;
◼ border-right-width: value;
◼ border-bottom-width: value;
◼ border-left-width: value;
◼ border-width: value;
Border Color
 The border-color property sets the color of the four borders.
border-color: color | transparent;
 The border-color property can have from one to four
component values, and the values are set on the different sides of
the table just like border-width.

87
 Related properties that take the same value as border-color
are:
 border-top-color: value;
 border-right-color: value;
 border-bottom-color: value;
 border-left-color: value;
Collapse Borders
 The border-collapse property sets whether the table borders
are collapsed into a single border or separated:
border-collapse: collapse | separate;

88
 Example:
table{
border-collapse:collapse; }
table, th, td{
border: 1px solid black; }
Empty Cells
 In the separated borders model, this property controls the
rendering of borders and backgrounds around cells that have no
visible content. Empty cells and cells with the ’visibility’ property
set to ’hidden’ are considered to have no visible content.
 Syntax:
empty-cells: show | hide;

89
Border Spacing
 The lengths specify the distance that separates adjoining cell
borders. If one length is specified, it gives both the horizontal and
vertical spacing. If two are specified, the first gives the horizontal
spacing and the second the vertical spacing.
border-spacing: length;
 The values for border-spacing are two length measurements.
The horizontal value comes first and applies between columns.
The second measurement is applied between rows. If you provide
one value, it will be used both horizontally and vertically. The
default setting is 0, causing the borders to double up on the
inside grid of the table.

90
 These are the style rules used to create the custom border
spacing.
table {
border-collapse: separate;
border-spacing: 15px 3px;
border: none; /* no border around the table itself */
}
td {
border: 2px solid purple; /* borders around the cells */
}

91
Table Width and Height
 Width and height of a table is defined by the width and
height properties. The example below sets the width of the table
to 100%, and the height of the th elements to 50px:
table{ width:100%; /*as wide as the screen*/ }
th{ height:50px; }
Table Text Alignment
 The text in a table is aligned with the text-align and vertical-
align properties. The text-align property sets the horizontal
alignment, like left, right, or center:
td{ text-align:right; }

92
Vertical Alignment
 The vertical-align property of each table cell determines its
alignment within the row. Each cell’s content has a baseline, a top,
a middle, and a bottom, as does the row itself. In the context of
tables, values for vertical-align have the following meanings:
• baseline: The baseline of the cell is put at the same height as the
baseline of the first of the rows it spans.
• top: The top of the cell box is aligned with the top of the first
row it spans.
• bottom: The bottom of the cell box is aligned with the bottom of
the last row it spans.
• middle: The center of the cell is aligned with the center of the
rows it spans.

93
• sub, super, text-top, text-bottom, <length>, <percentage>:
These values do not apply to cells; the cell is aligned at the
baseline instead.

94
Table Padding
 To control the space between the border and content in a
table, use the padding property on td and th elements:
td{ padding:15px; }
Table Color
 The color of the borders, and the text and background color of
th elements can be specified:
table, td, th{
border:1px solid green; }
th{
background-color:green;
color:white; }

Classes and Visibility
95
CSS Class and ID
o CSS CLASS
 Controlling the way all HTML elements look can be useful, but
also limiting. It's excellent to be able to change every paragraph,
table cell or image with one line of CSS code, but sometimes
you'll want to change only few paragraphs or images, not all of
them. You can add CSS code through the style attribute of each
element, but for more elements that method gets too complicated.
 For example, paragraph can be defined in CSS file as follows:
p { font-size: small;
color: #333333
}

96
 However, let’s say you want to change the word "sentence" in
the paragraph formatted by the above CSS to green bold text,
while leaving the rest of the sentence untouched. This can be done
by using class.
 There are two types of classes – generic classes that can be
applied to any element, and classes that can be applied only to
a certain type of HTML element.
 Let's start with generic classes. Their selector starts with a dot
(.), which states that it is a class. You can name it anything you
want: .important { background-color: #FFFFDE; }
.emphasis { font-family: Verdana; }
.boooring { color: Gray; }

97
 To apply a class to a certain HTML element, use its class
attribute where you state the class name without the dot.
<div class="emphasis">The big match today …</div>
<i class="boooring">This sentence looks boring</i>
 You can also use classes which can be applied only to certain
HTML elements. Selectors of these classes start with the HTML
element name, followed with the dot and the class name:
div.big {
font-weight: bold;
font-size: 16pt; }
 These classes can be applied only to a specified HTML
element, in this case a DIV element.

98
<div class="big">Big bold text.</div>
<span class="big">Normal text - class not applied.</span>
 Example: in your paragraph, you put this:
<span class="greenboldtext">sentence</span>
 Then in the CSS file, add this style selector:
.greenboldtext {
font-size: small;
color: #008080;
font-weight: bold;
}

99
Pseudo Classes
 Pseudo-classes are classes that define tag states. Most
commonly, these are used to make link styles change when the
mouse pointer hovers over a hyperlink, hyperlink is clicked, etc.
Pseudo class Link state
a:link Normal link
a:visited Already visited link
a:hover Mouse hovers the link
a:active User is clicking on the link

100
 Example:
a:link {
text-decoration: underline;
font-weight: normal;
color: #003300;
}
a:visited {
text-decoration: underline;
font-weight: normal;
color: #999999;
}

101
CSS ID
 IDs are similar to classes, except once a specific ID has been
declared it cannot be used again within the same HTML file. The
syntax of ID selectors is very similar to classes, but instead of a
dot you must use a hash sign (#).
 The HTML content is:
<div id="container"> I was asleep, but my heart was awake.
</div>
 The CSS that formats the HTML content:
#container{
width: 80%;
padding: 20px; }

Practice
102
1. Write an external CSS that uses Class ID to format DIV
element text to blue, font size 20, and background to silver.
2. Write a CSS that changes visited links to yellow, and active
links to green.
3. Write a CSS that creates lists that use small Roman numbers.

CSS Display and Visibility
103
 The display property specifies if/how an element is displayed.
The syntax is as follows:
display: none | block | inline;
 A value none hides an element, and it will not take up any
space. The element will be hidden, and the page will be
displayed as if the element is not there.
 A block element is an element that takes up the full width
available, and has a line break before and after it. Examples of
block elements:
<h1>
<p>
<div>

104
 An inline element only takes up as much width as necessary,
and does not force line breaks. Examples of inline elements:
<span>
<a>
 Changing an inline element to a block element, or vice versa,
can be useful for making the page look a specific way, and still
follow web standards.
 Example:
li { display: inline; }

Example:
<html>
<head>
<title>Display and
Visibility</title>
li { display: inline;}
a { display: block; }
</style>
</head>
<body>
There are different types of mini
computers:
<ol>
<li>Desktop</li>
<li>Laptop</li>
<li>Palmtop</li>
</ol>
<a href="here.html"> first link
</a>
<a href="there.html"> second link
</a>
</body>
</html>
105

106
Fig a) Layout of page with no CSS b) changing display to inline, and block
❑ The visibility property specifies if an element should be visible
or hidden. visibility: hidden | visible;
❑ Hidden hides an element, but it will still take up the same space
as before. The element will be hidden, but still affect the
layout.

107
Float
 With float property, an element can be pushed to the left or
right, allowing other elements to wrap around it. Float is very
often used for images, but it is also useful when working with
layouts.
 Elements are floated horizontally, this means that an element
can only be floated left or right, not up or down. A floated
element will move as far to the left or right as it can. Usually this
means all the way to the left or right of the containing element.
The elements after the floating element will flow around it. The
elements before the floating element will not be affected.
 The syntax is: float: left | right | none;

108
 The values are:
• left: The element generates a block box that is floated to the
left. Content flows on the right side of the box, starting at the
top (subject to the ’clear’ property).
• right: Similar to ’left’, except the box is floated to the right,
and content flows on the left side of the box, starting at the
top.
• none: The box is not floated.

109
Positioning Basics
 CSS provides several methods for positioning elements on the
page.
 They can be positioned relative to where they would normally
appear in the flow, or removed from the flow altogether and
placed at a particular spot on the page.
 You can also position an element relative to the browser
window (technically known as the viewport in the CSS
Recommendations) and it will stay put while the rest of the page
scrolls.
 Syntax:
position: static | relative | absolute | fixed;

110
 The values are:
• static: This is the normal positioning scheme in which elements
are positioned as they occur in the normal document flow.
Static positioned elements are not affected by the top, bottom,
left, and right properties.
• relative: Relative positioning moves the box relative to its
original position in the flow. The distinctive behavior of relative
positioning is that the space the element would have occupied
in the normal flow is preserved.

111
• absolute: Absolutely positioned elements are removed from
the document flow entirely and positioned relative to a
containing element.
• Unlike relatively positioned elements, the space they would
have occupied is closed up.
• In fact, they have no influence at all on the layout of
surrounding elements.
 An absolute position element is positioned relative to the first
parent element that has a position other than static.
 If no such element is found, the containing block is <html>.

112
• fixed: The distinguishing characteristic of fixed positioning is
that the element stays in one position in the window even when
the document scrolls. Fixed elements are removed from the
document flow and positioned relative to the browser window
(or other viewport) rather than another element in the
document.
 Fixed positioned elements are removed from the normal flow.
The document and other elements behave like the fixed
positioned element does not exist. Fixed positioned elements can
overlap other elements.

Example:
<html>
<head>
<script type=”text/css”>
em {
position: relative;
top: 30px;
left: 60px;
background-color: fuchsia;
}
</script>
</head>
<body>
<p> Along the road he came
upon a man who had
<em>never worn any trouser
</em>, and who was trying
to put on a pair. So he had
fastened them to tree …
</p>
</body>
</html>
114

115
Fig When an element is positioned with the relative method

116
Z-index
 When elements are positioned outside the normal flow, they
can overlap other elements. The z-index property specifies the
stack order of an element i.e. which element should be placed
in front of, or behind, the others.
Syntax: z-index: value| auto;
An element can have a positive or negative stack order.
Example: img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1; }

117
 An element with greater stack order is always in front of an
element with a lower stack order. If two positioned elements
overlap, without a z-index specified, the element positioned
last in the HTML code will be shown on top.
Example:
#A {
z-index: 10;
position: absolute;
top: 200px; left: 200px;
}
#B {
z-index: 5;
position: absolute;
}
#C {
z-index: 1;
position: absolute;
}
<body>
<p id="A"><img src="A.gif" alt="A" /></p>
<p id="B"><img src="B.gif" alt="B" /></p>
<p id="C"><img src="C.gif" alt="C" /></p>
</body>

118
Fig Changing the stacking order with the z-index property.

120
 url: The user agent retrieves the cursor from the resource
designated by the URL.
 If the user agent cannot handle the first cursor of a list of
cursors, it should attempt to handle the second, etc.
 If the user agent cannot handle any user-defined cursor, it must
use the generic cursor at the end of the list.
Example:-
:link, :visited {
cursor: url(example.svg#linkcursor), url(hyper.cur), pointer
}

121
Opacity
 Creating transparent images with CSS is easy using opacity
property. Firefox uses the property opacity:x for transparency,
while Internet Explorer uses filter:alpha(opacity=x).
 In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower
value makes the element more transparent.
 In Internet Explorer (filter:alpha(opacity=x)) x can be a value
from 0 - 100. A lower value makes the element more transparent.
 Example:
<img src="klematis.jpg" width="150" height="113"
alt="klematis" style="opacity:0.4; filter:alpha(opacity=40);" />

122
Fig: The effect of opacity on image

Chapter 3 - CSS.pdf

More Related Content

Similar to Chapter 3 - CSS.pdf (20)

Recently uploaded (20)

Chapter 3 - CSS.pdf