today’s objectives review css | rules | declarations html structure document class asignment
TRANSCRIPT
Today’s objectives
Review CSS | Rules | Declarations HTML Structure document Class asignment
TYPES OF SELECTORS
CSS
Types of selectors The Universal Selector * { }
Tag or HTML Selectors h1 { } p { } body { }
Class Selectors .imageframes { }
ID Selectors #main-navigation { }
Selecting in context h1 strong { }
Attribute Selectors li img[title] { }
Can put a collection of rules in a file and refer to it from within an HTML document
link element with href attribute points to stylesheet, rel="stylesheet", type="text/css“
<link href="styles.css" rel="stylesheet" type="text/css" />
External Stylesheets
External styles are preferred over inline and embedded styles
5
The <link /> Element
A self-contained tag Placed in the header section Purpose: associates the external
style sheet file with the web page. Example:
<link rel="stylesheet" href="color.css" type="text/css" />
CSS Guidelines
Review the design of the page Configure global font and color
properties for the body selector Identify typical elements (such as
<h1>, <h3>, and so on) and declare style rules for these if needed.
Identify page areas such as logo, navigation, footer, and so on – configure an appropriate class or id for each.
HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.
HTML Tree
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Main Topic</h1>
<p>
A web page about the days of the week, specifically<strong>Tuesday.</strong>
</p>
</body>
</html>
HTML Tree
<html>
<head> <body>
<title> <p><h1>
<strong>
HTML Tree
<html>
<head> <body>
<title> <p><h1>
<strong>
Ancestor to all tags
Ancestor to h1, p, strong
Siblings
Child of <p>
Descendent of <html>
Descendent of <html> and <head>
HTML Tree
Ancestor: tag that wraps around another tag. <html> ancestor of all other tags
Descendent: A tag inside one or more tags. Parent: tag’s closest ancestor
<p><a>HOME</a></p>
Child: tag directly enclosed by another tag.<p><cite><a>HOME…</a></cite></p>
HTML Tree
Sibling: tags that are children of same tag.
<html>
<head> <body>
<title> <p><h1>
<strong>
Siblings
HTML Tree
Sibling: tags that are children of same tag.
<html>
<head> <body>
<title> <p><h1>
<strong>
Siblings
h1+p {color : green;}
Selectors | Context | DescendentDescendent selector - context h1 strong { color: red; }Any <strong> tag inside a level 1(h1) is red, but
other instances of the <strong> tag on the page aren’t affected.
<h1>Hello <strong>World</strong></h1>
li a { font-family: Arial; } Any <a> tag inside a line item is Arial font, but
other instances of the <a> tag on the page aren’t affected.
Specificity | Descendent selectors
Specific descendent selectors override less specific selectors
li a {color : green;} All anchors (<a></a>) in line items are
green
ol li a {color : green;}Only anchors in line item in ordered lists are
green
Child | descendent selectors
div > h1 {color : blue; } All heading 1 that are children of div will be
blue.
<div><h1>Hello world</h1><h1>Hello everyone</h1><p>Paragraph text…</p>
</div>
Adjacent Siblings
A tag that appears immediately after another tag in HTML
h1+p {color : green;}
Paragraphs that are adjacent to heading 1 will be green.
Sibling: tags that are children of same tag. h1+p { }
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Main Topic</h1>
<p>A web page about the days of the week, specifically<strong>Tuesday.</strong>
</p>
</body>
</html>These elements are adjacent: h1+p.
<html>
<head> <body>
<title> <p><h1>
<strong>
Attribute Selectors
Format a tag based on any attributes it has.
img[title] {border : solid 4px #EFEFEF;}
<img src=“image.png” title=“CO XYZ” />
All images with a title attribute will have a border
Attribute Selectors
li img[title] {border : solid 4px #EFEFEF;}
<ol><li><img src=“image.png” title=“CO
XYZ” /></li></ol>
All images that are line items with a title attribute will have a border
Attribute Selectors
Can be used with classes
.hiLight[title] {color : red;}
<span class="hiLight" title=“Also know as speed of light">186,000 MPS </span>
Tags using .hiLight class and title attribute are red
Attribute Selectors | ^ and $Format external links:
a[href^="http://"] { color : yellow; }
^ - begins withAny link that begins with “http://” is yellow
a[href$=".zip"] { color : green; }$ - Ends withAny link URL that ends with “zip” is green.
Attribute Selectors | *
img[src*="Ire"] {border : solid 5px green;}
* - Contains
<img src="banner_Ire.png“ />
All images where src attribute contains “_Ire” get a green, solid border.
Attribute Selectors | *
img[src*="Ire"] {border : solid 5px green;}
<img src="banner_Ire.png“ />
<img src="banner.png“ />
Pseudo-Classes
a:link | a:link { color : #EFEFEF; } a:visited | a:visited { color :
#CCCCCC; } a:hover | a:hover { color : # F33333; } a:active | a:active {color : #B2F511;}
Hover: (these will also work) h1:hover { color : #FFFFFF; } .hiLite:hover { color : #FFFFFF; }
Pseudo-Classes
Proper way to order four link pseudo-classes:
1. a:link { color: #F60; }2. a:visited { color: #900; }3. a:hover { color: #F33; }4. a:active {color: #B2F511; }
If order is changed, the hover and active don’t work.
Pseudo-elements
:first-letter – p:first-letter { font-size : 2em;
font-weight: bold;color: red;}
:first-line –p:first-line { font-size : 2em;
font-weight: bold;color: red;}
.hiLite:first-line { text-transform: uppercase; }
Pseudo-element | :before :before Adds content before an element.
p:before {content : "ON SPECIAL! " }p.onSpecial:before { content : "ON
SPECIAL! “; color : red;}
Pseudo-element | :after
:after Adds content after an element
p:after {content: url(bullet_Ire.png);}
p.tip:after {content: url(bullet_Ire.png);}
Pseudo-element | :first-child :first-child the first of all children an OL may have.
ol li:first-child { font-size:1.2em; }
<ol>
<li>Item 1</li>
<li>Item 2 </li><li>Item 3 </li></ol>
