Cascading Style Sheets CSS
CSS Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3 (in development well supported by most modern browsers)
CSS - Benefits Offers more control Precise type and layout control: control line spacing, and type size; rollovers: create rollover effects that don’t require images and javascript; Layout: you can layout entire pages Less work: one css file can style an entire site (100s of pages) Smaller files / faster downloads (no redundant styling tags & nested tables) More accessible (meaningful content)
CSS Allows you to separate the structure of a page from the presentation Structural Layer – Defines document structure/meaning(HTML) accurately describe the meaning of content with HTML tags Presentation Layer - CSS Style Rules Presentation = displayed/delivered (screen, mobile, print) Describes how an element should “look” (selectors & declarations) Attach them: Structural Layer + Presentation Layer External, Embedded, Inline
CSS - Rule Structure Separate language with its own syntax 2 Parts Selector: Selects the element to be affected Declaration: “declares” a style for an selected element Declaration block: property & value
CSS - Structure Declaration block Selector – example Property: identifies what to change Value: how to change it Selector – example h1{ font-size: small; font-family: Georgia, ‘Times New Roman’, Times, serif; color: #CC3300; margin-top: 4em; margin-bottom: 10em; }
Types of Style Sheets External (linked) Most powerful A single style sheet can format hundreds of pages (linked to each page) To make changes – update the external style sheet all page that are linked to it are updated.
Types of Style Sheets External Not part of the HTML document Saved in a separate .css file You create a link from your HTML document to the .css file <link rel = “stylesheet” href=“mystyles.css” type=“text/css”/>
Types of Style Sheets Embedded Embedded into the HTML document (an internal part of the HTML) All code placed inside the <head> tag Affects only the one page its embedded in <style type = “text/css”> h1{color:red; font-family: Arial;} </style>
Types of Style Sheets Inline Used when you need to override some other style defined in an embedded or external style sheet Part of the HTML document Less powerful Usually used only to override other styles or when you have an exception to a rule
Types of Style Sheets Inline Part of the HTML document Written as an attribute of the tag <body> <h1 style=“color:red; font-family:arial”> Text is here. </h1> </body>
CSS - The Cascade Inheritance (parents, children, ancestors, siblings) All HTML elements are contained within one another Descendants: <p> <h1> = descendants of <body> Element contained directly within another element is child <em> child of <p> Inherit certain properties from their parent element Children inherit properties from a parent (Ex: if font-face: “helvetica” is applied to the <body> tag, all children (<p>,<h1>, <em>, etc) will be helvetica as well. If p{font-size: small; font-family: sans-serif’} any em elements contained within the paragraph will inherit these properties
CSS - The Cascade Cascade System of hierarchy that determines which rules will be followed when several sources of style info is assigned to the same elements Style Sheet Hierarchy (the closer the style is to the content the more weight it is given) Browser/User Agent default (user agent style sheet) User Settings (reader/user style sheets) External Style Sheets (linked link, then imported @import) Embedded Style Sheets (style) Inline Style Sheets (style attribute in an opening tag) Author !important Reader !important
Specificity & Rule Order Rule Order – conflicts within style rules of identical weight, whichever come last “wins” <style> p { color: red; } p { color: blue; } p { color: green; } </style> Specificity: When two rules in a single style sheet conflict – the type of selector used will determine which rule is followed (the more specific the selector, the more weight it is given to override conflicting rules). <style> p { color: red; color: blue; color: green; } </style>
CSS Selectors
Element Type Selectors Used to redefine a specific HTML tag body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 2em; color: #33CCFF; } p {color: blue;}
Grouped Selectors Apply the same style property to a number of elements Ex: h1, h2, p, em, img { border: 1px solid blue; }
Descendant Selectors (contextual selector) Targets elements that are contained within another element Ex: li em { color: silver; } targets emphasized text only when it appears in a list item (li) Ex: ol a em { font-varient: small-caps; } Ex: h1 em, h2 em, h3 em { color: red; } Other contextual Selectors p > em {font-weight: bold;} child selector (any <em> with the <p> rule applies; if you have an <em> within an <a> in this same paragraph rule does not apply) h1 + p {font-style: italic;} adjacent sibling selectors (targets element directly after) h1 ~ h2 {font-weight: normal;} general sibling selectors (targets any <h2> that appears after an <h1> within the same parent element). https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Element identifiers - id ID selectors Targets an element by a unique identifying name Can be used with any HTML element (commonly used to give meaning to generic div and span elements) Allows you to target elements by their id attribute value The # symbol identifies an ID selector Unique element in the document
ID Selectors Targets elements by their id value Used to style a specific element in a site or group of pages <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> #para1{ color: red; text-align: center; }
Class Selectors Used to “classify” elements into a conceptual group Multiple elements can share a class name Used to specify a custom selector name and apply that style to an HTML element Ex: In your .css file: .smallprint {font-size: 10px;} .special { color: orange; } In your HTML document: <p class=“smallprint”> This is small text. </p <p class=“special”> This is orange text. </p>
Hierarchy of Selectors ID selectors are more specific than (and will override) Class selectors, which are more specific than (and will override) Contextual selectors, which are more specific than (and will override) Individual element selectors Ex: strong {color: red; } h1 strong {color: blue; } – contextual selector p {line-height: 1.2em; } blockquote p {line-height: 1em; } – contextual selector p.intro {line-height: 2em; } – class selector
Pseudo-Class Selectors Used to describe the state of an element. Assigns a style that happens when an object is a certain state a:hover{ text-decoration:none; color: #33CC33
Pseudo-Class Selectors Common Pseudo-Classes :link- A style applied to an element that has not yet been visited :visited – A style applied to an element that has been visited :hover – A style applied to an element when a mouse hovers over it (link) :active – A style applied to an element when the user clicks or activates the element
Meaningful Markup <div>…</div>
Generic Elements <div>…</div> <span>…</span> Generic block-level element <span>…</span> Generic inline element Name them using id or class
div <div>…</div> Used like a container to group content Gives context to the elements in the grouping Give it a descriptive name with id or class Ex: <div class=“products”> can be used to group an <img> with <p> to show they are conceptually related Ex: <div id=“news”> can be used to group a section of content for context, structure or layout purposes.
span <span>…</span> Generic inline element Used to add meaning to content Ex: <ul> <li> Andy: <span class=“phone”>123.4567</span></li> <li> Joe: <span class=“phone”>101.0101</span></li> </ul>
Resources Niederst, J. (2012). Learning Web Design. O'Reilly Meida, Inc.Chapter 11/12: CSS for Presentation Andrew, R. (2007). CSS Anthology. Sitepoint http://www.sitepoint.com/books/cssant1/ Meyer, E. (2006). CSS Web Site Design. Peachpit Press Eric Meyer: http://meyerweb.com/eric/writing.html