today’s objectives css | rules | declarations project portfolio page introduce user-center...
TRANSCRIPT
![Page 1: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/1.jpg)
Today’s Objectives
CSS | Rules | Declarations Project portfolio page Introduce User-Center Design |
Design Activity
![Page 2: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/2.jpg)
CASCADING STYLE SHEETS (CSS)
![Page 3: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/3.jpg)
Visual vs. Structural
Use HTML to: Structure document Meaningful markup
Use CSS for styling
![Page 4: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/4.jpg)
<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>
![Page 5: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/5.jpg)
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
![Page 6: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/6.jpg)
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.
![Page 7: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/7.jpg)
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).
![Page 8: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/8.jpg)
CSS2
CSS Level 2, Revision 1 (CSS2.1) minor adjustments to CSS2 and is currently a Candidate Recommendation (W3C).
![Page 9: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/9.jpg)
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
![Page 10: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/10.jpg)
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.
![Page 11: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/11.jpg)
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.
![Page 12: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/12.jpg)
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.
![Page 13: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/13.jpg)
WAYS TO INCLUDE STYLES IN DOCUMENTS
CSS
![Page 14: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/14.jpg)
Inline Styles
<h1 style="color: #C7AA8D;">Heading 1</h1>
![Page 15: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/15.jpg)
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>
![Page 16: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/16.jpg)
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.
![Page 17: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/17.jpg)
External Style Sheets | Link with CSS
<style type="text/css">@import
url(myStyle.css);</style>
![Page 18: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/18.jpg)
External Style Sheets | Link with CSS
<style type="text/css">
@import url(bodyCss.css);@import url(paragraphsCss.css);p { color:red; }
</style>
![Page 19: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/19.jpg)
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);
![Page 20: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/20.jpg)
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).
![Page 21: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/21.jpg)
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">
![Page 22: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/22.jpg)
RULES, SELECTORS, DECLARATIONS
CSS
![Page 23: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/23.jpg)
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; }
![Page 24: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/24.jpg)
Style sheet | Rules
p { font-family: sans-serif; }
Rule
![Page 25: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/25.jpg)
Style sheet | Rules
p { font-size: small; font-family: sans-serif; }
Rule
![Page 26: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/26.jpg)
Style sheet | Rules
p { font-size: small; font-family: sans-serif; }
Rule Can be written this way
![Page 27: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/27.jpg)
The Rule
h1 { color : #C0C0C0; }
Rule
![Page 28: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/28.jpg)
The Rule
h1 {color : #c0c0c0;}
Selector Declaration
Rule
(What to format)
![Page 29: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/29.jpg)
The Rule
h1 { color : #c0c0c0;
font-family : Arial;
font-size : 2em;
}
Selector
Declaration block
Rule
![Page 30: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/30.jpg)
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
![Page 31: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/31.jpg)
The Declaration
h1 { color : #C0C0C0; }
Property
Property is a quality or characteristic that something possesses (e.g., color, size, style).
Value
![Page 32: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/32.jpg)
The Declaration
h1 { color : #C0C0C0; }
Property
Values get assigned to CSS properties, a color, length, URL, or keyword (small).
Value
![Page 33: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/33.jpg)
The Declaration
h1 { color : #c0c0c0; font-size : 2em;
}
p { font-family : Arial;}
Brackets distinguish declarations | rules
Colon separates property and values
Semicolon separates declarations
![Page 34: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/34.jpg)
TYPES OF SELECTORS
CSS
![Page 35: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/35.jpg)
Types of selectors
Tag or HTML Selectors: Page-Wide Styling
Class Selectors: Pinpoint Control ID Selectors: Specific Page Elements Group Selectors
![Page 36: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/36.jpg)
Types of selectors | HTML | Tag
h1 {color : #c0c0c0;}
body {background-color : #FFFFFF;}
p {padding : 10px;}
![Page 37: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/37.jpg)
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>
![Page 38: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/38.jpg)
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
![Page 39: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/39.jpg)
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>
![Page 40: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/40.jpg)
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>
![Page 41: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/41.jpg)
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
![Page 42: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/42.jpg)
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
![Page 43: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/43.jpg)
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>
![Page 44: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/44.jpg)
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>
![Page 45: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/45.jpg)
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.
![Page 46: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/46.jpg)
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
![Page 47: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/47.jpg)
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; }
![Page 48: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/48.jpg)
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)
![Page 49: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/49.jpg)
HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.
![Page 50: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/50.jpg)
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>
![Page 51: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/51.jpg)
HTML Tree
<html>
<head> <body>
<title> <p><h1>
<span>
![Page 52: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/52.jpg)
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>
![Page 53: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/53.jpg)
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>
![Page 54: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/54.jpg)
HTML Tree
Sibling: tags that are children of same tag.
<html>
<head> <body>
<title> <p><h1>
<span>
Siblings
![Page 55: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/55.jpg)
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>
![Page 56: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/56.jpg)
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.
![Page 57: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/57.jpg)
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
![Page 58: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/58.jpg)
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.
![Page 59: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/59.jpg)
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>
![Page 60: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/60.jpg)
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.
![Page 61: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/61.jpg)
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; }
![Page 62: Today’s Objectives CSS | Rules | Declarations Project portfolio page Introduce User-Center Design | Design Activity](https://reader036.vdocuments.site/reader036/viewer/2022070409/56649e7a5503460f94b7a291/html5/thumbnails/62.jpg)