Client-Side Web Technologies. CSS Part I

Size: px

Start display at page:

Download "Client-Side Web Technologies. CSS Part I"

Abel McDaniel
6 years ago
Views:

1 Client-Side Web Technologies CSS Part I

2 Topics Style declarations Style sources Selectors Selector specificity The cascade and inheritance Values and units

3 CSS Cascading Style Sheets CSS specifies the presentation of web page content W3C CSS Validation Service:

4 Modular CSS Level 3 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

5 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.

6 CSS Styles A declaration consists of: A CSS property name A property value Separated by a colon Examples: background-color: gray color: white

7 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

8 CSS Styles (continued) A rule set consists of a selector (discussed later) followed by a declaration block Example: h1 { } color: red

9 CSS Styles (continued) Properties may begin with a dash (-) These represent vendor-specific properties Examples: -webkit-animation -moz-box-sizing -moz-border-radius

10 How Website Authors Apply Styles Inline using the HTML global attribute style Embedded using the HTML style element External style sheets

11 Inline Styles <!doctype html> <html>... <div style= background-color: red; height: 100px; width: 100px; > <p style= color: blue; >Hello</p> </div>... </html>

12 Embedded Styles <!doctype html> <html>... <head> <title>example</title> <style type= text/css > p { } </style> </head> </html> color: blue;

13 External Style Sheet <!doctype html> <html> <head> <title>example</title> <link rel= stylesheet type= text/css href= styles.css > </head>... </html>

14 External Style Sheet (continued) styles.css p { } color: blue;

15 Other Sources of Styles User agents (browsers) have default styles that they apply when no other style is specified (e.g. underlined hyperlinks) 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?

16 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 at-rule See the MediaQueries examples

17 Imported Styles 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 rules otherstyles.css url( otherstyles.css url( fineprint.css ) print; See the Import examples

18 Feature Queries at-rule test whether the user agent supports property:value pairs Defined in Conditional Rules Module Level 3 Candidate Recommendation status ( display: flexbox ) { } body { } display: flexbox; font-size: 12px; Also supports and, or, and not for greater flexibility

19 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

20 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; }

21 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; }

22 Attribute Selectors Allows for the representation of an element s attributes Matches elements that have an attribute corresponding to the attribute selector

23 Attribute Selectors Selector [att] [att=val] [att~=val] [att =val] Representation An element with the att attribute, regardless of value An element with the att attribute whose value is exactly "val" An element with the att attribute whose value is a whitespaceseparated list of words, one of which is exactly "val" An element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" [att^=val] [att$=val] [att*=val] An element with the att attribute whose value begins with the prefix "val" An element with the att attribute whose value ends with the suffix "val" An element with the att attribute whose value contains at least one instance of the substring "val"

24 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;

25 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;

26 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

27 Dynamic Pseudo-Classes Pseudo-Class :link :visited :hover :active :focus Representation Applies to links that have not yet been visited Applies once the link has been visited by the user Applies while the user designates an element with a pointing device (e.g. mouse pointer hovering over element) Applies when an element is being activated by the user (e.g. time between mouse button pressed and released) Applies while an element has the input focus

28 UI Element State Pseudo-Classes Pseudo-Class :enabled :disabled :checked Representation Represents elements that are in an enabled state; such elements have a corresponding disabled state Represents elements that are in a disabled state; such elements have a corresponding enabled state Represents elements (such as radio buttons and checkboxes) that are checked

29 Structural Pseudo-Classes Pseudo-Class :root Representation 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

30 Structural Pseudo-Classes (continued) Pseudo-Class :nth-of-type() :nth-last-of-type() :first-child :last-child Representation :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(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 Represents an element that is the first child of some other element Represents an element that is the last child of some other element

31 Structural Pseudo-Classes (continued) Pseudo-Class :first-of-type :last-of-type :only-child :only-of-type :empty Representation Represents an element that is the first sibling of its type in the list of children of its parent element represents an element that is the last sibling of its type in the list of children of its parent element Represents an element that has a parent element and whose parent element has no other element children Represents an element that has a parent element and whose parent element has no other element children with the same element name Represents an element that has no children at all

32 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;

33 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

34 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

35 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

36 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

37 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

38 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 *[lang= en-us ] input:focus *.foo (matches div elements having both classes) Note: the universal selector can generally be dropped so *.foo is the same as.foo

39 CSS Selector Syntax (continued) Selector: A chain of one or more sequences of simple selectors separated by combinators Examples: div.foo div a:hover div>ol>li (one sequence) (two sequences) (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

40 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

41 Selector Examples

51 a n b an+b

53 a n b an+b

54 :

55 : a n b an+b

56 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

57 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

58 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

59 !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 }

60 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)

61 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;

62 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

63 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

64 Unit Distance Units 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 rem ex px relative to font-size so if the font-size is 18px then 1em = 18px relative to the font-size on the root element (the html element) relative to the height of a lowercase x in the font being used not related to the font and not equivalent to device pixels, but behave much like absolute units

65 Keywords blue, green, yellow, etc. Color Units RGB red, green, blue #ff 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)

66 calc() Function Allows mathematical expressions with +, -, *, and / to be used as component values p { font-size: calc(1rem 2px); } See Units examples

CSS

CSS http://www.flickr.com/photos/baylorbear78/3406180116/ CSS 2 OVERVIEW OF CSS HTML is about content and structure (semantics) What is the content? How is the content related to other content? CSS is all