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.
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.
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.
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.
Introduction to 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.
 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 2.
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.
CSS Syntax…
CSS Syntax…
 CSS declarations always 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;
}
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;
}
 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>
 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>
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.
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>
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.
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.
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>
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.
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.
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.
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.
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.
Styling HTML with CSS
 Styling Backgrounds
 Styling Text
 Styling Fonts
 Styling Links
 Styling Lists
 Styling Tables
 CSS Class and ID
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
 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>

Background Image
 You can set an image for the background of an element .

background-image: url(path_to_image);
 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;
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;
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;
}
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;}
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; }
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(%)
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.
2. Styling Text…
Text Decoration
 You can decorate text with the following:

text-decoration: value;

 Possible values are

 none
 underline
 overline
 Line-through

 Examples:
This text is underlined.
This text has a line through it.
This text is overlined.
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; }
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)
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.
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:

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.
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.
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.
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;
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
 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
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.
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.
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
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*/
}
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’.
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.
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 */
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
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
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.
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*/
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).
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;}
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.
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

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
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
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.
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;
}
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;
}
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;
}
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;
}
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.
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.
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.
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>
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;
}
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
Pseudo Classes…
 Example:
a:link {
text-decoration: underline;
font-weight: normal;
color: #003300;
}
a:visited {
text-decoration: underline;
font-weight: normal;
color: #999999;
}
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;
}
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.
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
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.
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

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
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
7. CSS Box Model…
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
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;
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

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

 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. */
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

%
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>
7. CSS Box Model: CSS
Padding…
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> 
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; }
<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…
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.
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.
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>
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.
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.

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>
CSS Display and Visibility…
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.
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…
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;