Scribd
Upload
40 views

HTML: Structure & Content CSS: Presentation & Style

1) The document discusses different methods for applying styles in CSS, including internal, inline, and external style sheets. 2) It explains the concept of cascading styles and the order of precedence when multiple styles are defined. Inline styles have the highest priority. 3) Various CSS selectors are presented, including simple element, class, id, and descendant selectors to target specific elements in the HTML.

Uploaded by

cuteastig29
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
40 views

HTML: Structure & Content CSS: Presentation & Style

1) The document discusses different methods for applying styles in CSS, including internal, inline, and external style sheets. 2) It explains the concept of cascading styles and the order of precedence when multiple styles are defined. Inline styles have the highest priority. 3) Various CSS selectors are presented, including simple element, class, id, and descendant selectors to target specific elements in the HTML.

Uploaded by

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

chapter4

A CSS Primer
html: structure & content
CSS: presentation & style
Deprecated elements
Once deprecated, tags may well become
obsolete
<font></font>
<b></b>
<i></i>
<u></u>
<strike></strike>
<center></center>

Slide 4-2
CSS terms
style rule
selector {property:value}

examples
h2 {color: red}
h3 {color: #FF0000; text-align:center}
p {color: navy; font-style:italic}
h1,h2,h3,h4,h5,h6
{
color:
green
}

Misc Resources folder/


110 web resources/css

Slide 4-3
Styles are stored in Style Sheets
external: separate file

internal: <style> element in head section

inline/local: style property in tag

Slide 4-4
internal style sheet
<head>

<style
type="text/css">




body
{background-color:
ivory;
color:
navy}



hr
{color:
sienna}




p
{font-family:”Verdana”}

</style>

</head>

Slide 4-5
Inline styles (a.k.a. local styles)

<h2
style=“color:red”>
Local
Styles
</h2>


<p
style="color:
sienna;
text-align:center">






x-ray
yankee
zulu

</p>

Slide 4-6
External Style Sheet
> Style
rules
stored
in
separate
file

(eg)

/110/css/110.css

> Connected
to
a
client
file
using
a
link

element

Slide 4-7
External Style Sheet:
/110/css/110.css
external
style
sheets
may
contain
only

> css
style
rules
> css
comments
(for
documentation)
> 
no
HTML
allowed

omit
<style>
element
hr
{color:
sienna}

p
{color:
sienna;
text-align:center}

body
{background-image:





url(“../images/back40.gif")}


Slide 4-8
Client File
/110/about/contact.html
clients connect to the style sheet using the
<link> tag.

The <link> tag goes inside the head section:

<head>
<link rel="stylesheet" type="text/css"
href=“../css/110.css" />
</head>

Slide 4-9
External Style Sheets
CSS is a breakthrough in Web design:
 separates structure (html) from presentation
(css)
 control the style of multiple Web pages all at
once
 Define styles in an external style sheet and
apply them to as many Web pages as you want
 To make a global change, simply change the
style: all elements in the site are updated
automatically

Slide 4-10
Cascading Style Sheets
Multiple Styles Cascade Into One

Styles can be specified

o inline
o local
o external

Even multiple external style sheets can be


referenced inside a single HTML document
Slide 4-11
Cascading Order
What style will be used when there is more than one style
specified for an HTML element?

Styles will "cascade" by the following rules


(number 1 has the highest priority):

4. Inline style
5. Internal style sheet (<style> element in the <head>)
6. External style sheet
7. Browser default

So, an inline style (inside an HTML element) has the highest


priority, which means that it will override a style declared
inside the <head> tag, in an external style sheet, or in a
browser (a default value).

Slide 4-12
selectors:
1. simple.

2.
class.

3.
id

1.
simple: p
{font-family:”Verdana”}
2.
class:




p.right
{text-align:
right}

.center
{text-align:
center}

 <p
class="right">
This
paragraph
will
be

right-aligned.
</p>

 <p
class="center">
This
paragraph
will
be

center-aligned.
</p>

 <h2
class=“center”>
Zut
Alors!
</h2>

Slide 4-13
Selectors (cont.)

3. id selector:

h2#kermit
{color:
green}
#alert
{color:
red}


<h2 id=“kermit”> Bein’ Green! </h2>

<p id=“alert”> Caveat Lector! </p>

Slide 4-14
Descendant selectors
Problem: specify a CSS rule that “applies to
EM elements that are contained by an H1
element"

Example:

h1 { color: red }
em { color: red }

Slide 4-15
4. Descendant selectors
h1 { color: red }
em { color: red }

Although the intention of these rules is to


add emphasis to text by changing its color,
the effect will be lost in a case such as:

<h1>This headline is <EM>very</EM>


important</h1>

Slide 4-16
4. Descendant selectors
Add a rule that sets the text color to blue
whenever an em occurs anywhere within
an h1

h1 { color: red }
em { color: red }
h1 em { color: blue }

Slide 4-17
Descendant selectors
Problem: specify a CSS rule that “applies to
EM elements that are contained by an H1
element"

Example:

h1 { color: red }
em { color: red }

Slide 4-18
Classification of Elements:
Block-level, Inline, List-item

Block-Level Elements: Displayed on a line


by itself
p, h1, div, table, ol, ul, . . .

Can only be contained by other block-level


elements (with restrictions):
—p can be in a div
—p can not be in a p

Slide 4-19
Classification of Elements:
Block-level, Inline, List-item

Inline Elements: Do not begin on a new


line

a, em, span, img, …

Can be children of any other element

List-item Elements: appear in lists

Slide 4-20
CSS Display Property
display

values: block | inline | list-item | none


applies to: all elements

div#links a {display: block;}

return to proj12

Slide 4-21
CSS Box Model
> CSS assumes that every element is
contained in an element box

> E-M-B-P-C =
Edge-Margin-Border-Padding-Content

> The width of an element is the distance


from the left side of the content to the
right side of the content:

Slide 4-22
Example using a class selector

div.duckBox {
background-color:yellow; color:green;
border-style:double; border-color: green;
padding: 10px;
/* text-align applies only to the inline content of
a block-level element. To center the div itself,
use the following three properties */
margin-left:auto; margin-right:auto; width:50%;
}

Slide 4-23
CSS Resources
• W3Schools.com

• Video: Beginner’s Guide to CSS

• Quick Tutorials from WestCiv

• Eric Meyer: CSS


Author of CSS: The Definitive Guide

Slide 4-24

You might also like