Scribd
Upload
3 views

Lecture#7-8 CSS (1)

Uploaded by

riddaazainab512
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

Lecture#7-8 CSS (1)

Uploaded by

riddaazainab512
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 74

Web Technologies

Kamran
Lecture 7-8
Contents
1. CSS

2
CSS Introduction
 Cascading Style Sheets (CSS)
 Markup language, used to describe the
presentation of document
 Defines sizes, fonts, colors, layout,
etc.
 Improves content accessibility
 Improves flexibility
 Designed to separate presentation
from content
 Because of CSS all HTML presentation 3
Why “Cascading”?
 Priority scheme determining which
style rules apply to element
 Cascade priorities or weights are
calculated and assigned to the rules
 Child elements in the HTML DOM
tree inherit the styles from their
parent
 Can override them
 Control via !important rule

4
Why “Cascading”? (2)

5
Style Sheets Syntax
 CSS has simple syntax, based on
English words
 Contains a set of cascading rules
 Each rule consists of one or more
selectors and declaration block
 Declaration block consists of one or
more semicolon-terminated
declarations in curly braces
 Declaration consists
h1,h2,h3,h4,h5,h6 of property,
{ color: green } a
colon and value
6
Style Sheets Syntax (2)
 Selectors determine which element
the rule applies to:
 All elements of specific type
 Those that mach specific attribute
 Elements may be matched
depending on how they are nested
in the document (HTML)
 Examples:
h1 .title { color: green }

#menu li { padding-top: 8px }


7
Style Sheets Syntax (3)
 Pseudo-classes define further
behavior
 Appended to a selector
 :hover, :first-
letter, :visited, :active, :before, :a
fter
a:link {text-decoration: none}
 a:visited
Not all browsers support
{text-decoration: none} them fully
a:active {text-decoration: none}
a:hover {text-decoration: underline; color:
red}
.title:before { content: "»" }
.title:after { content: "«" }
8
Style Sheets Syntax (4)
 Three primary types of selectors:
 By tag:
h1 {font-face: Verdana}
 By element id:
#element_id {color:#FF0000}
 By element class name (only for HTML):
.class_name {border: 1px solid red}
 Selectors can be combined with
commas:
h1, .link, #top-link {font-weight: bold}

This will match <h1> tags, elements


9
Style Sheets Syntax (5)
 Match relative to element
placement:
p a {text-decoration: underline}

This will match all <a> tags that are


inside of <p>
 * p– *universal
{color: black}
selector:

This will match all child nodes of <p>


tag
img + .link {float:right}
 + selector – used to match “the
following” tag:
10
Style Sheets Syntax (5)
 > selector – matches direct child nodes
ofpelement:
> .error {font-size: 8px}

This will match all elements with class


error, direct children of <p> tag
 [ ]img[alt~=logo]
– match tag attributes
{border: none} by regular
expression:

This will match all <img> tags with alt


attribute containing the word logo
 There are more rules to select 11
Default Browser Styles
 Browsers have default CSS styles
 Used when there is no CSS
information or any other style
information in the document
 Silently inherited in all documents
 Caution: default styles differ in
browsers
 E.g. Firefox default page
background is white, while IE7 uses
about 5% gray background
12
Linking HTML and CSS
 HTML (content) and CSS
(presentation) can be linked in
three ways:
 Inline: the CSS rules in the style
attribute
 No selectors are needed
 Embedded: in the HTML in <style>
tag
 External: CSS rules are in separate
file
13
Linking HTML and CSS
(2)
 Inline styles have highest priority
 Then are the embedded styles
 External styles are last
 Using external files is highly
recommended
 Simplify the HTML document
 Benefit from browser's cache
 Inline styles are about to be
deprecated by the W3C
14
Inline Styles
 Inline CSS styles
 Individual element’s style defined
using style attribute
 Contains only declaration, no
selectors:
<p style="font-size:20pt; color:
#0000FF">

 Override any other styles


 Apply to all descendant elements
 Used for styles that are not needed
anywhere else in the Web site 15
Inline Styles: Example
inline-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>

16
Inline Styles: Example
inline-styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>

17
CSS Rules Precedence
 Inline CSS rules have precedence
over the external CSS rules:
precedence.html
<!DOCTYPE html …>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CSS Rules Precedence -
Example</title>
<style type="text/css"> span {color:red}
</style>
<link type="text/css" rel="stylesheet"
href="" />
</head>
<body>
<span>Some text</span>
<span style="color:Blue">Some text</span>
</body> 18
CSS Rules Precedence
 Inline CSS rules have precedence
over the external CSS rules:
precedence.html
<!DOCTYPE html …>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CSS Rules Precedence -
Example</title>
<style type="text/css"> span {color:red}
</style>
<link type="text/css" rel="stylesheet"
href="" />
</head>
<body>
<span>Some text</span>
<span style="color:Blue">Some text</span>
</body> 19
Embedded Styles
 Embedded in the HTML in the
<style> tag:
<style type="text/css">

 The <style> tag is placed in the


<head> section of the document
 Styles apply to the whole document
 type attribute specifies the MIME
type
 MIME is a describes the format of the
content
 Other MIME types include text/html, 20
Embedded Styles:
Example
embedded-
stylesheets.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Style Sheets</title>
<style type="text/css">
em {background-color:#8000FF;
color:white}
h1 {font-family:Arial, sans-serif}
p {font-size:18pt}
.blue {color:blue}
</style>
<head>
21
Embedded Styles:
Example (2)
…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text.
Here
is some text. Here is some text. Here is
some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html>
22
Embedded Styles:
Example (3)
…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text.
Here
is some text. Here is some text. Here is
some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html>
23
External CSS Styles
 External linking
 Separate pages can all use shared
style sheet
 Only modify a single file to change the
styles across your entire Web site
 link tag (with rel attribute)
 Specifies a relationship between
current document and
<link rel="stylesheet" another
type="text/css"
href="styles.css">
document

24
External CSS Styles (2)
@import
 Another way to link external CSS
files
 Example:
<style type="text/css">
@import url(styles.css);
</style>

 Not all browsers recognize such


rules
 You can specify this way browser-
specific styles (IE6 ignores the 25
External Styles:
Example
styles.css
/* CSS Document */

a { text-decoration: none }

a:hover { text-decoration: underline;


color: red;
background-color: #CCFFCC }

li em { color: red;
font-weight: bold }

ul { margin-left: 2cm }

ul ul { text-decoration: underline;
margin-left: .5cm }

26
External Styles:
Example (2)
external-
styles.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Importing style sheets</title>
<link type="text/css" rel="stylesheet"
href="styles.css" />
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<li>Milk</li>
…

27
External Styles:
Example (3)
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>
28
External Styles:
Example (4)
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>
29
Values in the CSS Rules
 Colors are specified in RGB format, in
hex form:
 Example: #A0A6AA
 Predefined color aliases exist: black,
blue, etc.
 Numeric values are specified in:
 Pixels, e.g. 12px
 Points, e.g. 10pt
 Inches, centimeters, millimeters
 E.g. 1in, 1cm, 1mm
 30
CSS Rules for Fonts
 color – specifies the color of the text
 font-size – size of font: xx-small, x-
small, small, medium, large, x-large,
xx-large, smaller, larger or numeric
value
 font-family – comma separated font
names
 Example: Verdana, Sans-Serif, etc.
 The browser loads the first one that is
available
 There should always be at least one 31
CSS Rules for Fonts (2)
 font-style – styles the font
 Values: normal, italic, oblique
 text-decoration – decorates the
text
 Values: none, underline, line-
trough, overline, blink
 text-align – defines the alignment
of text or other content
 Values: left, right, center, justify
32
Short Font Rules
 font
 Shorthand rule for setting multiple
font properties at the same time
font: italic normal bold 12px Verdana;

is equal to writing this:


font-style: italic;
font-variant: normal;
font-weight: bold;
font-size:12px;
font-family: Verdana;

33
Fonts
Live Demo
font-rules.html
Background CSS Rules
 background-color
 Solid color background
 background-image
 URL of image to be used as
background, e.g.:
background-image:url("back.gif");

 background-repeat
 repeat-x, repeat-y, repeat, no-
repeat
 background-attachment 35
Background CSS Rules
(2)
 background-position: specifies
vertical and horizontal position of
the background image
 Vertical position: top, center, bottom
 Horizontal position: left, center,
right
 Both can be specified in percentage
or other numerical values
background-position: top left;
 Examples:
background-position: -5px 50%;
36
Background Short Rule
 background: shorthand rule for setting
background properties at the same
time:
background: #FFF0C0 url("back.gif") no-
repeat fixed top;

is equal to writing:
background-color: #FFF0C0;
background-image: url("back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;

 Some browsers will not apply BOTH


color and image for background if 37
Background-image or
<img>?
 Background images allow you to
save many image tags from the
HTML
 Leads to less code
 More content-oriented approach
 All images that are not part of the
page content should be moved to
the CSS

38
Background Styles
Live Demo
background-
rules.html
Border CSS Rules
 border-width: thin, medium, thick or
numerical value (e.g. 10px)
 border-color: color alias or RGB
value
 border-style: none, hidden, dotted,
dashed, solid, double, groove, ridge,
inset, outset
 Each property can be defined
separately for left, top, bottom and
right
40
Border Short Rules
 border: shorthand rule for setting
border properties at once:
border: 1px solid red;

is equal to writing:
border-width:1px;
border-color:red;
border-style:solid;
 Specify different borders for the
sides via shorthand rules: border-
top, border-left, border-right,
border-bottom 41
Borders
Live Demo
border-rules.html
Width, Height CSS
Rules
 width – defines numerical value for
the width of element, e.g. 200px
 height – defines numerical value
for the height of element, e.g.
100px
 Important: not all elements and
browsers follow this value!
 Usually the height of an element is
defined by its content
 Common mistake is to apply height
43
Width /
Height
Live Demo
size-rules.html
Margin and Padding
 margin and padding define the
spacing around the element
 Numerical value, e.g. 10px or -5px
 Can be defined for each of the four
sides separately
 margin-top, padding-left, …
 margin is the spacing outside of the
border
 padding is the spacing between the
border and the content 45
Margin and Padding:
Short Rules
 margin: 5px;
 Sets all four sides to have margin of
5 px;
 margin: 10px 20px;
 Sets margins: top and bottom to
10px, left and right to 20px;
 margin: 1px 3px 5px 7px;
 Sets top, right, bottom, left margins
to 1px, 3px, 5px and 7px respectively
 Same shorthand rules apply for 46
The Box Model

47
Gecko and W3C vs. IE
 Major difference
between
browsers when
applying border,
padding and
width/height
 To avoid you
need either
“CSS hacks” or
just don’t
specify for the
same element
48
Margins and
Paddings
Live Demo
margins-paddings-
rules.html
CSS Rules for
Positioning
 position: defines the positioning of
the element, depending on the
parent elements
 The value is one of:
 static (default)
 relative – relative position according
to where the element would appear
with static position
 absolute – position according the
parent element
50
CSS Rules for
Positioning (2)
 Fixed and absolute positioned
elements “float” over the rest of
elements
 Moved to separate document layer
 Their position and size is ignored
when calculating the size of parent
element or position of surrounding
elements
 Ordered by their z-index

51
Positioning
Live Demo
positioning-rules.html
CSS Rules for
Positioning
 top, left, bottom, right: specifies
offset of absolute/fixed/relative
positioned element as numerical
values
 vertical-align: sets the vertical-
alignment of an element
 Usually used for table cells
 Values: baseline, sub, super, top,
text-top, middle, bottom, text-
bottom or numeric
53

Alignment and Z-
Index
Live Demo
alignments-and-z-index-
rules.html
Float CSS Rule
 float: the element “floats” above
the elements
 similar to position: absolute and
the align HTML property of <img>
tag
 element is taken into account when
rendering the surrounding text and
elements
 left: places the element on the left
 right: places the element on the
55
Clear CSS Rule
 clear
 Sets the sides of the element where
other floating elements are NOT
allowed
 Possible values: left, right, both
 This rule can be applied only to
“floating” elements

56
Floating Elements
Live Demo
float-rules.html
Opacity CSS Rule
 opacity: specifies the opacity of
the element
 Floating point number from 0 to 1
 Supported only by Safari browser
 For Mozilla use –moz-opacity CSS
rule
 For IE use
filter:alpha(opacity=value) where
value is from 0 to 100
 Need to apply all three rules 58
Opacity
Live Demo
opacity-rule.html
Visibility CSS Rule
 visibility
 Determines whether the element is
visible
 hidden: element is not rendered, but
still takes place in the rendering
(acts like opacity:0)
 visible: element is rendered
normally

60
Visibility
Live Demo
visibility-rule.html
Display CSS Rule
 display: controls the display of the
element and the way it is rendered
and if breaks should be placed
before and after the element
 inline: no breaks are placed before
and after (<span> is inline element)
 block: breaks are placed before
AND after the element (<div> is
block element)

62
Display CSS Rule (2)
 none: element is hidden and its
dimensions are not used to
calculate the surrounding elements
rendering (differs from visibility:
hidden!)
 There are some more possible
values, but not all browsers support
them
 Specific displays like table-cell and
table-row
63
Display
Live Demo
display-rule.html
Overflow CSS Rule
 overflow: defines the behavior of
element when content needs more
space than you have specified by the
size properties or for other reasons.
Values:
 visible (default) – element size is
increased to make space for content or
the content “overflows” out of the
element
 scroll – show horizontal/vertical scroll
bar in the element
65
Overflow
Live Demo
overflow-rule.html
Other CSS Rules
 cursor: specifies the look of the
mouse cursor when placed over the
element
 Values: crosshair, help, pointer,
progress, move, hair, col-resize,
row-resize, text, wait, copy, drop,
and others
 white-space – controls the line
breaking of text. Value is one of:
 nowrap – keeps the text on one line
67
Benefits of using CSS
 More powerful formatting than
using presentation tags
 Your pages load faster, because
browsers cache the .css files
 Increased accessibility, because
rules can be defined according
given media
 Pages are easier to maintain and
update

68
Maintenance Example

Title Title
Some random Title Some random
Title text here. Some random text here.
Title You can’t text here. Title You can’t
Some random
read it You can’t read it
Title text here. Title Some random Some random
anyway! Har read it anyway! Har
You can’t text here. text here.
Some random Some random har har! Use anyway! Har har har! Use
read it You can’t You can’t
text here. text here. Css. Title har har! Use Css.
anyway! Har read it read it
You can’t You can’t Css. Title Title
har har! Use anyway! Har Some random anyway! Har
read it read it
Css. har har! Use text here. Some random har har! UseSome random
anyway! Har anyway! Har
Css. You can’t text here. Css. text here. Title
har har! Use har har! Use
read it You can’t You can’t
Title Css. Css.
anyway! Har Some random
read it read it
Some random Title Title har har! Use Title text here.
anyway! Har anyway! Har
Title You can’t

on
text here. Some random Some random Css. har har! Use Some random har har! Use
You can’t Some random read it
text here. text here. Title Css. text here. Css.
read it text here. anyway! Har
You can’t You can’t You can’t Title
anyway! Har You can’t Some random har har! Use
read it read it read it
har har! Use read it text here. Title Some random Css.
anyway! Har anyway! Har anyway! Har
Css. Title anyway! Har Title har har! Use har har! Use You can’t text here.
Some random har har! Use
har har! Use read it You can’t
Some random Css.
Some random Css. Title text here. Css.
anyway! Har read it
text here. Css. text here. Some random har har! Use
You can’t

e
read it anyway! Har
You can’t You can’t text here. Css.
anyway! Har har har! Use
read it read it You can’t
TitleHar har har!Title
Use Css.
anyway! Har anyway! read it
har har! Use har har!
SomeUserandom Css. Some random
anyway! Har
Title Css. Css. text here. har har! Use text here. Title
Title You can’t Css. You can’t
Some random Some random
read it read it
text here. Title Title text here.
Some random anyway! Har anyway! Har Title

CS
You can’t text here. You can’t
har har! Use Some random Some random har har! Use Some random
read it You can’t read it
Css.
Title text here. text here. Css. text here.
anyway! Har read it anyway! Har
You can’t You can’t You can’t
har har! Use anyway! Har Some random har har! Use
read it read it read it
Css. text here. Title Css.
har har! Use anyway! Har anyway! Har anyway! Har Title
Css. You can’t
Some random har har! Use har har! Use har har! Use Some random
read it
Title text here. Css. Title Css. Title Css. text here.
anyway! Har
You can’t You can’t

S
Some random har har! Use Some random Some random
read it read it
Title text here. Css. text here. text here.
anyway! Har anyway! Har
You can’t You can’t You can’t
Some random har har! Use har har! Use
read it read it read it
Title text here. Css. Title Title Css.
anyway! Har anyway! Har anyway! Har
You can’t
Some random har har! Use Title Some randomhar har! UseTitle har har! UseSome random Title
read it
text here. Css. Some random text here.Css. Some random Css. text here. Some random
anyway! Har
You can’t text here. You can’t text here. You can’t Title text here.
har har! Use

file
read it You can’t read it You can’t read it You can’t
Css. Some random
anyway! Har read it anyway! Har read it anyway! Har read it
har har! Use har har! Use har har! Use text here.
anyway! Har anyway! Har anyway! Har
Css. Title Css.
Title Css. You can’t
har har! Use har har! Use har har! Use
read it
Some random Css. Title Some random Css. Title Css.
anyway! Har
text here. Some random text here. Some random har har! Use
Title You can’t text here. You can’t text here. Css.
read it You can’t read it You can’t
Some random anyway! Har anyway! Har Title
read it read it
text here.Title har har! Use har har! Use Some random
anyway! Har anyway! Har
You can’t Css. Title Css. text here. Title har har! Use
Some random har har! Use
read it You can’t
text here. Some random Css. Some Css.
random Title
anyway! Har read it
You can’t text here. text here.
har har! Use anyway! Har Some random
read it You can’t You can’t
Css. Title Title har har! Use text here.
anyway! Har read it read it
Css. You can’t
har har! UseSome random anyway! Har Some random anyway! Har read it
Css. text here. har har! Use text here. Title har har! Use Title anyway! Har
You can’t Css. You can’t Css.
Some random Some random har har! Use
read it read it
text here. text here. Css.
anyway! Har anyway! Har
You can’t You can’t
har har! Use har har! Use
read it read it
Css. Css.
anyway! Har anyway! Har
har har! Use har har! Use
Css. Css.

69
What to Avoid
 Don’t use <font> or other
presentation tags to change the
look of your text
 <font color=...>
 <b>text that is bold
 <center> this text is centered
 Do not use complex CSS rules-sets
because may slow down page
rendering
 Move as much as possible to 70
CSS Development Tools
 Visual Studio – CSS Editor

71
CSS Development Tools
(2)
 Firebug – add-on to Firefox used to
examine and adjust CSS and HTML

72
CSS Development Tools
(3)
 IE Developer Toolbar – add-on to IE
used to examine CSS and HTML
(press [F12])

73
HTML – Tables and
Forms
?

?
?

?
Questions
? ?
? ? ?
?

http://academy.telerik.com

You might also like