Transcript SWE444-3
SWE 444
Internet and Web Application Development
Cascading Style Sheets
Dr. Ahmed Youssef
Markup Languages and Formatting
1. HTML
2. XHTML
3. CSS (Cascading Style Sheets)
3.2
SWE 444: Internet & Web Application Development
What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets are stored in CSS files
3
Ahmed Youssef:: SWE444: Internet and Web Application Development
Content vs. Presentation
Content
Description
Presentation
Description
Cascading
Style Sheet
HTML
Browser
Improved and Consistent End User Experience
SWE 444: Internet & Web Application Development
CSS Observations
It is not HTML
It defines how HTML elements are to be
displayed.
It can be integrated into HTML
It can be called by referencing an external file
SWE 444: Internet & Web Application Development
CSS Syntax
The general syntax is:
selector {property: value}
or
Selector, …, selector {
property: value;
...
property: value
}
6
Ahmed Youssef:: SWE444: Internet and Web Application Development
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
1. Inline style
2. Embedded (Internal) style sheet
3. External style sheet
7
Ahmed Youssef:: SWE444: Internet and Web Application Development
Types of Style Sheets
Inline (add a style attribute to an element):
<p style=“font: 13pt verdana”>
Text
</p>
Embedded (Internal) Style Sheet:
<head>
<style>
P { font: 13pt verdana; }
</style>
</head>
SWE 444: Internet & Web Application Development
Types of Style Sheets
Linked (add an external style definition):
<head>
<link rel=“stylesheet”
href=“./path/file_name.css”
type=“text/css”>
</head>
9
Ahmed Youssef:: SWE444: Internet and Web Application Development
Embedded Style Example
<head>
Must be inside <head> section
<title>Cascading Style Sheets</title>
Note use of
brackets
<style>
h2,h3 {color:green; font-family:sans-serif}
h4,h5,h6 {color:blue; font-family:sans-serif}
</style>
</head>
Allows one style to be
applied simultaneously
to many tags
Resolving Style Preferences
Inline style
If no inline, embedded style is applied
If no embedded, external style sheet applied
Any undefined attributes use web browser
default
3.11
SWE 444: Internet & Web Application Development
Cascading Order
What style will be used when there is more than one
style specified for an HTML element?
styles will "cascade" into a new "virtual" Style
Sheet by the following rules (number four has the
highest priority):
1. Browser default
2. External Style Sheet
3. Internal Style Sheet
4. Inline Style
CSS Id and Class Selectors
The id selector uses the id attribute of the
HTML element and is defined with a "#".
#para1
{
text-align:center;
color:red;
}
13
Ahmed Youssef:: SWE444: Internet and Web Application Development
<html>
<head>
<style type="text/css">
#para1 {text-align:center; color:red; }
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
14
Ahmed Youssef:: SWE444: Internet and Web Application Development
The class Selector
The class selector uses the HTML class
attribute, and is defined with a ".“
.center {text-align:center;}
15
Ahmed Youssef:: SWE444: Internet and Web Application Development
<html>
<head>
<style type="text/css">
.center { text-align:center; }
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
16
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Text
17
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Text
Text Color
Text Alignment
Text Decoration
Text Indentation
Text Transformation
18
Ahmed Youssef:: SWE444: Internet and Web Application Development
Text Color
The color can be specified by:
name - a color name, like "red"
RGB - an RGB value, like "rgb(255,0,0)"
Hex - a hex value, like "#ff0000“
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
19
Ahmed Youssef:: SWE444: Internet and Web Application Development
Text-align
Syntax:
text-align:
left|center|right|justify
Example:
h2 {text-align: center}
Text Decoration
It is used to set or remove decorations from text.
The text-decoration property is mostly used to
remove underlines from links for design purposes:
Example
a {text-decoration:none;}
21
Ahmed Youssef:: SWE444: Internet and Web Application Development
<html>
<head>
<style type="text/css">
a {text-decoration:none;}
</style>
</head>
<body>
<p>Link to: <a href="http://www.google.com">
Google</a></p>
</body>
</html>
22
Ahmed Youssef:: SWE444: Internet and Web Application Development
Text Decoration
It can also be used to decorate text:
Example
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
23
Ahmed Youssef:: SWE444: Internet and Web Application Development
Text Transformation
It can be used to turn everything into uppercase
or lowercase letters, or capitalize the first letter
of each word.
Example
p {text-transform:uppercase;}
p {text-transform:lowercase;}
p {text-transform:capitalize;}
24
Ahmed Youssef:: SWE444: Internet and Web Application Development
Text Indentation
The text-indentation property is used to specify
the indentation of the first line of a text.
Example
p {text-indent:50px;}
25
Ahmed Youssef:: SWE444: Internet and Web Application Development
All CSS Text Properties
http://www.w3schools.com/css/css_text.asp
26
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Fonts
27
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Font
Font-family
Font-style
Font-weight
Font-size
Font Settings
Most browsers use the Times New Roman font
at 12-point size and color black.
CSS settings permit you to change these
default settings to bring a different look to your
pages.
There are six font style that can be used:
1.font-family
2.font-size
3.font-style
4.font-weight
5.font-variant
6.font
font-family Property
Five generic font families are supported by
Cascading Style Sheets:
Serif (e.g., Times)
Sans-serif (e.g., Arial or Helvetica)
Cursive (e.g., Zapf-Chancery)
Fantasy (e.g., Western)
Monospace (e.g., Courier)
Other Font Family
The following font faces are typical on a Windows-
based PC:
arial
arial narrow
comic sans ms
courier new
georgia
impact
tahoma
times new roman
verdana
SWE 444: Internet & Web Application Development
Example
p{font-family:"Times New Roman", Times, serif;}
Note: If the name of a font family is more than one
word, it must be in quotation marks, like font-family:
"Times New Roman".
More than one font family is specified in a commaseparated list
32
Ahmed Youssef:: SWE444: Internet and Web Application Development
Font Style
The font-style property is mostly used to specify italic
text.
This property has :
normal - The text is shown normally
italic - The text is shown in italics
Example
p.normal {font-style:normal;}
p.italic {font-style:italic;}
33
Ahmed Youssef:: SWE444: Internet and Web Application Development
font-weight Property
Specified the degree of “boldness” of the type
Specified from 100-900 in intervals of 100
100 is lightest
900 is heaviest
Example:
p {font-weight: 300}
SWE 444: Internet & Web Application Development
Font Size
The font-size property sets the size of the text.
You can use pixels to set letter heights for
special styling.
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
35
Ahmed Youssef:: SWE444: Internet and Web Application Development
Relative Unit Examples
As a scalable font:
body {font-size: 150%}
Use descriptive keywords: xx-small through xx-large:
b {font-size: xx-large}
SWE 444: Internet & Web Application Development
Text properties
Font-family
font-family : “PMingLiu";
Font-style
font-style : italic; (normal)
Font-weight
font-weight :bold; (normal)
Font-size
font-size : 12pt; (in,cm,px..)
All CSS Font Properties
http://www.w3schools.com/css/css_font.asp
38
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Background
39
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Background
CSS background properties are used to define
the background effects of an element.
CSS properties used for background effects:
background-color
background-image
background-repeat
background-position
40
Ahmed Youssef:: SWE444: Internet and Web Application Development
Background Color
Specifies the background color of an element
Example
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
41
Ahmed Youssef:: SWE444: Internet and Web Application Development
background-image
Syntax:
background-image:url(image)
Example:
body {background-image:url(paper.gif);}
42
Ahmed Youssef:: SWE444: Internet and Web Application Development
Background Image –
Repeat Horizontally or Vertically
By default, the background-image property
repeats an image both horizontally and
vertically.
Some
images
should
be
repeated
horizontally or vertically
43
Ahmed Youssef:: SWE444: Internet and Web Application Development
only
background-repeat
Controls how image is to be tiled
Attribute values:
repeat: fill entire background
repeat-x: tile horizontally for width of element
repeat-y: tile vertically for width of element
no-repeat: show only once
SWE 444: Internet & Web Application Development
background-repeat
Image is repeated horizontally by (repeat-x)
Example
body
{
background-image:url(gradient2.png);
background-repeat:repeat-x;
}
45
Ahmed Youssef:: SWE444: Internet and Web Application Development
background-position
The position of the image is specified by the
background-position property
top|center|bottom|right|left
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
SWE 444: Internet & Web Application Development
Background - Shorthand property
To shorten the code, it is also possible to specify all
the properties in one single property. This is called
a shorthand property.
body {
background:#ffffff
url('img_tree.png')
no-repeat right top;
}
47
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Links
48
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Links
Links can be styled with any CSS property (e.g.
color, font-family, background, etc.).
Special for links are that they can be styled
differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when mouse over it
a:active - a link the moment it is clicked
49
Ahmed Youssef:: SWE444: Internet and Web Application Development
<a> and CSS Example
<style>
a:link {color: #FF0000}
/* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
</style>
50
Ahmed Youssef:: SWE444: Internet and Web Application Development
Background Color
The background-color property specifies the
background color for links:
Example
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
51
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Box Model
52
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Box Model
53
Ahmed Youssef:: SWE444: Internet and Web Application Development
The Box Model
margin
top
height
border
Space occupied
by actual content
of element
right
left
bottom
padding
width
Width and Height of an Element
Example
width:220px;
height:150px;
55
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Border
When using the border property, the order of
the values are:
border-width
border-style
border-color
Example
border: 5px solid red;
56
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Margin
The margin property can have from one to four values.
margin:25px 50px 75px 100px;
top 25px , right 50px, bottom 75px , left 100px
margin:25px 50px 75px;
top 25px , right and left 50px , bottom 75px
margin:25px 50px;
top and bottom 25px , right and left 50px
margin:25px;
all four margins are 25px
57
Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Padding
The padding property can have from one to four values.
padding:25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
padding:25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
padding:25px 50px;
top and bottom paddings are 25px
right and left paddings are 50px
padding:25px;
all four paddings are 25px
58
Ahmed Youssef:: SWE444: Internet and Web Application Development
Page Layout
Header
Menu
Main Content
Footer
Side bar