today’s objectives css | rules | declarations project portfolio page introduce user-center...
TRANSCRIPT
Today’s Objectives
CSS | Rules | Declarations Project portfolio page Introduce User-Center Design |
Design Activity
CASCADING STYLE SHEETS (CSS)
Visual vs. Structural
Use HTML to: Structure document Meaningful markup
Use CSS for styling
<p>In the summer of 2009, I developed Mapping Temporal Relations of
Discussions Software (MTRDS) as a tool to analyze the temporal aspects
of online course discussions. <q>“This Web-based prototype imports
discussion files from a course management system and diagrams the
temporal aspects of conversations.”</q> From the diagrams, one can
observe the general time and date of discussion activity and individual
patterns of interactivity.</p>
<p>I am seeking funds to assist me in further developing an intelligent
online tool that provides <strong>semantic</strong> as well as
<strong>temporal </strong> analyses of online educational
conversations. </p>
<h1> Introduction</h1>
<h2> Educational Conversations</h2>
What are style sheets?
HTML was not meant to specify an exact appearance for your Web pages.
CSS (Cascading Style Sheets) allows you to specify more information about the appearance of elements on a Web page.
Zen Garden
CSS Level 1 – CSS1
First version of CSS (CSS Level 1 - CSS1) in 1996.
Included properties for font, color, and spacing instructions to page elements.
Lack of browser support prevented widespread use of CSS.
CSS2
CSS Level 2 (CSS2) released in 1998.
Added positioning properties allowed CSS to be used for page layout.
Introduced styles for other media types (such as print).
CSS2
CSS Level 2, Revision 1 (CSS2.1) minor adjustments to CSS2 and is currently a Candidate Recommendation (W3C).
CSS2.1 and CSS3
CSS 2.1 builds on CSS2 which builds on CSS1.
Supports media-specific style sheets - authors may tailor presentation of documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc.
CSS 2.1 is derived from and will replace CSS2.
CSS3 specification – Working draft
CSS
Most browsers support majority of CSS1, CSS2, and CSS2.1 specifications.
Some browsers already support features from CSS Level 3 (CSS3) - still in development.
Source : www.w3.org/Style/CSS.
The Benefits of Using CSS
Better type and layout controls. Less work. Change appearance of
site by editing one style sheet. Potentially smaller file sizes and
faster download.
The Benefits of Using CSS
More accessible sites. Meaningfully marking up content makes it more accessible for nonvisual or mobile devices.
Reliable browser support. Almost all browsers support all of CSS1 and most of CSS2.
WAYS TO INCLUDE STYLES IN DOCUMENTS
CSS
Inline Styles
<h1 style="color: #C7AA8D;">Heading 1</h1>
Internal Style Sheets
<head>
<style type="text/css">
h1 { color : #C0C0C0; }
font-family: Arial; font-size: 1.5em; }
p { font-size: small;
font-family: sans-serif; }
</style>
</head>
External Style Sheets | Linked with HTML | 1 or more sheets
<head>
<link rel="stylesheet" type="text/css" href=“myStylesA.css“ />
<link rel="stylesheet" type="text/css" href=“myStylesB.css“ />
</head>
rel="stylesheet" | identifies the type of link, link to a style sheet.
type="text/css" tells browser what type of data, a text file with CSS.
External Style Sheets | Link with CSS
<style type="text/css">@import
url(myStyle.css);</style>
External Style Sheets | Link with CSS
<style type="text/css">
@import url(bodyCss.css);@import url(paragraphsCss.css);p { color:red; }
</style>
Link to Master External Style Sheets with @import directives
<head>
<link rel="stylesheet" type="text/css" href=“Import.css“ />
</head>
Import.css file contains@import url(bodyCss.css);
@import url(paragraphsCss.css);
Link to Master External Style Sheets with @import directives Benefit of using single external style
with @import directives :
Do not need to modify html in pages, when adding or removing sheets.
If you divide styles or add additional styles sheets, just open the main style sheet containing the @import directives and add or remove @import url(fileName.css).
External Styles
page4.htm
page6.htmpage7.htm
page2.htmpage3.htmpage1.htm
index.htm Style.cssStyle.css
page5.htm
• Make changes from a single document• Changes multiple documents
• Make changes from a single document• Changes multiple documents
<link rel="styleSheet" type"text/css" href="styles.css">
RULES, SELECTORS, DECLARATIONS
CSS
CSS Grammer
Made up of one or more style instructions (called Rules).
Rules describe how elements get displayed.
h1 { color: green; } or h1 {color : rgb(255, 0,0);}
p { font-size: small; font-family: sans-serif; }
Style sheet | Rules
p { font-family: sans-serif; }
Rule
Style sheet | Rules
p { font-size: small; font-family: sans-serif; }
Rule
Style sheet | Rules
p { font-size: small; font-family: sans-serif; }
Rule Can be written this way
The Rule
h1 { color : #C0C0C0; }
Rule
The Rule
h1 {color : #c0c0c0;}
Selector Declaration
Rule
(What to format)
The Rule
h1 { color : #c0c0c0;
font-family : Arial;
font-size : 2em;
}
Selector
Declaration block
Rule
The Declaration
h1 { color : #C0C0C0; }
Property
Declaration has two parts separated by a colon:
Property - part before the colon Value - part after the colon
Value
The Declaration
h1 { color : #C0C0C0; }
Property
Property is a quality or characteristic that something possesses (e.g., color, size, style).
Value
The Declaration
h1 { color : #C0C0C0; }
Property
Values get assigned to CSS properties, a color, length, URL, or keyword (small).
Value
The Declaration
h1 { color : #c0c0c0; font-size : 2em;
}
p { font-family : Arial;}
Brackets distinguish declarations | rules
Colon separates property and values
Semicolon separates declarations
TYPES OF SELECTORS
CSS
Types of selectors
Tag or HTML Selectors: Page-Wide Styling
Class Selectors: Pinpoint Control ID Selectors: Specific Page Elements Group Selectors
Types of selectors | HTML | Tag
h1 {color : #c0c0c0;}
body {background-color : #FFFFFF;}
p {padding : 10px;}
Types of selectors | Classes
Classes (applies to more than one type of element)
.mytext {font-family: Verdana; font-size: 14px;}
<p class=“mytext”>Hello World</p>
<span class=“mytext”>Learning CSS</span>
Dependent Classes (when the class is applied to a specific tag - .hiLight only applies to h1 element)
h1.hiLight {background-color : blue;}
<h1 class=“hiLight”>Hello World</h1><h2 class=“hiLight”>Hello World</h2><p class=“hiLight”>Hello World</p>
Types of selectors | Dependent Classes
Types of selectors | Dependent Classes Dependent Classes (when the class is applied
to a specific tag.)
h1.hiLight {background-color : blue;}.hiLight {background-color : yellow;}
<h1 class=“hiLight”>Hello World</h1><h2 class=“hiLight”>Hello World</h2><p class=“hiLight”>Hello World</p>
Types of selectors | multiple classesMultiple classes applied to the same tag. Add two or more class names to tag. List more
than two classes but need space between class names.
.hiLight {color : blue;}
.banner {font-family : Arial, sans-serif;}
<p class=“hiLight banner">Hello world</p>
Types of selectors | Class NamesClass names Meaningful names Start with period Class name must always start with a letter.
.3Rivers is invalid .threeRivers is valid | .p3Rivers is valid
Can contain any letter, number, hyphen or underscore
Can NOT contain symbols like &, *, or !. Case sensitive – mytext is different from myText
Types of selectors | Class NamesName classes (and IDs) by purpose
not appearance Use names that describe purpose of the
style. If red is used to highlight errors in a
report, then: .redColor – is a poor name
.showErrors – is a better name
Types of selectors | ID
ID selectors identify: Major sections Unique content | a rule to ONE element on a page. Configured with #idname
#banner { background-color : #FF00FF;}
<div id=“banner”></div>
Types of selectors | ID
Creates a rule for an id titled “banner”.
Applies to ID “banner”<style type="text/css">
#banner { color : #000000;font-size:2em; font-style: italic;
}
</style>
<div id=“banner”>Hello world!
</div>
Classes versus IDs
Identify sections that occur once per page.
Identify the unique parts of a page (e.g., branding).
.classes #IDs A style is
needed several times on a page.
ID selectors have priority over classes.
Types of selectors | ID NamesDon’t use ID names based on position Use name based on purpose of content:
Poor#topright#colMid#top#bottom#sideNav
Better#events#mainNav#branding#siteInfo#news
Combining Rules | Group Selectors
h1 { color : #F1CD33; } h2 { color : #F1CD33; } h3 { color : #F1CD33; } h4 { color : #F1CD33; } h5 { color : #F1CD33; } h6 { color : #F1CD33; }
OR Styling Groups of Tags
h1, h2, h3, h4, h5, h6 { color : #F1CD33; }
Combining Rules | Group Selectors Tags only
h1, h2, h3, h4, h5, h6 { color : #F1CD33; }
Combination of selector types in a group selector.
h1, p, .copyright, #banner { color: #CCCCCC; }
(sets color of tags, class, ids to #CCCCCC)
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>
<span>
HTML Tree
<html>
<head> <body>
<title> <p><h1>
<span>
Ancestor to all tags
Ancestor to h1, p, span
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>
<span>
Siblings
HTML Tree
<html>
<head> <body>
<title> <p><h1>
<span>
Siblings
<html><body><h1>Hello world</h1><p>This is <span>going to be</span> …</p></body></html>
Selectors | Context | DescendentDescendent selector context p strong { color: red; }Any <strong> tag inside a paragraph (p) is
red, but other instances of the <strong> tag on the page are not affected.
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 in line items are green
ol li a {color : green;}Only anchors in line item in ordered lists
are green
Selectors | Descendent selectors
p.intro { color : red;}<p class=“intro”>Hello World</p>
Any paragraph with .intro class will be Red.
p .intro {color : red;}<p>Hello <span class=“intro">
World</span</p>
Any tag with .intro class that is in a <p> tag will be Red.
Child 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>
</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.
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; }
