HTML Style Mock-Up
advertisement
HTML Mock-Up
<!DOCTYPE html>
Page Template
<html lang="en">
<head>
<meta charset="utf-8">
<title> ENTER YOUR WINDOW TITLE
HERE </title>
<link href="gr.css" rel="stylesheet"> or
<style>
…all style rules here…
</style>
</head>
<body>
ENTER ALL YOUR
WEB PAGE CONTENT HERE
<!-- The following will be useful to validate
your work -->
<p>
Validate:
<a
href="http://validator.w3.org/check?uri=referer">
HTML5</a>
<a href="http://jigsaw.w3.org/cssvalidator/check/referer?profile=css3">CSS3</a>
</p>
</body>
</html>
p
{
font-size: 14pt;
}
The font-size
http://www.w3schools.com/cssref/playit.asp?filen
ame=playcss_font-size&preval=small
Sans-Serif
Arial, sans-serif;
Helvetica, sans-serif;
Gill Sans, sans-serif;
Lucida, sans-serif;
Helvetica Narrow, sans-serif;
sans-serif;
Serif
Times, serif;
Times New Roman, serif;
Palatino, serif;
Bookman, serif;
New Century Schoolbook, serif;
serif;
Monospace
Andale Mono, monospace;
Courier New, monospace;
Courier, monospace;
Lucidatypewriter, monospace;
Fixed, monospace;
monospace;
Cursive
Comic Sans, Comic Sans MS, cursive;
Zapf Chancery, cursive;
Coronetscript, cursive;
Font Families
Florence, cursive;
Parkavenue, cursive;
cursive;
Fantasy
Impact, fantasy;
Arnoldboecklin, fantasy;
Oldtown, fantasy;
Blippo, fantasy;
Brushstroke, fantasy;
fantasy;
http://www.w3schools.com/cssref/css_websafe_fonts.asp]
{
background-color: #E6E6FA;
color: #191970;
font-family: Arial, Verdana, sans-serif;
Page Background
Text Color
Text Font
}
<p style="font-size:14pt">Text</p>
h1
{
background:blue;
color:yellow;
}
h1
{
border-width:2px;
border-style:solid;
border-color:#ff0000;
}
Inline (somewhere in body)
Headline background color
Headline text color
CSS border Property
If used with a BLOCK ELEMENT (e.g.,
h1, h2, p, div, ...), the border extends to
browser’s margin (or specified width)
<h2> Heading with Border </h2>
If used with an INLINE ELEMENT (e.g.,
a, i, em, b, span, ...), the border closely
outlines the element content
<a href="test.html"> This anchor tag has a
border </a>
Configuring Specific Sides of a Border
h2
{
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: red;
}
Use CSS to configure a line on one or
more sides of an element
◦ border-bottom
◦ border-left
◦ border-right
◦ border-top
The CSS padding Property
Configures empty space between the
content of the HTML element and the
border
Padding is set to zero by default
h2
{
border:2px solid #ff0000;
}
Example: Without Padding
h2
{
border:2px solid #ff0000;
padding:5px;
}
h2
{
border: 2px solid #ff0000;
background-color: #cccccc;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px;
}
.new
{
color:#FF0000;
font-style: italic;
}
Example: With 5px of Padding
Use CSS to configure padding on one or more
sides of an element
padding-bottom
padding-left
padding-right
padding-top
Use class selector
It applies CSS to a certain "class" of elements
on a Web page
Does not associate the style to a particular tag
element
Configure with .classname (prefixed with a dot)
The sample creates a class called “new” with
red italic text. Note: the dot (.) is not part of
the id’s name.
To use the class above , code the following
HTML:
<p class="new"> This is text is red and in
italics</p>
#new
{
color: #FF0000;
font-size:2em;
font-style: italic;
}
id selectors in CSS
Use id selector - Applies a CSS rule to ONE
element on a Web page (unique ID)
Configure with #idname (prefixed with #) The sample creates an id called “new” with
red, large, italic text. Note: the # is not part
of name. To use this id, code the following
HTML (without #):
<p id="new"> This is text is red and in
italics</p>
p {…} - Applies to all p elements (only one
element selector)
h1,h2,h3 {…} - Applies to all h1,h2, and h3
elements (multiple elements)
.note {…} - Applies to any element that has
class="note"
p.note {…} - Applies to any p element that
has class="note"
#footnotes {…} - Applies to the one element
that has id="footnotes"
p#footnotes {…} - Applies to whichever p
element has id="footnotes" (This would be
weird since there is little point in including
the p)
footer
{
color:green;
}
Selector Variations
CSS Contextual Selector Example
To use this id, code the following HTML
(without #):
<footer>
<p>Questions?</p>
</footer>
#container
{
margin-left: auto;
margin-right: auto;
width:80%;
}
Embedded style examples:
body
{
margin-top:50px;
margin-bottom:50px;
margin-left:100px;
margin-right:100px;
}
Inline style examples (alternative to 3rd example
above)
<body style="margin:50px 100px">
(Key Concept—Contextual selectors help us
reduce the number of classes and ids)
Centering Page Content with CSS
Margin Sizes - Margin sizes (like other size
properties) can be given in units of pt, in, cm or
px
img
{
border-style:none;
}
figure
{
width: 640px;
border: 1px solid #000000;
padding: 5px;
}
figcaption
{
text-align: center;
font-family: Papyrus, fantasy;
}
body
{
background-image: url(background1.gif);
}
h2 {
background-color: #d5edb3;
color: #5c743d;
font-family: Georgia,Times New Roman,serif;
padding-left: 30px;
background-image: url(trilliumbullet.gif);
background-repeat: no-repeat;
}
body
{
background-color: #f4ffe4;
color: #333333;
background-image: url(trilliumgradient.png);
background: url(trilliumfoot.gif)
no-repeat bottom right,
url(trilliumgradient.png);
}
Browsers automatically add a border to image
links, but you can configure CSS to eliminate the
border
h1
{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#wrapper
{
-webkit-box-shadow: 5px 5px 5px #828282;
-moz-box-shadow: 5px 5px 5px #828282;
box-shadow: 5px 5px 5px #828282;
}
Rounded Corners
-webkit-border-radius (for Safari &
Chrome)
-moz-border-radius (for Firefox)
border-radius (W3C syntax)
Configure border & padding for an image
Configure a caption for an image
Configures a background-image =
Using background-repeat
Multiple Background Images
box-shadow Property
h1
{ background-color: #FFFFFF;
opacity: 0.6;
}
{
position: relative;
left:30px;
font-family:Arial,sans-serif;
}
{
position: absolute;
left:200px;
top:100px;
font-family:Arial,sans-serif;
width:300;
}
h1 {
background-color:#cccccc;
padding:5px;
color: #000000;
}
p{
font-family:Arial,sans-serif;
}
#yls {
float: right;
margin: 0 0 5px 5px;
border: solid;
}
<div id="leftcolumn">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a
href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
#leftcolumn ul { list-style-type: none; }
#leftcolumn a { text-decoration: none; }
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
opacity Property
- Configure the opacity of the background
color
Opacity range:
◦ 0 Completely Transparent
◦ 1 Completely Opaque
horizontal offset,
vertical offset, blur radius,
and valid color value
Relative Positioning - Changes location of an
element in relation to where it would otherwise
appear
Absolute Positioning - Precisely specifies the
location of an element within the browser
window
float Property
Elements that seem to “float" to the right or left
side of the window or an element within it are
often configured using the float property.
Navigation links in an Unordered List
CSS removes the list marker and underline
Navigation links in an Unordered List
<li><a
href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
HTML Attribute
.shadow
{
box-shadow: 3px 3px 5px 6px #ccc;
}
CSS Property
The box-shadow property can specify one or
more drop shadows. The components of each
shadow are interpreted as follows:
background-image1
{
background-position:top center
}
background-image2
{
background-position:top right
}
Pseudo-class
Required: The first length is the
horizontal offset of the shadow. A positive
value draws a shadow that is offset to the
right of the box, a negative length to the
left.
Required: The second length is the
vertical offset. A positive value offsets the
shadow down, a negative one up.
Optional: The third length is a blur
distance. Negative values are not allowed.
If the blur value is zero, the shadow's edge
is sharp. Otherwise, the larger the value,
the more the shadow's edge is blurred.
Optional: The fourth length is a spread
distance. Positive values cause the
shadow shape to expand in all directions
by the specified radius. Negative values
cause the shadow shape to contract.
Optional: The color is the color of the
shadow.
Optional: An inset keyword, if present,
changes the drop shadow from an outer
shadow (one that shadows the box onto
the canvas, as if it were lifted above the
canvas) to an inner shadow (one that
shadows the canvas onto the box, as if the
box were cut out of the canvas and shifted
behind it)
Background image (left is default)
Purpose
:first-of-type
:first-child
:last-of-type
:last-child
:nth-of-type(n)
tr: nth-of-type(even) {
background-color: #eaeaea;
}
#nav ul { list-style-type: none;}
#nav a { text-decoration: none;
padding-right: 10px; }
#nav li { display: inline; }
#nav ul { list-style-type: none;}
#nav a { text-decoration: none;
padding-right: 10px; }
#nav li { display: inline; }- horizontal display
background-color: #8FA5CE;
background-image:
-webkit-gradient(linear, left top, left bottom,
from(#FFFFFF), to(#8FA5CE));
background-image: -moz-linear-gradient(top,
#FFFFFF, #8FA5CE);
filter:
progid:DXImageTransform.Microsoft.gradient
(startColorstr=#FFFFFFFF,
endColorstr=#FF8FA5CE);
linear-gradient(#FFFFFF, #8FA5CE);
body
{
background-image: url(background1.gif);
}
h2 {
background-color: #d5edb3;
color: #5c743d;
font-family: Georgia,Times New Roman,serif;
padding-left: 30px;
background-image: url(trilliumbullet.gif);
background-repeat: no-repeat;
}
body {
background-color: #f4ffe4;
color: #333333;
background-image: url(trilliumgradient.png);
background: url(trilliumfoot.gif)
Applies to the first element of the specified type
Applies to the first child of an element (CSS2
selector)
Applies to the last element of the specified type
Applies to the last child of an element
Applies to the “nth” element of the specified type
Values: an integer number, odd, or even
To Zebra Stripe a Table
CSS that removes the list marker and underline,
adds padding, and configures items for inline
display (horizontal)
Gradients
a smooth blending of shades from one
color to another
Use the background-image property
◦ linear-gradient()
◦ radial-gradient()
CSS background-image Property
Using background-repeat
CSS3 Multiple Background Images
no-repeat bottom right,
url(trilliumgradient.png);
}
#yls {
float: right;
margin: 0 0 5px 5px;
border: solid;
}
a:link {color:#000066;}
a:visited {color:#003366;}
a:focus {color:#FF0000;}
a:hover {color:#0099CC;}
a:active {color:#FF0000;}
<header>
<hgroup>
<h1>Lighthouse&nbsp;Island&nbsp;Bistro</h1>
<h2>the best coffee on the coast</h2>
</hgroup>
</header>
<a href="contact.html">
Contact
</a>
<a href="http://yahoo.com" target="_blank" >
Yahoo!
</a>
{
background-position:top center/right
}
float Property
Pseudo-classes and the anchor element - and
more than just the color can be changed (font
style, size, background image, and most anything)
hgroup element
Elative Link
Opening a Link
in a New Browser Window
Placing background image – default is left
Left-column navigation
◦ float: left; width:150px;
Right-column content
◦ float: right; width: 200px;
Center column
◦ No float/width – uses remaining
available width that’s unused by the
floating columns
◦ margin: 0 210px 0 160px;
Footer – clears the float
◦ clear: both;
Three Column Layout
HTML Code
<br>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<p> …paragraph goes here… </p>
<p> Sentence1. Sentence2. …more sentences…
Last sentence.
</p>
<blockquote>
…text goes here…
</blockquote>
<div>Text</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li> … </li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
Line Break
The Heading Elements
The Paragraph Element
The blockquote
div element - Configures a structural block area
or “division” on a web page with empty space
above and below.
HTML Unordered List - Displays itemized
information with bullet points.
HTML Ordered List –Numbered List
<li>Item 3</li>
<li>Item 4</li>
<li> … </li>
</ol>
<dl>
<dt>Question</dt>
<dd>Answer</dd>
<dt>Question</dt>
<dd>Answer</dd>
<dt>Question</dt>
<dd>Answer</dd>
</dl>
<a href="http://yahoo.com">Yahoo</a>
<a href="index.html">Home</a>
<a href="mailto:me@hotmail.com">
me@hotmail.com </a>
<p style="font-size:14pt">
Useful for Windows, Mac, Other, and Generic
choices:
font-family: Arial, Geneva, Helvetica,
sans-serif
font-family: Times New Roman, Times,
serif
font-family: Courier New, Courier, fixed,
monospace
font-family: Comic Sans, Comic Sans
MS, cursive
Margin:0 auto 0 auto
Top left bottom right
<hr>
.name
#name
background-color
color
line-height
margin
text-align
text-decoration
width
font-weight - Configures the boldness of
text
font-style - Configures text to an italic
style
font-size - Configures the size of text
font-family - Configures the default typefaces of
text
<img src="cake.gif" alt="birthday cake"
HTML Description List - Useful to display a list
of terms and definitions or a list of FAQ and
answers. Each term/phrase starts on a new line.
Each description (following the term) is indented
Absolute link - Link to other Web sites
Relative link - Link to pages on your own site
Email Links
Inline (somewhere in body)
The font-family Property
Margins
Configures a horizontal line
<p class="name"></p>
<p id="name"> Text</p> (Applies a CSS rule to
ONE element on a Web page)
Some common CSS properties (see table 3.1)
HTML Image Element
height="100" width="100">
src attribute – identifies the file name of
the graphic
alt attribute – Configures alternate text
content (description)
height attribute – sets the height of the
graphic in pixels
width attribute – sets the width of the
graphic in pixels
Required: Configure the alt attribute
◦ Alternate text to convey
meaning/intent of the image
◦ Don’t use the file name of the
image (non-descriptive)
◦ Use alt="" for purely decorative
images (no text)
<a href="index.html">
<img src="home.gif"
height="19“
width="85"
alt="Home">
</a>
<span> tag
Image Links
The <span> tag is used to group inline-elements
in a document.
The <span> tag provides no visual change by
itself.
<p style="text-align:center;"> </p>
<link rel="icon" href="favicon.ico"
type="image/x-icon" >
We showed how to turn off bullets, but you can
alter the visual effects in other ways in ul, ol, or li
elements with CSS, such as the following:
list-style-type:disc
list-style-type:circle
list-style-type:square
list-style-image:url(arrow.gif)
The <span> tag provides a way to add a hook to a
part of a text or a part of a document.
Inline center
Favorites Icon – favicon
A square image
associated
with a Web
page
Usually named:
favicon.ico
May display in the browser address bar,
tab, or favorites/bookmarks list
List-style-type can alter the visual effects in other
ways in ul, ol, or li elements with CSS - you can
also affect color, font, size, background, start-at
count, and more
list-style-type:decimal
→
1. 2. 3.
list-style-type:lower-roman →
i ii iii iv
list-style-type:upper-roman →
I II III IV
list-style-type:lower-alpha
→
a. b. c.
list-style-type:upper-alpha
→
A. B. C.
Configure a class:
◦ If the style applies to multiple
elements on a page
◦ Use the . (dot) notation in the style
sheet (in the selector)
◦ Use the class= attribute in the HTML
Configure an id:
◦ If the style is specific to only one
element on a page
◦ Use the # notation in the style sheet
(in the selector)
◦ Use the id= attribute in the HTML.
Create meaningful names, not presentational
ones
◦ Poor: redText
Better:
cautionaryNote
◦ Ten most commonly used class
names:
footer, menu, title, small, text,
content, header, nav,
copyright, button
Deciding to Configure a class or id
New HTML5 Structural Elements
CSS Properties
CSS Property Groups
Animation
Background
Border and outline
Box
Color
Content Paged Media
Dimension
Flexible Box
Font
Generated content
Grid
Hyperlink
Linebox
List
Margin
Marquee
Multi-column
Padding
Paged Media
Positioning
Print
Ruby
Speech
Table
Text
2D/3D Transform
Transition
User-interface
HTML Style Sheet
Help Links
How the Internet Works www.theshulers.com/whitepapers/internet_whitepaper/
HTML/CSS tutorials - http://www.w3schools.com/
HTML Validator - http://validator.w3.org/
CSS Validator - http://jigsaw.w3.org/css-validator/
The World Wide Web Consortium
sets standards for HTML and related
languages.
Browsers are given Domain Names in
the URL, but the packet itself needs
the IP addresses
General Web Page Structure
Head Section - There is one
and only one head section Contains info to describe the
Web page document
<head>
…head section info goes here
</head>
http://w3c.org
Try this (from DOS command prompt - cmd):
nslookup domainName - Gives the IP address (inside IP
address if a Graceland site)
nslookup domainName s2.graceland.edu - Same as
above except outside IP address if a Graceland site
<html>
<head>
<title> (insert text for the browser’s title bar
here)</title>
</head>
<body> (insert visible Web page elements here)
</body>
</html>
Body Section Contains text
and elements to display on the
page. There is one and only
one body section.
<body>
…body section info goes here
</body>
Special Characters - All characters,
http://www.w3schools.com/tags/ref_entities.asp
including space or tab, have
alternative text or numeric codes.
Some special symbols can only be
written in HTML using such codes.
Document Type Definition (DTD) <!DOCTYPE html>
doctype statement identifies the
version of HTML used in your file
placed at the top of a web page
document
HTML – Template with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Gary Rees' World </title>
<style>
Body
{
background:#FFFF56;
color:red;
}
</style>
Some common CSS properties (see
table 3.1)
CSS Embedded styles
</head>
<body>
Hello World!
<br><br>
WOW WOW WOW WOW - This is kule!
</body>
</html>
background-color
color
font-family
font-size
font-style
font-weight
line-height
margin
text-align
text-decoration
width
Embedded styles include selectors and are listed as content
of the style element in the head section:
<style>
body {
background:yellow; color:blue;
}
h1,h2
{
background:blue; color:yellow;
}
</style>
CSS Inline style
CSS Embedded Styles
The Heading Elements
The Paragraph Element - Groups a
set of text together with a gap of space
between elements above or below it.
Configured in the header section of a Web page.
Use the HTML <style> element
Apply to the entire Web page document
Style declarations are contained between the opening
and closing <style> tags
But inline style settings are set in an attribute within the tag
itself down in the body section:
<body style="background:yellow; color:blue;">
<h1 style="background:blue; color:yellow;">
Introduction </h1>
Configured in the header section of a Web page.
Use the HTML <style> element
Apply to the entire Web page document
Style declarations are contained between the opening and
closing <style> tags
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<p> …paragraph goes here… </p>
<p> Sentence1. Sentence2. …more sentences…
Last sentence.
</p>
BR is a stand-alone tag (<br> or <br/>)
The line break element - The
browser decides where lines will wrap
but you can force it with the BR-tag
The blockquote element - This is like <blockquote>
a paragraph but it is indented for
…text goes here…
special emphasis (e.g. like a quote)
</blockquote>
Bold text = <b>
Phrase Elements
Emphasized text = <em>
Italicized text = <i>
Mark text <mark>
Small text <small>
Strong text <strong.
Subscript text = <sub>
Superscript text = <sup>
HTML Unordered List - Displays
<ul>…</ul> – Encloses an entire unordered list
itemized information with bullet
points. Bullet style is a disc
(usually with multiple line items)
(depending on browser) but the type
attribute can change that.
<li>…</li> – Contains an item in the list
HTML Ordered List - Displays
itemized information as ordered.
There are only 2 different tags used
for this. The items are numbered with
numerals by default but the type
attribute can change it.
HTML Description List - Useful to
display a list of terms and definitions
or a list of FAQ and answers. Each
term/phrase starts on a new line. Each
description (following the term) is
indented. Uses 3 different tags.
div element - Configures a structural
block area or “division” on a web page
with empty space above and below.
Can contain other block display
elements, including other div elements
The anchor element (a-tag) Hyperlinks are defined in anchor
elements (A-tag). Every Hyperlink
has two parts:
The link destination (a URL
specified in an href attribute)
The link label which is the
visible part we click on
Email Links using the <a> tag Automatically launch the default mail
program configured for the browser.
If no browser default is configured, a
message is displayed
Making Color Choices
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
<ol>…</ol> – Encloses an entire ordered list
(usually with multiple line items)
<li>…</li> – Contains an item in the list
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
<dl>…</dl> – Encloses an entire definition list with
multiple terms and their descriptions
<dt>…</dt> – Contains a term/phrase/sentence.
Gives space above and below it.
<dd>…</dd> – Contains a description of the term.
Is indented with space above and below
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
<div>Home Services Contact</div>
Absolute link
Link to other Web sites
<a href="http://yahoo.com">Yahoo</a>
Relative link
Link to pages on your own site
<a href="index.html">Home</a>
<a href="mailto:me@hotmail.com">
me@hotmail.com </a>
Monochromatic
o http://meyerweb.com/eric/tools/color-blend
Choose from a photograph or other image
o http://www.colr.org
Begin with a favorite color
o Use one of the sites below to choose other colors
http://colorsontheweb.com/colorwizard.as
p
http://kuler.Adobe.com
http://colorschemedesigner.com/
CSS properties for configuring text
font-weight
◦ Configures the boldness of text
font-style
◦ Configures text to an italic style
font-size
◦ Configures the size of text
font-family
◦ Configures the default typefaces of text
The font-size Property
Embedded (in head/style section): p {font-size: 14pt;}
Inline (somewhere in body): <p style="font-size:14pt">
Accessibility Recommendation: Use em or percentage font sizes since these can be easily
enlarged in all browsers by users
Not everyone has the same fonts on their computer
The font-family Property
Configure a list ending with a generic family name
Useful for Windows, Mac, Other, and Generic
choices:
◦ font-family: Arial, Geneva, Helvetica, sansserif
◦ font-family: Times New Roman, Times,
serif
◦ font-family: Courier New, Courier, fixed,
monospace
◦ font-family: Comic Sans, Comic Sans MS,
cursive
Example:
p {font-family: Arial, Verdana, sans-serif;}
class selectors in CSS
Use class selector
◦ It applies CSS to a certain "class" of elements
on a Web page
◦ Does not associate the style to a particular tag
element
Configure with .classname (prefixed with a dot)
◦ The sample creates a class called “new” with
red italic text. Note: the dot (.) is not part of
the id’s name.
◦ To use the class above , code the following
HTML:
</p>
<style>
.new
{
color:#FF0000;
font-style: italic;
}
</style>
id selectors in CSS
<p class="new"> This is text is red and in italics
Use id selector
◦ Applies a CSS rule to
ONE element on a
Web page (unique ID)
Configure with #idname (prefixed with #)
◦ The sample creates an id called “new” with
red, large, italic text. Note: the # is not part
of name.
◦ To use this id, code the following HTML
(without #):
<style>
#new
{
color: #FF0000;
font-size:2em;
font-style: italic;
}
</style>
Selector Variations
Contextual Selectors
<p id="new">
This is text is red, large, and in italics
</p>
p {…}
◦ Applies to all p elements (only one element
selector)
h1,h2,h3 {…}
◦ Applies to all h1,h2, and h3 elements
(multiple elements)
.note {…}
◦ Applies to any element that has class="note"
p.note {…}
◦ Applies to any p element that has
class="note"
#footnotes {…}
◦ Applies to the one element that has
id="footnotes"
p#footnotes {…}
◦ Applies to whichever p element has
id="footnotes"
◦ This would be weird since there is little point
in including the p
Elements can be nested so we can think of them as having
parent-and-child relations among them
Direct Descendant (Parent > Child) selectors
body > div {…}
◦ Applies to top-level div element in the body
(child of body)
#biblio > p {…}
◦ Applies to any p element whose parent has
id="biblio"
Descendant selectors
footer a {…}
◦ Applies to any a element anywhere in a footer
element
#biblio p.note {…}
◦ Applies to any p with class="note" if its
ancestor has id="biblio"
CSS Contextual Selector Example
<style>
footer a
{
color:green;
}
</style>
Key Concept—Contextual selectors help us reduce the
number of classes and ids
Centering Page Content with CSS
i.e.
…
<footer>
<p>
<a href="help.html">
Questions?
</a>
<a href="home.html">
Home
</a>
</p>
</footer>
…
#container
{
margin-left: auto;
margin-right: auto;
width:80%;
}
or#container
{
margin: auto;
Margins
}
Margin: 0 auto 0 auto
Create Box
Top left bottom right
Inside style
#wrapper
{
Width: 80%;
Margin-left:auto;
Margin-right:auto;
}
Margin Sizes
Margin sizes (like other size properties) can be given in units
of pt, in, cm or px
Embedded style examples
body {margin-top:50px; margin-bottom:50px;
margin-left:100px; margin-right:100px;}
body {margin:50px 100px 50px} Top, L/R, Bottom
body {margin:50px 100px} Top, Bottom, L/R
body {margin:100px} Top, Bottom, Left, Right
Inline style examples (alternative to 3rd example above)—
Configures a horizontal line
CSS border Property
<body style="margin:50px 100px">
XHTML Syntax (also works in HTML5): <hr />
HTML5 Syntax: <hr>
Configures a border on the top, right, bottom, and left
sides of an element
Consists of
◦ border-width
◦ border-style
◦ border-color
h2
{
border-width:2px;
border-style:solid;
border-color:#ff0000;
}
-or-
CSS Borders: Block vs. Inline
Elements
h2
{border:2px solid #ff0000
}
If used with a BLOCK ELEMENT (e.g., h1, h2, p,
div, ...)
◦ Border extends to browser’s margin (or
specified width)
If used with an INLINE ELEMENT (e.g., a, i, em, b,
span, ...)
◦ Border closely outlines the element content
◦ Example:
h2 { border: 2px solid #ff0000; }
a { border: 2px solid #ff0000; }
…
<h2> Heading with Border </h2>
<a href="test.html"> This anchor tag has a border </a>
Configuring Specific Sides of a Border
Use CSS to configure a line on one or
more sides of an element
◦ border-bottom
◦ border-left
◦ border-right
◦ border-top
h2 {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: red;
}
-orh2 { border-bottom: 2px solid #ff0000 }
The CSS padding Property
Configures empty space between the
content of the HTML element and the
border
Padding is set to zero by default
Example without padding:
h2 { border:2px solid #ff0000;}
Example with 5px of padding:
h2 { border:2px solid #ff0000;
padding:5px; }
Use CSS to configure padding on one or
more sides of an element
◦
◦
◦
◦
CSS padding Property Shorthand:
two values
CSS padding Property Shorthand:
four values
Common Audio/Visual File Types
padding-bottom
padding-left
padding-right
padding-top
h2 {
border: 2px solid #ff0000;
background-color: #cccccc;
padding-left: 5px;
padding-bottom: 10px;
padding-top: 10px;
}
Two space separated number values or
percentages
◦ first value configures top and
bottom padding
◦ the second value configures right
and left padding
h2 {
border: 2px solid #ff0000;
background-color: #cccccc;
padding: 20px 10px;
}
Four space separated number values or
percentages
◦ Ordered to configure top, right,
bottom, and left padding
h2 {
border: 2px solid #ff0000;
background-color: #cccccc;
padding: 30px 10px 5px 20px;
}
Audio Files
.wav Wave File
.aiff Audio Interchange File Format
.mid Musical Instrument Digital
Interface (MIDI)
.au
Sun UNIX sound file
.mp3
MPEG-1 Audio Layer-3
.ogg Ogg Vorbis (open-source)
. m4a MPEG 4 Audio (supported by
Quicktime, iTune, iPod)
Video Files
.mov Quicktime
.avi
Microsoft Audio Video
Interleaved
.wmv Windows Media File
.flv
Flash Video File
.mpg MPEG (Motion Picture Experts
Group)
Commonly Used Plug-ins
Using Sound on a Web Page
The new HTML5 Embed Element
HTML5 Audio & Source Elements
HTML5 Video & Source Elements
CSS Image Gallery
Thumbnail
image
.m4v MPEG-4
.mp4 also MPEG-4
.ogv Ogg Theora (open-source)
.webm VP8 codec (open video format,
free)
Adobe Flash Player
Adobe Reader
Windows Media Player
Apple Quicktime
Audio:
<a href="WDFpodcast.mp3">
Podcast Episode 1
</a >
Video
<a href="sparky.mov" title="Playful Dog
Barks">
Sparky Video (1.2 MB)
</a>
<embed
type="application/x-shockwave-flash"
src="fall5.swf"
width="640"
height="100"
quality="high"
title="Fall Nature Hikes">
<audio controls="controls">
<source src="soundloop.mp3"
type="audio/mpeg">
<source src="soundloop.ogg"
type="audio/ogg">
<a href="soundloop.mp3">Download
the Audio File</a> (MP3)
</audio>
<video controls="controls"
poster="sparky.jpg"
width="160" height="150">
<source src="sparky.m4v"
type="video/mp4">
<source src="sparky.ogv"
type="video/ogg">
<a href="sparky.mov">Sparky the Dog</a>
(.mov)
</video>
Configure each thumbnail image:
<div id="gallery">
<ul>
<li>
<a href="photo1.jpg">
<img src="photo1thumb.jpg"
Main
image
width="100" height="75"
alt="Golden Gate Bridge">
<span><img src="photo1.jpg"
width="400" height="300"
alt="Golden Gate Bridge"><br>Golden
Gate Bridge </span></a>
</li>
The key CSS:
#gallery span {
display: none;
}
#gallery a:hover span {
display: block;
position: absolute;
top: 10px;
left: 300px;
text-align: center;
}
