ch04-css-basics_final.ppt

Basics of
Web Design
Chapter 4
Cascading Style Sheets Basics
Key Concepts
Dr. Nahla El_Haggar
1

Learning Outcomes
• Describe the purpose of Cascading Style Sheets
• List advantages of using Cascading Style Sheets
• Configure color on web pages with Cascading Style Sheets
• Configure inline styles
• Configure embedded style sheets
• Configure external style sheets
• Configure web page areas with element name, class, id, and
descendant selectors
• Test your CSS for valid syntax
2

CSS: A New Philosophy
• Separate content from presentation!
3
Content
(HTML document)
Presentation
(CSS Document)
Title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Suspendisse at pede ut purus
malesuada dictum. Donec vitae
neque non magna aliquam dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
tortor purus, luctus non, aliquam
nec, interdum vel, mi. Sed nec quam
nec odio lacinia molestie. Praesent
augue tortor, convallis eget, euismod
nonummy, lacinia ut, risus.
Bold
Italics
Indent

The Resulting Page
4
Title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Suspendisse at pede ut purus
malesuada dictum. Donec vitae neque
non magna aliquam dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
Tortor purus, luctus non, aliquam nec,
interdum vel, mi. Sed nec quam nec
odio lacinia molestie. Praesent augue
tortor, convallis eget, euismod
nonummy, lacinia ut, risus.

CSS Introduction
• Cascading Style Sheets (CSS)
– Used to describe the presentation of documents
– Define sizes, spacing, fonts, colors, layout, etc.
– Improve content accessibility
– Improve flexibility
• Designed to separate presentation from content
• Due to CSS, all HTML presentation tags and
attributes are deprecated, e.g. font, center,
etc.
6

Style Sheets Syntax
• https://www.w3schools.com/css/css_examples.asp
• A style sheet consists of a set of rules.
• Each rule consists of one or more selectors and a
declaration block.
• Selectors are separated by commas
• Declarations are separated by semicolons
• Properties and values are separated by colons
7
h1,h2,h3 { color: green; font-weight: bold; }

Selectors
• Selectors determine which element the rule applies to:
– All elements of specific type (tag)
– Those that match a specific attribute (id, class)
– Elements may be matched depending on how they are
nested in the document tree (HTML)
• Examples:
8
.header a { color: green }
#menu>li { padding-top: 8px }

Selectors (2)
• Three primary kinds of selectors:
– By tag (type selector):
– By element id:
– By element class name (only for HTML):
Selectors can be combined with commas:
<h1> tags, class link, and id top-link
9
h1 {font-size:18pt}
In HTML <h1>Another Heading</h1>
#new {font-style: italic; }
In HTML <p id=“new”>This is text is italics</p>
.myClass {border: 1px solid red;}
In HTML, <p class=“myClass”>
h1, .link, #top-link {font-weight: bold;}

Selectors (3)
• Pseudo-classes define state
– :hover, :visited, :active , :lang
• Pseudo-elements define element "parts" or
are used to generate content
– :first-line , :before, :after
10
a:hover { color: red; }
p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }

Selectors (4)
• Match relative to element placement:
This will match all <a> tags that are inside of <p>
• * – universal selector (avoid or use with care!):
This will match all descendants of <p> element
• + selector – used to match “next sibling”:
This will match all siblings with class name link that appear
immediately after <img> tag
11
p a {text-decoration: underline}
p * {color: black}
img + .link {float:right}

Values in the CSS Rules
• Colors are set in RGB format (decimal or hex):
– Example: #a0a6aa = rgb(160, 166, 170)
– Predefined color aliases exist: black, blue, etc.
• Numeric values are specified in:
– Pixels, ems, e.g. 12px , 1.4em
– Points, inches, centimeters, millimeters
• E.g. 10pt , 1in, 1cm, 1mm
– Percentages, e.g. 50%
• Percentage of what?...
– Zero can be used with no unit: border: 0;
12

• HTML and CSS can be linked in three ways:
• Browser default
• Inline Styles (inside the HTML element)
- CSS code is placed within the <body> section of a web page.
- No selector
• Embedded Styles
-inside the <head> in a <style> tag
• External Style (highly recommended )
- CSS rules in separate file .css extension
• Linked via <link rel="stylesheet" href=…> tag
• or @import directive in embedded CSS block
13
Linking HTML and CSS

Cascading Style Sheets
There are four ways to impose a style on HTML elements:
1. By element tag name
p {margin_top: 20px;}
2. By class attribute
.column {border: 5px;}
3. By ID attribute
#header {background-color: #ff0000;}
4. By style attribute
style=“color:blue;” (within HTML tag)

Default Browser Styles
• Browsers have default CSS styles
– Used when there is no CSS information or any
other style information in the document
• Caution: default styles differ in browsers
– E.g. margins, paddings and font sizes differ most
often and usually developers reset them
15
* { margin: 0; padding: 0; }
body, h1, p, ul, li { margin: 0; padding: 0; }

Inline Styles: Example
16
<!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>

<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:#0000FF" >Even
more text</p>
</body>
</html>
inline-styles.html

Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>

<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:#0000FF" >Even
more text</p>
</body>
</html>
Inline Styles: Example
17
inline-styles.html

Embedded Styles
• Embedded in the HTML in the <style> tag:
– The <style> tag is placed in the <head> section
– type attribute specifies the MIME type
• MIME describes the format of the content
• Other MIME types include text/html, image/gif,
text/javascript …
• Used for document-specific styles
18
<style type="text/css">

Embedded Styles: Example
19
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<head>
<title>Style Sheets</title>
em {background-color:#8000FF; color:white}
h1 {font-family:Arial, sans-serif}
p {font-size:18pt}
.blue {color:blue}
</style>
<head>
embedded-stylesheets.html

20
…
<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>
Embedded Styles: Example (2)

Embedded Styles: Example (3)
21
…
<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>

External CSS Styles
• External linking
– Separate pages can all use a shared style sheet
– Only modify a single file to change the styles across your
entire Web site
– link tag (with a rel attribute)
– Specifies a relationship between current document and
another document
– link elements should be in the <head>
22
<link rel="stylesheet" type="text/css"
href="styles.css">

External CSS Styles (2)
@import
– Another way to link external CSS files
– Example:
23
@import url("styles.css");
/* same as */
@import "styles.css";
</style>

External Style Sheets - 1
• CSS style rules
are contained in a text file separate from the
HTML documents.
• The External Style Sheet text file:
– extension ".css"
– contains only style rules
– does not contain any HTML tags
24

body { background-color: #E6E6FA;
color: #000000;
}
h2 { color: #003366; }
External Style Sheets - 2
Multiple web pages can associate with the same external style
sheet file.
25
site.css index.html
clients.html
about.html
Etc…

External Styles: Example
26
/* 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 }
styles.css

External Styles: Example (2)
27
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<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>
…
external-styles.html

28
…
<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
…
<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>

CSS Text Properties
The following properties can be specified for any element that contains text,
such as <h1> through <h6>, <p>, <ol>, <ul>, and <a>:
Property Some Possible Values
text-align: center, left, right, justify
text-decoration: underline, line-through, blink
color: blue, green, yellow, red, white, etc.
font-family: Arial, Verdana, "Times New Roman"
font-size: large, 120%, 20px (pixels)
font-weight: bold, normal
font-style: italic, normal

Shorthand Font Property
• font
– Shorthand rule for setting multiple font properties at the
same time
is equal to writing this:
31
font:italic normal bold 12px/16px verdana
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;

32
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
font: 15px arial, sans-serif;
}
p.ex2 {
font:italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<p class="ex1">This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph.</p>
<p class="ex2">This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph.</p>
</body>
</html>
Font Property Example

Backgrounds
• background-image
– URL of image to be used as background, e.g.:
• background-color
– Using color and image and the same time
• background-repeat
– repeat-x, repeat-y, repeat, no-repeat
• background-attachment
– fixed / scroll
33
background-image:url("back.gif");

Backgrounds (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
– Examples:
34
background-position: top left;
background-position: -5px 50%;

Background Shorthand Property
• background: shorthand rule for setting background properties
at the same time:
is equal to writing:
– Some browsers will not apply BOTH color and image for
background if using shorthand rule
35
background: #FFF0C0 url("back.gif") no-repeat
fixed top;
background-color: #FFF0C0;
background-image: url("back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;

36
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
</style>
</head>
<body>
<p>This is some text</p>
</body>
</html>

Borders
• 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
– border-top-style, border-left-color, …
37

Border Shorthand Property
• border: shorthand rule for setting border properties at once:
is equal to writing:
• Specify different borders for the sides via shorthand rules:
border-top, border-left, border-right, border-
bottom
• When to avoid border:0
38
border: 1px solid red
border-width:1px;
border-color:red;
border-style:solid;

39
<!DOCTYPE html>
<html>
<head>
<style>
p.one {border-style: solid;
border-width: 5px;}
p.two {order-style: solid;
border-width: medium;}
p.three {border-style: dotted;
border-width: 2px;}
p.four {border-style: dotted;
border-width: thick;}
p.five {border-style: double;
border-width: 15px;}
p.six {border-style: double;
border-width: thick;}
p.seven {border-style: solid;
border-width: 2px 10px 4px 20px;}
</style>
</head>
Border Example

40
...
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is
used alone.Always specify the "border-style“ property to set the
borders first.</p>
</body>
</html>
Border Example

Width and Height
• width – defines numerical value for the width of element,
e.g. 200px
• height – defines numerical value for the height of element,
e.g. 100px
– By default the height of an element is defined by its
content
– Inline elements do not apply height, unless you change
their display style.
41

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
– What are collapsing margins?
42

43
<!DOCTYPE html>
<html>
<head>
<style>
div {border: 1px solid black;
background-color: lightblue;}
div.ex1 {padding: 25px 50px 75px 100px;}
div.ex2 {padding: 25px 50px 75px;}
div.ex3 { padding: 25px 50px;}
div.ex4 {padding: 25px;}
</style>
</head>
<body>
<h2>Using the padding shorthand property</h2>
<div class="ex1">This div element has a top padding of 25px, a right padding
of 50px, a bottom padding of 75px and a left padding of 100px.</div><br>
<div class="ex2">This div element has a top padding of 25px, a left and right
padding of 50px, and a bottom padding of 75px.</div><br>
<div class="ex3">This div element has a top and bottom padding of 25px, and a
left and right padding of 50px.</div><br>
<div class="ex4">This div element has a top, right, bottom and left paddding
of 25px.</div>
</body>
</html>

Margin and Padding: Short Rules
• margin: 5px;
– Sets all four sides to have margin of 5 px;
• margin: 10px 20px;
– top and bottom to 10px, left and right to 20px;
• margin: 5px 3px 8px;
– top 5px, left/right 3px, bottom 8px
• margin: 1px 3px 5px 7px;
– top, right, bottom, left (clockwise from top)
• Same for padding
44

Summary
• This chapter introduced you to Cascading Style Sheet Rules
associated with color on web pages.
• You configured inline styles, embedded styles, and external
styles.
• You applied CSS style rules to HTML, class, and id selectors.
• You are able to submit your CSS to the W3C CSS Validation
test.
46

ch04-css-basics_final.ppt

More Related Content

ch04-css-basics_final.ppt