client-side web technologiesjmussits/08724/lectures/4/css1.pdf · css selectors •patterns that...
TRANSCRIPT
Client-Side Web TechnologiesCSS Part I
Topics
• Style declarations
• Style sources
• Selectors
• Selector specificity
• The cascade and inheritance
• Values and units
CSS
• Cascading Style Sheets
• CSS specifies the presentation of
web page content
• W3C CSS Validation Service:
http://jigsaw.w3.org/css-validator/
CSS Level 3
• Modular
• CSS 2.1 specification is its core
• Each module adds functionality and/or
replaces part of the CSS 2.1 specification
• Allows for more immediate, incremental
improvement
• http://www.w3.org/Style/CSS/current-work
Module Examples
• CSS 2.1 (core)
• Media Queries Level 3 (module)
• Selectors Level 3 (module)
• Color Level 3 (module)
• Values and Units Level 3 (module)
• Etc.
CSS Styles
• A declaration consists of:• A CSS property name
• A property value
• Separated by a colon
• Examples:• background-color: gray
• color: white
CSS Styles (continued)
• A declaration block starts with a left curly brace ({)
and ends with a matching right curly brace(})
• In between must be a list of zero or more
semicolon-separated (;) declarations
• Example:
{
background-color: gray;
color: white
}
CSS Styles (continued)
• A rule set consists of a selector (discussed later)
followed by a declaration block
• Example:
h1 {
color: red
}
CSS Styles (continued)
• Properties may begin with a dash (-)
• These represent vendor-specific
properties
• Examples:• -webkit-animation
• -moz-box-sizing
• -moz-border-radius
How Website Authors Apply Styles
• Inline using the HTML global attribute style
• Embedded using the HTML style
element
• External style sheets
Inline Styles<!doctype html>
<html>
...
<div style=“background-color: red;
height: 100px; width: 100px;”>
<p style=“color: blue;”>Hello</p>
</div>
...
</html>
Embedded Styles<!doctype html>
<html>
<head>
<title>Example</title>
<style type=“text/css”>
p {
color: blue;
}
</style>
</head>
...
</html>
External Style Sheet<!doctype html>
<html>
<head>
<title>Example</title>
<link rel=“stylesheet” type=“text/css”
href=“styles.css”>
</head>
...
</html>
External Style Sheet (continued)styles.css
p {
color: blue;
}
Other Sources of Styles
• User agents (browsers) have default styles that they apply
when no other style is specified (e.g. underlined hyperlinks)
• http://www.w3.org/TR/CSS21/sample.html
• User styles can be defined by browser users
• Chrome has eliminated support... (why?)
• Firefox:
• Find your profile folder (about:support)
• Create/edit chrome\userContent.css
• Why is the folder called “chrome”?
• https://www.nngroup.com/articles/browser-and-gui-chrome/
Media Queries• Allows for presentation to be tailored to a specific
range of output devices without changing the
content itself (think responsive web design!)
• Consist of a media type and zero or more
expressions that check for the conditions of
particular media features
• Can be defined:
• Using the media attribute of the link element
• In embedded styles or external style sheets using the @media at-rule
• http://www.w3.org/TR/css3-mediaqueries/
• See the MediaQueries examples
Imported Styles
• The @import at-rule allows importing style rules
from other style sheets
• Used in external style sheets and must occur before
any other rules
• Can be used with media queries to specify media-dependent @import rules
• Examples:
• @import “otherstyles.css”;
• @import url(“otherstyles.css”);
• @import url(“fineprint.css”) print;
• See the Import examples
Feature Queries• The @supports at-rule test whether the user agent
supports property:value pairs
• Defined in Conditional Rules Module Level 3
• Candidate Recommendation status
• https://www.w3.org/TR/css3-conditional/@supports ( display: flexbox ) {
body {
display: flexbox;
font-size: 12px;
}
}
• Also supports and, or, and not for greater flexibility
CSS Selectors
• Patterns that match against elements
in an HTML document
• CSS uses selectors to bind style properties to elements
• There are many defined selectors that
can be combined to create very
powerful and flexible effects
Type Selectors
• The name of an HTML element
• Matches all elements of the type
• The following will cause all h1
elements in the document to have a
green text color:
h1 {
color: green;
}
Universal Selector
• Denoted with an asterisk (*)
• Matches all elements
• The following will cause all elements in
the document to have a green text
color:
* {
color: green;
}
Attribute Selectors
• Allows for the representation of an
element’s attributes
• Matches elements that have an
attribute corresponding to the attribute
selector
Attribute SelectorsSelector Representation
[att] An element with the att attribute, regardless of value
[att=val] An element with the att attribute whose value is exactly "val"
[att~=val] An element with the att attribute whose value is a whitespace-
separated list of words, one of which is exactly "val"
[att|=val] An element with the att attribute, its value either being exactly
"val" or beginning with "val" immediately followed by "-"
[att^=val] An element with the att attribute whose value begins with the
prefix "val"
[att$=val] An element with the att attribute whose value ends with the suffix
"val"
[att*=val] An element with the att attribute whose value contains at least
one instance of the substring "val"
Class Selectors
• Denoted with a period (.) followed immediately by an element’s class attribute value
• Matches elements that have a class attribute value
corresponding to the selector
• Thus *.value and *[class~=value] have the same
meaning
• The following will cause all elements in the document with class attribute ~= “foo” to have a green text color:
*.foo {
color: green;
}
ID Selectors• Denoted with a number sign (#) followed immediately by an
element’s id attribute value
• Matches elements that have an id attribute value
corresponding to the selector
• Thus *#xyz and *[id=xyz] will match the same
elements, however there is a BIG difference between these
two as we will soon see
• The following will cause the element in the document with id attribute = “xyz” to have a green text color:
*#xyz {
color: green;
}
Pseudo-Class Selectors• Allows for element selection based on:
• Information that lies outside the document tree
• Or information that cannot be expressed using other
selectors
• Denoted by a colon (:) followed by the name
of the pseudo-class and optionally followed
by a value between parenthesis
Dynamic Pseudo-Classes
Pseudo-Class Representation
:link Applies to links that have not yet been visited
:visited Applies once the link has been visited by the user
:hover Applies while the user designates an element with
a pointing device (e.g. mouse pointer hovering
over element)
:active Applies when an element is being activated by the
user (e.g. time between mouse button pressed
and released)
:focus Applies while an element has the input focus
UI Element State Pseudo-Classes
Pseudo-Class Representation
:enabled Represents elements that are in an enabled state;
such elements have a corresponding disabled
state
:disabled Represents elements that are in a disabled state;
such elements have a corresponding enabled
state
:checked Represents elements (such as radio buttons and
checkboxes) that are “checked”
Structural Pseudo-Classes
Pseudo-Class Representation
:root Represents an element that is the root of the
document (in HTML, the html element)
:nth-child() :nth-child(an+b) notation represents an
element that has (an+b)-1 siblings before it in
the document tree and has a parent element
:nth-last-child() :nth-last-child(an+b) notation
represents an element that has (an+b)-1
siblings after it in the document tree and has
a parent element
Structural Pseudo-Classes (continued)
Pseudo-Class Representation
:nth-of-type() :nth-of-type(an+b) notation represents an
element that has (an+b)-1 siblings with the same
element name before it in the document tree and
has a parent element
:nth-last-of-type() :nth-last-of-type(an+b) notation represents
an element that has (an+b)-1 siblings with the
same element name after it in the document tree
and has a parent element
:first-child Represents an element that is the first child of
some other element
:last-child Represents an element that is the last child of
some other element
Structural Pseudo-Classes (continued)
Pseudo-Class Representation
:first-of-type Represents an element that is the first sibling of its
type in the list of children of its parent element
:last-of-type represents an element that is the last sibling of its
type in the list of children of its parent element
:only-child Represents an element that has a parent element
and whose parent element has no other element
children
:only-of-type Represents an element that has a parent element
and whose parent element has no other element
children with the same element name
:empty Represents an element that has no children at all
The Negation Pseudo-Class• A functional notation taking a simple selector
(discussed later) as an argument
• It represents an element that is not represented by
its argument
• The following will cause all elements other than div elements to have a green text color:
*:not(div) {
color: green;
}
Pseudo-Elements
• Create abstractions about the document tree
beyond those specified by HTML
• Denoted by two colons (::) followed by the name of
the pseudo-element
• Only one pseudo-element may appear per
selector and must appear at the end
Pseudo-Elements (continued)
Pseudo-Element Representation
::first-line Represents the contents of the first formatted line of an element
::first-letter Represents the first letter of an element
CSS Combinators
• Describe relationships among elements
• Descendant combinator:
• Denoted by a whitespace
• A selector “A B” represents an element B that is a
descendant of element A
• Child combinator:
• Denoted by a greater than sign (>)
• A selector “A>B” represents an element B that is a child
of element A
CSS Combinators (continued)
• Sibling combinators
• Adjacent sibling combinator:
• Denoted by a plus sign(+)
• A selector “A+B” represents an element B that shares the same
parent as element A and element B immediately follows
element A
• General sibling combinator:
• Denoted by a tilde (~)
• A selector “A~B” represents an element B that shares the same
parent as element A and element B follows element A
CSS Selector Syntax
• Simple selector:• Type selector, universal selector, attribute
selector, class selector, ID selector, and
pseudo-class
• Examples:• div
• *
• [class=“foo”]
• .foo
• #abc
• :checked
CSS Selector Syntax (continued)
• Sequence of simple selectors:• A chain of simple selectors not separated by any
combinator and always beginning with a type or
universal selector
• Examples:
• div.foo.bar (matches div elements having both classes)
• *[lang=“en-US”]
• input:focus
• *.foo
• Note: the universal selector can generally be dropped so “*.foo” is the same as “.foo”
CSS Selector Syntax (continued)
• Selector:• A chain of one or more sequences of simple selectors
separated by combinators
• Examples:• div.foo (one sequence)
• div a:hover (two sequences)
• div>ol>li (three sequences)
• Note: Only one pseudo-element can appear and must
be appended to the last sequence
• OK: div p:first-line
• Incorrect: p:first-line span
CSS Selector Groups
• Defined by a comma (,) separated list of selectors
• Represents the union of all elements selected by
each individual selector in the list
• The following will cause all div elements and all
span elements to have a green text color:
div, span {
color: green;
}
• See the Selectors examples
Selector Examples
a n b an+b
0 0 2 2
a n b an+b
0 0 2 2
:
a n b an+b
2 0 1 1
2 1 1 3
2 2 1 5
2 3 1 7
:
CSS Selector Specificity
• Used to determine which rule takes precedence
• Is calculated as:
• Count the number of ID selectors in the selector (=a)
• Count the number of class selectors, attribute selectors,
and pseudo-classes in the selector (=b)
• Count the number of type selectors and pseudo
elements in the selector (=c)
• Ignore the universal selector
• Concatenating the three numbers a-b-c gives the
specificity
CSS Selector Specificity (continued)
• Examples:• * a=0, b=0, c=0 Specificity = 0,0,0
• li a=0, b=0, c=1 Specificity = 0,0,1
• ul li a=0, b=0, c=2 Specificity = 0,0,2
• ul ol+li a=0, b=0, c=3 Specificity = 0,0,3
• *[id=“x34y”] a=0, b=1, c=0 Specificity = 0,1,0
• h1 + *[rel=“up”] a=0, b=1, c=1 Specificity = 0,1,1
• ul ol li.red a=0, b=1, c=3 Specificity = 0,1,3
• li.red.level a=0, b=2, c=1 Specificity = 0,2,1
• #x34y a=1, b=0, c=0 Specificity = 1,0,0
• #s12:not(div) a=1, b=0, c=1 Specificity = 1,0,1
CSS Selector Specificity (continued)
• Styles declared with the HTML style attribute
always take precedence over ones declared with
selectors so there is an added component to
calculating specificity for HTML document styles
• Examples:• ul li s=0,a=0, b=0, c=2 Specificity = 0,0,0,2
• #x34y s=0,a=1, b=0, c=0 Specificity = 0,1,0,0
• style=“…” s=1,a=0, b=0, c=0 Specificity = 1,0,0,0
!important Rules
/* From the user's style sheet */
p { text-indent: 1em !important }
p { font-style: italic !important }
p { font-size: 18pt }
/* From the author's style sheet */
p { text-indent: 1.5em !important }
p { font-style: normal !important }
p { font-size: 12pt !important }
p { font-size: 24pt }
The Cascade• To find the value for an element’s property:
1. Find all declarations that apply to the element and
property
2. Sort in ascending order
1. User agent (browser) declarations
2. User normal declarations
3. Author normal declarations
4. Author important declarations (!important rules)
5. User important declarations (!important rules)
3. Sort rules with the same importance and origin by
selector specificity in ascending order (a, then b, then c)
4. Finally, sort by order specified (i.e. most recent rule has
precedence)
Inheritance• Some property values are inherited by the children
of an element in the document tree
• Each property defines whether it is inherited or not
• Property declarations may specify a value of inherit to enforce inheritance of values or cause
inheritance on properties that are not normally
inherited
div {
background-color: inherit;
}
Assigning Value• User agents (browsers) determine specified
property values in this order:
1. If the cascade results in a value, use it
2. Otherwise, if the property is inherited, use the value of
the parent element
3. Otherwise, use the property’s initial value (from
property’s definition)
• Specified values are then resolved to computed
values as dictated by property definitions
• See CascadeAndInheritance examples
CSS Values and Units• Keywords
• none, collapse, inherit
• Resource locators
• url(“penguins.jpg”)
• Numbers
• 20, 3.5
• Percentages
• 50%
• Distance units
• 0.8em, 100px
• Colors
• blue, #efefef
• There are some others
Distance UnitsUnit Description
cm, mm, in, pt, pc centimeters, millimeters, inches, points, picas -
these are generally not good for screen media
but are useful for printing
em relative to font-size so if the font-size is 18px then 1em = 18px
rem relative to the font-size on the root element
(the html element)
ex relative to the height of a lowercase x in the
font being used
px not related to the font and not equivalent to
device pixels, but behave much like absolute
units
Color Units• Keywords
• blue, green, yellow, etc.
• RGB – red, green, blue
• #ff0000 3 or 6 hexadecimal characters
• rgb(255,0,0) Integer values 0 to 255
• rgb(100%, 0%, 0%) Percentage values 0% to 100%
• RGBA – adds alpha to specify opacity
• rgba(255,0,0,1) Alpha is number from 0.0 to 1.0
• HSL – hue, saturation, lightness
• hsl(120, 100%, 50%) Hue is defined in degrees
• HSLA – adds alpha
• hsla(240, 100%, 50%, 0.5)
calc() Function
• Allows mathematical expressions with +, -, *, and /
to be used as component values
p {
font-size: calc(1rem – 2px);
}
• See Units examples