Building a WordPress Blog

Neal Stublen
[email protected]
Course Road Map
Create web page layouts using CSS
 Manage CSS
 Test website validity
 Create navigation menus using CSS
 Incorporate meta content and
multimedia

What’s Ahead?
Using CSS selectors
 Where does CSS markup go?
 Handling browser-specific issues
 Making web sites accessible
 Using alternate CSS

CSS Selectors

Simple CSS selectors
 .class (element class)
○ .highlight { font-weight: bold; }
 #id (element id)
○ #footer { font-size: 12px; }
 element
○ body { background-color: white; }
 * (all elements)
○ * { margin: 0; }
Multiple Elements

Apply a set of style attributes to multiple
element types
 element1, element2 (multiple elements)
All <h1> and <h2> elements:
h1, h2 {
font-color: blue;
}
<h1>…</h1>…<h2>…</h2>
Parent-Child Attributes

Apply a set of style attributes to an element
that is a child of another element type
 element1>element2 (parent-child)
Any <p> element directly within a <div>:
div>p {
font-family: Verdana;
}
<div><p>…</p></div>
Any Descendent

Apply a set of style attributes to an element
type, but only within another specific element
type
 element1 element2 (any descendant)
Any <a> element within a <div>:
div a {
font-family: Verdana;
}
<div>…<p>…<a>…</a>…</p>…</div>
Immediate Siblings

Apply a set of style attributes to an element
that is placed directly after another element
 element1+element2 (immediate siblings)
Any <p> followed by a <div>:
p+div {
clear: both;
}
<p>…</p><div>…</div>
Older Sibling

Apply a set of style attributes to an element
that is preceded by another element
 element1~element2 (any sibling)
Any <ul> preceded by <p>:
ul~p {
background-color: red;
}
<p>…</p>…<h2>…</h2>…<ul>…</ul>
Combining with Class

Combining selectors can mix class, id,
and element selectors
 .menu ul { … }
 #footer a { … }

(Using Brackets)
Element with Class

Apply a set of style attributes to an element that has
a specific class
 element.class
List items with the nav_menu class:
li.nav_menu {
font-color: blue;
}
<li class=“nav_menu”>…</li>
<li class=“grocery_list”>…</li>
Element with Attribute

Apply a set of style attributes to an element that has
a specific attribute
 element[attribute]
Any anchor tag with a target attribute:
a[target] {
background-color: yellow;
}
<a target=“_blank”>…</a>
<a target=“_top”>…</a>
Element with Attribute Value

Apply a set of style attributes to an element that has
a specific attribute value
 element[attribute=value]
Any anchor tag with a target attribute of “_blank”:
a[target=_blank] {
background-color: yellow;
}
<a target=“_blank”>…</a>
<a target=“_top”>…</a>
Element with Partial Value

Apply a set of style attributes to an
element that partially matches an
attribute value
 element[attribute^=prefix]
 element[attribute$=postfix]
 element[attribute*=contains]
Many, Many More

Complete list available online
 http://www.w3schools.com/cssref/css_select
ors.asp
Practice Activity
Practice using selectors to specify
background colors
 Does the ordering of selectors matter?

Practice Activity

Advanced Selectors, Activity 1
 Change link appearance (p.37)
What’s Ahead?
Using CSS selectors
 Where does CSS markup go?
 Handling browser-specific issues
 Using alternate CSS

Using CSS Files
We can place CSS markup in the
<style> section or on an element
 Disadvantages?

 Duplicated across pages
 Difficult to change
External CSS Files

<link> tags in <head> section
<link rel=“stylesheet”
type=“text/css”
href=“filename.css” />

Multiple <link> tags merge multiple CSS
files
Import CSS Files

@import in the <head> section
@import “filename.css”
@import url(filename.css)

Multiple <link> tags merge multiple CSS
files
Practice Activity

External CSS, Activity 2
 Move styles to external CSS file (p.44)
Practice Activity

External CSS, Activity 3
 Use external CSS file on multiple pages
(p.47)
Browser-specific CSS
Not all browsers agree
 Sites should be tested with all the major
browsers (old and new) that may access
the site

Conditional Comments

Comments can help instruct Internet Explorer on
how a site should be rendered


code for non-IE-browsers


Used in <head> or <body>, not external CSS
Practice Activity

Conditional Comments, Activity 4
 Create styles for non-IE browsers (p.53)

http://www.quirksmode.org
Alternate CSS
Some CSS styles may be difficult for all
users
 Alternate CSS styles can provide larger fonts
or high contrast color schemes

<link rel=“alternate stylesheet”
... title=“High Contrast” />

The browser will make the alternate style
available to the user (possibly)
Practice Activity

Alternate CSS, Activity 5
 Link alternate CSS to site pages (p.60)

You may want to consider using cookies
and server-side support to assist in
providing alternate CSS
What’s Behind?
Using CSS selectors
 Where does CSS markup go?
 Handling browser-specific issues
 Using alternate CSS

Review
<div>
<ul class=“menu”>
<li><a href=“…”>Select Me</a></li>
</ul>
</div>
Which selector specifies the anchor element?
A. .menu a
B. a.menu
C. a li ul.menu
D. ul a
Review
<div>
<ul class=“menu”>
<li><a href=“…”>Select Me</a></li>
</ul>
</div>
Which selector specifies the anchor element?
A. .menu a
B. a.menu
C. a li ul.menu
D. ul a
Review
<div class=“header”>
<p>First paragraph</p>
<p>Select Me</p>
</div>
Which selector specifies the 2nd paragraph?
A. div p p
B. .header p>p
C. div p+p
D. #header p>p
Review
<div class=“header”>
<p>First paragraph</p>
<p>Select Me</p>
</div>
Which selector specifies the 2nd paragraph?
A. div p p
B. .header p>p
C. div p+p
D. #header p>p
Review
Which display property value can be used
to create vertical menus?
A. block
B. inline
C. vertical
D. top bottom
Review
Which display property value can be used
to create vertical menus?
A. block
B. inline
C. vertical
D. top bottom

Download Report

Building a WordPress Blog

Paperzz.com

Your Paperzz