CHAPTER 3

CASCADED STYLE SHEETS (CSS)

By.Abrahim A. 1
Outline
• Why use style sheets?,
• HTML vs. CSS,
• Anatomy of a CSS Rule,
• Linking HTML and CSS,

By.Abrahim A. 2
Introduction to CSS
• CSS stands for Cascading Style Sheet.
• A CSS allows you to separate web sites HTML content from its style.
• We use HTML file to arrange the content.
• All of the presentation/formatting like fonts, colors, background,
borders, text formatting, link effects, etc. 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.
• Using CSS allows a designer to create a standard set of commands
that controls the style of all subsequent pages.
• These commands are embedded inside the web page or from an
external file/page.

By.Abrahim A. 3
Introduction to CSS…
• 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 separates the layout and the styles of a web page.

• 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.
By.Abrahim A. 4
Introduction to CSS…
Styles Solved a Big Problem
• HTML was never intended to contain tags for formatting a document.
• HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
• The layout of the document was supposed to be taken care of by the browser,
without using any formatting tags.

• When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers.
• Development of large web sites, where fonts and color information were added to
every single page, became a long and expensive process.
• To solve this problem, W3C created CSS.

• In HTML 4.0, all formatting could be removed from the HTML document, and
stored in a separate CSS file.
• All browsers support CSS today.

By.Abrahim A. 5
Introduction to CSS…
• 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.

Benefits of CSS
• The benefits of using style sheets are:
• 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.

By.Abrahim A. 6
Benefits
• Separation of style and content has many benefits, but has only become practical in recent
years due to improvements in popular web browser‘s CSS implementations
• Speed: Overall, user‘s experience of a site utilizing style sheets will generally be quicker
than sites that don‘t use the technology.
• Maintainability: Holding all the presentation styles in one file significantly reduces
maintenance time and reduces the chance of human errors, thereby improving
presentation consistency.
• Accessibility: Sites that use CSS with either XHTML or HTML are easier to tweak so that
they appear extremely similar in different browsers (Explorer, Mozilla, Opera, Safari, etc.).
• Customization: If a page's layout information is all stored externally, a user can decide to
disable the layout information entirely, leaving the site's bare content still in a readable
form.
• Consistency: Because the semantic file contains only the meanings an author intends to
convey, the styling of the various elements of the document's content is very consistent.
• Portability:
CSS Revisions/Levels
• There are three levels/versions of CSS:
• CSS1,
• CSS2, and
• CSS3

CSS 1
• The first CSS specification to become an official W3C
Recommendation is CSS level1
• It was published in December 1996.
• 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

By.Abrahim A. 8
CSS Revisions/Levels…
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
• CSS 2 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.

By.Abrahim A. 9
CSS Revisions/Levels..
CSS3
• 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.

By.Abrahim A. 10
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.
• Usually, it is the HTML tags to be styled. E.g. <p>, <h1>

• Each declaration consists of:

• property and
• a value.
• The property is the style attribute you want to change.
• Each property has a value.
By.Abrahim A. 11
.

By.Abrahim A. 12
CSS Syntax…
.

By.Abrahim A. 13
CSS Syntax…
• CSS declarations alway ends with a semicolon.
• Declaration 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;
}

By.Abrahim A. 14
By.Abrahim A. 15
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 are ignored by browsers.

• A CSS comment begins with /* and ends with */

/*This is a comment*/
p{
text-align:center;
/*This is another comment*/
font-family:arial;
}
By.Abrahim A. 16
Linking CSS to HTML
• Linking 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.

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

By.Abrahim A. 17
Linking CSS to HTML…
II. Creating Embedded Styles
• We use the <style> tag for this
• <style> tag has a property called type which should be set to text/css
for CSS styling.

• The format for this is shown in the example below:

<html>
<head>
<title>Styling with CSS<title>
<style type="text/css">
/*CSS Content Goes Here*/
p { color: red; text-align: center; }
</style>
</head>
<body>

By.Abrahim A. 18
Linking CSS to HTML…
• In internal 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
• you want different pages to have varying styles.

By.Abrahim A. 19
Linking CSS to HTML…
III. Creating an External Style Sheet
• An external CSS file can be created with any text or HTML editors
such as notepad or Dreamweaver.
• A CSS file contains no HTML, only CSS.

• You have to save the CSS file with the .css file extension.
• You can link to the file externally 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>
By.Abrahim A. 20
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.

By.Abrahim A. 21
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.
• Some style sheet properties are inherited 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.

• 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 style for body element, and let all the
text elements contained in the body inherit that style.
By.Abrahim A. 22
Inheritance…
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>
By.Abrahim A. 23
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 says h1s
should be purple?

• The style sheet specification has a hierarchical system that assigns

different weights to the various sources of style information.
• 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.
By.Abrahim A. 24
Conflicting styles: the Cascade…
• Generally speaking, the closer the style sheet is to the
content, the more weight it is given.
• Embedded style sheets have more weight than external style
sheets.
• Inline styles have more weight than embedded style sheets.
• 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.

By.Abrahim A. 25
Conflicting styles: the Cascade…
• For example, to make paragraph text blue always, use the
following rule:
p {color: blue !important;}

• Even if the browser encounters an inline style later in the

document, 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.

By.Abrahim A. 26
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.
• 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.

By.Abrahim A. 27
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:
<style type="text/css">
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.

By.Abrahim A. 28
Cascading style sheets:
• Cascading style sheet languages such as CSS allow style information
from several sources to be blended together.
• However, not all style sheet languages support cascading. To define
a cascade, authors specify a sequence of LINK and/or STYLE
elements.
• The style information is cascaded in the order the elements appear
in the HEAD.
• In the following example, we specify two alternate style sheets
named "compact".
• If the user selects the "compact" style, the user agent must apply
both external style sheets, as well as the persistent "common.css"
style sheet.
Cascading style sheets:
• If the user selects the "big print" style, only the alternate style sheet
"bigprint.css" and the persistent "common.css" will be applied.
<LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="big print" href="bigprint.css" type="text/css">
<LINK rel="stylesheet" href="common.css" type="text/css">
• Here is a cascade example that involves both the LINK and STYLE elements.
<LINK rel="stylesheet" href="corporate.css" type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css">
<STYLE type="text/css">
p.special { color: rgb(230, 100, 180) }
</STYLE>
Media-dependent cascades:
• A cascade may include style sheets applicable to different
media.
• Both LINK and STYLE may be used with the media attribute.
The user agent is then responsible for filtering out those
style sheets that do not apply to the current medium.
• In the following example, we define a cascade where the
"corporate" style sheet is provided in several versions: one
suited to printing, one for screen use and one for speech-
based browsers (useful, say, when reading email in the car).
Media-dependent cascades:
• The "techreport" stylesheet applies to all media.
• The color rule defined by the STYLE element is used for print and
screen but not for aural rendering.
<LINK rel="stylesheet" media="aural" href="corporate-aural.css"
type="text/css">
<LINK rel="stylesheet" media="screen" href="corporate-screen.css"
type="text/css">
<LINK rel="stylesheet" media="print" href="corporate-print.css"
type="text/css">
<LINK rel="stylesheet" href="techreport.css" type="text/css"> <STYLE
media="screen, print" type="text/css"> p.special { color: rgb(230, 100,
180) }
</STYLE>
Inheritance and cascading:
• When the user agent wants to render a document, it needs to
find values for style properties, e.g. the font family, font style,
size, line height, text color and so on.
• The exact mechanism depends on the style sheet language, but
the following description is generally applicable:
• The cascading mechanism is used when a number of style rules
all apply directly to an element.
• The mechanism allows the user agent to sort the rules by
specificity, to determine which rule to apply.
• If no rule can be found, the next step depends on whether the
style property can be inherited or not.
Inheritance and cascading:
• Not all properties can be inherited. For these properties the
style sheet language provides default values for use when
there are no explicit rules for a particular element.
• If the property can be inherited, the user agent examines the
immediately enclosing element to see if a rule applies to that.
• This process continues until an applicable rule is found.
• This mechanism allows style sheets to be specified compactly.
• For instance, authors may specify the font family for all
elements within the BODY by a single rule that applies to the
BODY element.
Preferred and alternate style sheets:
• HTML allows authors to associate any number of external
style sheets with a document.
• The style sheet language defines how multiple external
style sheets interact (for example, the CSS "cascade" rules).
• Users may select their favorite among these depending on
their preferences. For instance, an author may specify one
style sheet designed for small screens and another for
users with weak vision (e.g., large fonts).
• User agents should allow users to select from alternate
style sheets.
Specifying external style sheets:
• Authors specify external style sheets with the following
attributes of the LINK element:
• Set the value of href to the location of the style sheet file.
• The value of href is a URI.
• Set the value of the type attribute to indicate the
language of the linked (style sheet) resource.
Specifying external style sheets:
• This allows the user agent to avoid downloading a style
sheet for an unsupported style sheet language.
• Specify that the style sheet is persistent, preferred, or
alternate:
• To make a style sheet persistent, set the rel attribute to
"stylesheet" and don't set the title attribute.
• To make a style sheet preferred, set the rel attribute to
"stylesheet" and name the style sheet with the title attribute.
• To specify an alternate style sheet, set the rel attribute to
"alternate stylesheet" and name the style sheet with the title
attribute.
Specifying external style sheets:
• User agents should provide a means for users to view and pick from
the list of alternate styles.
• The value of the title attribute is recommended as the name of each
choice.
• <LINK href="mystyle.css" rel="stylesheet" type="text/css"> Setting
the title attribute makes this the author's preferred style sheet:

• <LINK href="mystyle.css" title="compact" rel="stylesheet"

type="text/css"> Adding the keyword "alternate" to the rel attribute
makes it an alternate style sheet:
• <LINK href="mystyle.css" title="Medium" rel="alternate stylesheet"
type="text/css">
Linking External Style Sheets

• For more information on external style sheets, please

consult the section on links and external style sheets.
• Authors may also use the META element to set the
document's preferred style sheet. For example, to set the
preferred style sheet to "compact" (see the preceding
example), authors may include the following line in the
HEAD:
• <META http-equiv="Default-Style" content="compact">
• The preferred style sheet may also be specified with HTTP
headers. The above META declaration is equivalent to the
HTTP header:
Linking External Style Sheets

• Default-Style: "compact"
• If two or more META declarations or HTTP headers specify
the preferred style sheet, the last one takes precedence.
HTTP headers are considered to occur earlier than the
documentHEAD for this purpose.
• If two or more LINK elements specify a preferred style
sheet, the first one takes precedence.
• Preferred style sheets specified with META or HTTP
headers have precedence over those specified with the
LINK element.
Selectors
• Selectors are used to declare which elements a style applies to, a
kind of match expression. Selectors may apply to all elements of a
specific type, or only those elements which match a certain
attribute
• A simple selector is either a type selector or universal selector
followed immediately by zero or more attribute selectors,
ID selectors, or pseudo-classes, in any order.
• The simple selector matches if all of its components match.
• A selector is a chain of one or more simple selectors separated by
combinators.
• Combinators are: whitespace, ">", and "+". Whitespace may appear
between a combinators and the simple selectors around it.
Selectors
• The elements of the document tree that match a selector
are called subjects of the selector.
• A selector consisting of a single simple selector matches any
element satisfying its requirements. Prepending a simple
selector and combinators to a chain imposes additional
matching constraints, so the subjects of a selector are
always a subset of the elements matching the rightmost
simple selector.
• One pseudo-element may be appended to the last simple
selector in a chain, in which case the style information
applies to a subpart of each subject.
Grouping

• When several selectors share the same declarations, they

may be grouped into a comma separated list.
• In this example, we condense three rules with identical
declarations into one. Thus,
H1 { font-family: sans-serif }
H2 { font-family: sans-serif } H3 {font-family: sans-serif} is
equivalent to:
H1, H2, H3 {font-family: sans-serif}
• CSS offers other "shorthand" mechanisms as well,
including multiple declarations and shorthand properties.
Universal selector
• The universal selector, written "*", matches the name of
any element type. It matches any single element in the
document tree.
• If the universal selector is not the only component of a
simple selector, the "*" may be omitted.
• For example:
• *[LANG=fr] and [LANG=fr] are equivalent.
• *.warning and .warning are equivalent.
• *#myid and #myid are equivalent.
Type selectors
• A type selector matches the name of a document
language element type.
• A type selector matches every instance of the element
type in the document tree.
• The following rule matches all H1 elements in the
document tree:
H1 { font-family: sans-serif }
Descendant selectors
• At times, authors may want selectors to match an element that is the
descendant of another element in the document tree (e.g., "Match those
EM elements that are contained by an H1 element").
• Descendant selectors express such a relationship in a pattern.
• A descendant selector is made up of two or more selectors separated by
whitespace. A descendant selector of the form "A B" matches when an
element B is an arbitrary descendant of some ancestor element A.
• For example, consider the following rules:
H1 { color: red }
EM { color: red }
• Although the intention of these rules is to add emphasis to text by
changing its color, the effect will be lost in a case such as:
• <H1>This headline is <EM>very</EM> important</H1>
• We address this case by supplementing the previous rules with a rule that
sets the text color to blue whenever an EM occurs anywhere within an H1:
H1 {color: red}
EM {color: red}
H1 EM {color: blue}
• The third rule will match the EM in the following fragment:
<H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1>
The following selector:
DIV * P
• matches a P element that is a grandchild or later descendant of a DIV
element. Note the whitespace on either side of the "*".
• The selector in the following rule, which combines descendant and
attribute selectors, matches any element that (1) has the "href" attribute set
and (2) is inside a P that is itself inside a DIV: DIV P *[href]
Child selectors

• A child selector matches when an element is the child of some element. A

child selector is made up of two or more selectors separated by ">".
• The following rule sets the style of all P elements that are children of
BODY:
BODY > P { line-height: 5.3 }
• The following example combines descendant selectors and child selectors:
DIV OL>LI P
• It matches a P element that is a descendant of an LI; the LI element must
be the child of an OL element; the OL element must be a descendant of a
DIV. Notice that the optional whitespace around the ">" combinators has
been left out.
• For information on selecting the first child of an element, please see the
section on the :firstchild pseudo-class below.
Adjacent sibling selectors
• Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject
of the selector. The selector matches if E1 and E2 share the same parent in the
document tree and E1 immediately precedes E2.
• In some contexts, adjacent elements generate formatting objects whose presentation
is handled automatically (e.g., collapsing vertical margins between adjacent boxes).
The "+" selector allows authors to specify additional style to adjacent elements.
• Thus, the following rule states that when a P element immediately follows a MATH
element, it should not be indented:
MATH + P {text-indent: 0}
• The next example reduces the vertical space separating an H1 and an H2 that
immediately follows it:
H1 + H2 {margin-top: -5mm}
• The following rule is similar to the one in the previous example, except that it adds an
attribute selector. Thus, special formatting only occurs when H1 has class="opener":
H1.opener + H2 {margin-top: -5mm}
Attribute selectors

• CSS2 allows authors to specify rules that match attributes

defined in the source document.
• Matching attributes and attribute values Attribute selectors
may match in four ways:
[att]
• Match when the element sets the "att" attribute, whatever
the value of the attribute.
[att=val]
• Match when the element's "att" attribute value is exactly
"val".
[att~=val]
Attribute selectors

• Match when the element's "att" attribute value is a space-separated list of

"words", one of which is exactly "val". If this selector is used, the words in the
value must not contain spaces (since they are separated by spaces).
[att|=val]
• Match when the element's "att" attribute value is a hyphen-separated list of
"words", beginning with "val". The match always starts at the beginning of the
attribute value. This is primarily intended to allow language subcode matches (e.g.,
the "lang" attribute in HTML) as described in RFC 1766 ([RFC1766]).
• Attribute values must be identifiers or strings. The case-sensitivity of attribute
names and values in selectors depends on the document language.
• For example, the following attribute selector matches all H1 elements that specify
the "title" attribute, whatever its value:
H1 [title] {color: blue;}
• In the following example, the selector matches all SPAN elements whose "class"
attribute has exactly the value "example":
• SPAN [class=example] {color: blue;}
• Multiple attribute selectors can be used to refer to several
attributes of an element, or even several times the same
attribute.
• Here, the selector matches all SPAN elements whose
"hello" attribute has exactly the value "Cleveland" and
whose "goodbye" attribute has exactly the value
"Columbus":
• SPAN [hello="Cleveland"] [goodbye="Columbus"] {color:
blue;}
• The following selectors illustrate the differences between
"=" and "~=". The first selector will match, for example,
the value "copyright copyleft copyeditor" for the "rel"
attribute. The second selector will only match when the
"href" attribute has the value "http://www.w3.org/".
• A[rel~="copyright"]
• A[href="http://www.w3.org/"]
• The following rule hides all elements for which the value
of the "lang" attribute is "fr" (i.e., the language is French).
• *[LANG=fr] {display: none}
• The following rule will match for values of the "lang" attribute
that begin with "en", including "en", "en-US", and "en-cockney":
• *[LANG|="en"] {color: red}
• Similarly, the following aural style sheet rules allow a script to be
read aloud in different voices for each role:
• DIALOGUE [character=romeo]
• {voice-family: "Lawrence Olivier", charles, male }
•
• DIALOGUE [character=juliet]
• {voice-family: "Vivien Leigh", victoria, female }
Default attribute values in DTDs
• Matching takes place on attribute values in the document tree. For document languages
other than HTML, default attribute values may be defined in a DTD or elsewhere. Style
sheets should be designed so that they work even if the default values are not included in
the document tree.
• For example, consider an element EXAMPLE with an attribute "notation" that has a
default value of "decimal". The DTD fragment might be
• <! ATTLIST EXAMPLE notation (decimal,octal) "decimal">
• If the style sheet contains the rules
• EXAMPLE [notation=decimal] {/*... default property settings ...*/}
• EXAMPLE [notation=octal] {/*... other settings...*/} then to catch the cases where this
attribute is set by default, and not explicitly, the following rule might be added:
• EXAMPLE {/*... default property settings ...*/}
• Because this selector is less specific than an attribute selector, it will only be used for the
default case. Care has to be taken that all other attribute values that don't get the same
style as the default are explicitly covered.
Class selectors
• For style sheets used with HTML, authors may use the dot (.) notation as an alternative to the "~="
notation when matching on the "class" attribute. Thus, for HTML, "DIV.value" and
• "DIV [class~=value]" have the same meaning. The attribute value must immediately follow the
• ".".
• For example, we can assign style information to all elements with class~="pastoral" as follows:
• *.pastoral {color: green} /* all elements with class~=pastoral */
• or just
• .pastoral {color: green} /* all elements with class~=pastoral */ The following assigns style only to H1
elements with class~="pastoral":
• H1.pastoral {color: green} /* H1 elements with class~=pastoral */
• Given these rules, the first H1 instance below would not have green text, while the second would:
• <H1>Not green</H1>
• <H1 class="pastoral">Very green</H1>
• To match a subset of "class" values, each value must be preceded by a ".", in any order.
• For example, the following rule matches any P element whose "class" attribute has been assigned a list
of space-separated values that includes "pastoral" and "marine": P.pastoral.marine {color: green}
• This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".
ID selectors
• Document languages may contain attributes that are declared to be of type ID. What makes attributes of type
ID special is that no two such attributes can have the same value; whatever the document language, an ID
attribute can be used to uniquely identify its element. In HTML all ID attributes are named "id"; XML
applications may name ID attributes differently, but the same restriction applies.
• The ID attribute of a document language allows authors to assign an identifier to one element instance in the
document tree. CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a
"#" immediately followed by the ID value.
• The following ID selector matches the H1 element whose ID attribute has the value "chapter1":
• H1#chapter1 {text-align: center}
• In the following example, the style rule matches the element that has the ID value "z98y". The rule will thus
match for the P element:
<HEAD>
<TITLE>Match P</TITLE>
<STYLE type="text/css">
*#z98y { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Wide text</P>
</BODY>
ID selectors

• In the next example, however, the style rule will only match an H1 element that
has an ID value of "z98y". The rule will not match the P element in this example:
<HEAD>
<TITLE>Match H1 only</TITLE>
<STYLE type="text/css">
H1#z98y {letter-spacing: 0.5em}
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Wide text</P>
</BODY>
• ID selectors have a higher precedence than attribute selectors. For example, in
HTML, the selector #p123 is more specific than [ID=p123] in terms of the cascade.
Styling HTML with CSS
• Styling Backgrounds
• Styling Text
• Styling Fonts
• Styling Links
• Styling Lists
• Styling Tables
• CSS Class and ID

By.Abrahim A. 59
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:
• background color
• image
• position
• repeat
• attachment

Or you can set each property individually

By.Abrahim A. 60
Styling Backgrounds…
Background Color
• You can specifically declare a color for the background of an element.
background-color: value;
• Values:
• color name (e.g. red, green, blue, etc.)
• hexadecimal number(e.g. #ff0000, #00ff00,
#0000ff, etc)
• RGB color code (e.g. rgb(255,0,0), rgb(0, 255,
0), rgb(0,0,255), etc)
• Transparent
• Example:
<style type=”text/css”>
h1 { background-color: rgb(255, 255, 0); }
p { background-color: #0000FF; }
</style> By.Abrahim A. 61
Styling Backgrounds…
Background Attachment
• Are you 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
• This is done with the background-attachment property

background-attachment: value;
• Values:
• fixed
• Scroll

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.
background-repeat: no-repeat | repeat | repeat-x | repeat-y;
By.Abrahim A. 62
Styling Backgrounds…
• Example
<style type=“text/css”>
body {
background-image: url("tulips.jpg");
background-position: top right;
background-repeat: repeat;
}
</style>

Background Position
• You can position an image used for the background of an element
using the background-position property.
background-position: value;
By.Abrahim A. 63
Styling Backgrounds…
• Values:
• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right
• x-% y-%
• x-pos y-pos

• Example
p { background-image: url("tulips.jpg");
background-position: top right;
}
By.Abrahim A. 64
2. 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)

• Example:
p {color: blue;}
By.Abrahim A. 65
2. 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 overlap each other.
letter-spacing: value;

• Possible values are

• normal
• Length
• e.g. h2 { letter-spacing: 6; }

By.Abrahim A. 66
2. Styling Text…
Word Spacing
• You can adjust the space between words in the following manner. You
can use negative values.
word-spacing: value;
• Possible values are
• normal
• length

Line height
• You can set the distance between lines in the following way:
line-height: value;
• Possible values are
• normal
• number
• length
• Percentage(%)
By.Abrahim A. 67
2. Styling Text…
Text Align
• You can align text with the following:
text-align: value;

• Possible values are

• left
• right
• center
• Justify

• Examples:
This text is aligned left.
This text is aligned center.
This text is aligned right.
By.Abrahim A. 68
2. Styling Text…
Text Decoration
• You can decorate text with the following:
text-decoration: value;

• Possible values are

• none
• underline
• overline
• Line-through
• Blink

• Examples:
This text is underlined.
This text has a line through it.
This text is overlined.
By.Abrahim A. 69
2. Styling Text…
Text Transform
• You can control the case of letters in an (X)HTML element with the
following:
text-transform: value;

• Possible values are

• none
• capitalize
• lowercase
• Uppercase

• e.g.
h3 { text-transform: uppercase; }
By.Abrahim A. 70
2. Styling Text…
Text Indent
• You can indent the first line of text in an HTML element with the
following:
text-indent: value;

• Possible values are

• length
• percentage(%)

Text Direction
• You can sets the text direction
direction: value;

• Possible values are

• ltr (left to right)
• rtl (right to left)

By.Abrahim A. 71
2. Styling Text…
unicode-bidi
• Possible value:
• 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.
• 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.

By.Abrahim A. 72
2. Styling Text…
• For the direction property to affect reordering in inline elements,
the unicode-bidi property’s value must be embed or override.

• Example:
div {
direction: rtl;
unicode-bidi: bidi-override;
}
…
<div> Hebrew and Arabic are written from right to left. </div>

• This is displayed as:

By.Abrahim A. 73
2. Styling Text…
White Space
• You can control the whitespace in an HTML element with the following:
white-space: value;

• Possible values are

• normal
• pre
• nowrap
• pre-wrap
• pre-line

• This property declares how white space(tab, space, etc) and line
break(carriage return, line feed, etc.) inside the element is handled.
By.Abrahim A. 74
2. Styling Text…
• Values have the following meanings:
• normal: makes user agents to collapse sequences of white space,
and break lines as necessary to fill line boxes.
• pre: 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.
• 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.

By.Abrahim A. 75
3. Styling Fonts
Font
• The font property can set the style, weight, variant, size, line height and font-
type:
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.

By.Abrahim A. 76
3. 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

• 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;
By.Abrahim A. 77
3. Styling Fonts…
Font Size
• You can set the size of the text used in an element by using the font-size property.
font-size: value;

• The value can be:

• absolute size
• relative size
• length
• percentage(%)

• Absolute sizes are:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

By.Abrahim A. 78
3. Styling Fonts…
• The following table provides user agent guidelines for the
absolute-size mapping to HTML heading and absolute
font-sizes
CSS absolute- xx-small x-small small medium large x-large xx-large
size values
HTML font sizes 1 2 3 4 5 6 7

• Relative sizes are:

• larger
• smaller
By.Abrahim A. 79
3. Styling Fonts…
• A relative-size is interpreted relative to the table of font sizes and the font
size of the parent element.
• 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.

By.Abrahim A. 80
3. Styling Fonts…
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.

• 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 1in.
• pc: picas — 1pc is equal to 12pt.
• px: pixel units — 1px is equal to 0.75pt.

By.Abrahim A. 81
3. 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
By.Abrahim A. 82
3. Styling Fonts…
• Relative units are:
• em: the current font-size of the relevant font
• ex: the x-height of the relevant font

• 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*/
}

By.Abrahim A. 83
3. 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’.

By.Abrahim A. 84
3. Styling Fonts…
• 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.

• Example:
h1 { margin: 0.5em } /* em */
h1 { margin: 1ex } /* ex */

• Example:
h1 { line-height: 1.2em }
• This means the line height of ‘h1’ elements will be 20% greater than
the font size of the h1 elements.

By.Abrahim A. 85
3. Styling Fonts…
• On the other hand:
h1 { font-size: 1.2em }
• This means that the font-size of h1 elements will be 20%
greater than the font size inherited by h1 elements.

• What is the font size of H1?

body { font-size: 20pt;}
H1 {font-size: 1.2em;}
/* The font size of H1 is 24 */

By.Abrahim A. 86
3. Styling Fonts…
Font Style
• You can set the style of text in a element with the font-style property:
font-style: value;

• Possible values are

• normal
• itailc
• Oblique

• Font Variant
• You can set the variant of text within an element with the font-variant
property:
font-variant: value;

• Possible values are

• normal
• small-caps

By.Abrahim A. 87
3. Styling Fonts…
Font Weight
• You can control the weight of text in an element with the font-weight property:
font-weight: value;

• Absolute values are

• normal
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• Bold

Relative Values are:

• lighter
• bolder
By.Abrahim A. 88
3. Styling Fonts…
• 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.

By.Abrahim A. 89
3. Styling Fonts…
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

Example:
body { font-weight: 600;}
p { font-weight: bolder } /* this is based on 600 and it changes to 900*/

By.Abrahim A. 90
4. 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:
• The a:link pseudo-class applies for links that have not yet been visited.
• The a:visited pseudo-class applies once the link has been visited by the
user.
• The 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 mouse pointer
hovers over a box generated by the element.
• The 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.
• The a:focus pseudo-class applies while an element has the focus
(accepts keyboard events or other forms of text input).

By.Abrahim A. 91
4. Styling Links…
• Below are the various ways you can use CSS to style links.
a:link {
color: #009900;
text-decoration: overline;
}
a:visited {color: #999999;}
a:hover {color: #333333;}
a:focus {color: #333333;}
a:active {color: #009900;}
By.Abrahim A. 92
4. Styling Links…
• 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.

By.Abrahim A. 93
5. Styling Lists
List Style
• You can control the appearance of ordered and unordered
lists in one declaration with the list-style property
list-style: value value value;

• Values:
• image
• position
• type

• Or you can control them individually

By.Abrahim A. 94
5. Styling Lists…
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.

List Style Position

• You can control the position of ordered and unordered lists with the list-
style-position property
list-style-position: value;

• Values
• inside
• outside

By.Abrahim A. 95
5. Styling Lists…
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
By.Abrahim A. 96
6. Styling Tables
Table Borders
• To specify table borders in CSS, use the border property.
• 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.
• This is because both the table, th, and td elements have separate
borders.
By.Abrahim A. 97
6. Styling Tables…
Collapse Borders
• The border-collapse property sets whether the table borders are collapsed into a
single border or separated:
table{
border-collapse: collapse;
}
table, th, td{
border: 1px solid black;
}

By.Abrahim A. 98
6. Styling Tables…
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;
}

• The vertical-align property sets the vertical alignment, like top, bottom, or
middle:
td {
height: 50px;
vertical-align: bottom;
}

By.Abrahim A. 99
6. Styling Tables…
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%;
}
th{
height:50px;
}

By.Abrahim A. 100
6. Styling Tables…
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;
}

By.Abrahim A. 101
6. 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.

By.Abrahim A. 102
6. CSS Class…
• For example, paragraph can be defined in CSS file as follows:
p{
font-size: small;
color: #333333
}

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

By.Abrahim A. 103
6. CSS 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.

I. Generic Classes
• Their selector starts with a dot (.), which states that it is a class.
• You can name it anything you like:
.important { background-color: #FFFFDE; }
.emphasis { font-family: Verdana; }
.boooring { color: Gray; }

• To apply a class to a certain HTML element, use its class attribute where
you state the class name without the dot.
By.Abrahim A. 104
6. CSS Class…
<div class="emphasis">The big match today …</div>
<i class="boooring">This sentence looks boring</i>

II. Specific Classes

• 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.
<div class="big">Big bold text.</div>
<span class="big">Normal text - class not applied.</span>

By.Abrahim A. 105
6. CSS Class…
• 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;
}
By.Abrahim A. 106
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

By.Abrahim A. 107
Pseudo Classes…
• Example:
a:link {
text-decoration: underline;
font-weight: normal;
color: #003300;
}
a:visited {
text-decoration: underline;
font-weight: normal;
color: #999999;
}
By.Abrahim A. 108
CSS ID
• IDs are similar to classes, except once a specific ID has been declared it cannot be
used again within the same (X)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;
margin: auto;
border: 1px solid blue;
background: red;
}

By.Abrahim A. 109
7. 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.

By.Abrahim A. 110
7. 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

By.Abrahim A. 111
7. CSS Box Model…
• 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.

By.Abrahim A. 112
7. CSS Box Model…
Border
• You can set the color, style and width of the borders around an
element in one declaration by using the shorthand border
property.
border: 1px solid #333333;

• Values:
• width
• style
• color

• Or you can set each property individually

By.Abrahim A. 113
7. CSS Box Model…
Border Color
• You can set the color of a border independently with the
border-color property.
border-color: value;

• Values:
• color name
• hexadecimal number
• RGB color code
• transparent

By.Abrahim A. 114
7. CSS Box Model…
Border Style
• You can set the style of a border independently with the border-style
property.
border-style: value;

• Values:
• dashed
• dotted
• double
• groove
• hidden
• inset
• none
• outset
• ridge
• solid

By.Abrahim A. 115
7. CSS Box Model…

By.Abrahim A. 116
7. CSS Box Model…
Border Width
• You can set the width of a border independently with the border-
width property.
border-width: value;

• Values:
• Length
• Thin
• Medium
• Thick

• Or you can set the elements for each borders side individually
By.Abrahim A. 117
7. CSS Box Model…
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: 1px solid #333333;

• Values:
• Width
• style
• color
• Or you can set each value individually

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;

By.Abrahim A. 118
7. CSS Box Model…
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;

Border Left
• You can set the color, style and width of the left border around an element with the border-
left property.
border-left: 1px solid #333333;

• Values:
• style
• Width
• color

• Or you can set each value individually

By.Abrahim A. 119
7. CSS Box Model…
• Border Left Color
border-left-color: value;
• Border Left Style
border-left-style: value;
• Border Left Width
border-left-width: value;
Border Right
border-right: 1px solid #333333;

• Values:
• color
• style
• width
• Or you can set each value individually

By.Abrahim A. 120
7. CSS Box Model: 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.

Property Description Values

Margin A shorthand property for setting the margin-top
margin properties in one declaration 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 | %

By.Abrahim A. 121
• Example:
#A {
margin: 4em;
border: 1px solid red;
background: #FCF2BE;
}
#B {
margin-top: 2em;
margin-right: 250px;
margin-bottom: 1em;
margin-left: 4em;
border: 1px solid red;
background: #FCF2BE;
}
body {
margin: 0 10%;
border: 1px solid red;
background-color: #BBE09F;
}
7. CSS Box Model: CSS Padding
• 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
Examples:
padding: 10px; /* Applied to all sides. */
padding: 10px 6px; /* First is top & bottom, second is left & right. */

By.Abrahim A. 123
7. CSS Box Model: CSS Padding…
Property Description Values
Padding A shorthand property for setting all the padding-top
padding properties in one declaration 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

%

By.Abrahim A. 124
7. CSS Box Model: CSS Padding…
• Example:
blockquote {
padding-top: 1em;
padding-right: 3em;
padding-bottom: 1em;
padding-left: 3em;
background-color: #D098D4;
}
<body>
<blockquote>
Applying masks to the glasses is the most labor intensive part of the process. ….
</blockquote>
By.Abrahim A. 125
7. CSS Box Model: CSS Padding…

By.Abrahim A. 126
CSS Display and Visibility
• 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>
By.Abrahim A. 127
CSS Display and Visibility…
• 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; }

By.Abrahim A. 128
<html>
<head>
<title>Display and Visibility</title>
<style type="text/css">
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>
CSS Display and Visibility…

By.Abrahim A. 130
CSS Display and Visibility…
• 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.

By.Abrahim A. 131
CSS Display and Visibility…
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.
• The syntax is:
float: left | right | none;

• 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.
By.Abrahim A. 132
CSS Display and Visibility…
<html>
<head>
<title>Display and Visibility</title>
<style type="text/css">
p{
font-size: 24;
color: rgb(0,0,0);
}
.dide { float: left; }
</style>
</head>
<body>
<img class="dide" src="didessa.png">
<p> Deddessa is one of the tributaries of Blue Nile that starts from around Wolega and flows
west to join Abay. It starts from highlands of Wolega and it is joined by many streams to
form a big river before finally emptying into Blue Nile. </p>
</body>
</html>
By.Abrahim A. 133
CSS Display and Visibility…
Positioning Basics
• CSS provides several methods for positioning elements on the page.
• Syntax:
position: static | relative | absolute | fixed;

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

By.Abrahim A. 135
CSS Display and Visibility…
• 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 and hence they have no influence 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>.

• 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 rather than another element in the document.
• Fixed positioned elements are removed from the normal flow.
• Fixed positioned elements can overlap other elements.

By.Abrahim A. 136
CSS Display and Visibility…
• The actual position of an element is specified with four offset properties:
top/right/bottom/left: length | percentage | auto;

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

By.Abrahim A. 138
CSS Display and Visibility…
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.

• An element with greater stack order is always in front of an

element with a lower stack order.
By.Abrahim A. 139
Example:
#A {
z-index: 10;
position: absolute;
top: 200px; left: 200px;
}
#B {
z-index: 5;
position: absolute;
top: 225px; left: 175px;
}
#C {
z-index: 1;
position: absolute;
top: 250px; left: 225px;
}
<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>
CSS Display and Visibility…

By.Abrahim A. 141
CSS Display and Visibility…
• Cursor
• It is possible to set the type of cursor to be displayed on
HTML elements.
• This property specifies the type of cursor to be displayed
for the pointing device.

• Syntax:
cursor: url | auto | crosshair | default | pointer | move | e-
resize | ne-resize | nw-resize | n-resize | se-resize | sw-
resize | s-resize | w-resize | text | wait | help;
By.Abrahim A. 142