CSS Introduction Textbook PDF: Fundamentals of Web Development

CSS 1: Introduction Chapter 3 Randy Connolly and Ricardo Hoar Fundamentals of Web Development Textbook to be published by Pearson © 2015...

CSS 1: Introduction Chapter 3 Randy Connolly and Ricardo Hoar Fundamentals of Web Development Textbook to be published by Pearson © 2015 Ed Pearson in early Randy Connolly and Ricardo Hoar Fundamentals of Web Development http://www.funwebdev.com 2014  Objectives 1 What is CSS? 2 CSS Syntax 3 Location of Styles 4 Selectors 5 The Cascade: How Styles 6 The Box Model Interact 7 CSS Text Styling Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Section 1 of 7 WHAT IS CSS? Randy Connolly and Ricardo Hoar Fundamentals of Web Development  What is CSS? You be styling soon CSS is a W3C standard for describing the presentation (or appearance) of HTML elements. With CSS, we can assign font properties, colors, sizes, borders, background images, even the position of elements. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  What is CSS? You be styling soon CSS is a language in that it has its own syntax rules. CSS can be added directly to any HTML element (via the style attribute), within the element, or, most commonly, in a separate text file that contains only CSS. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Benefits of CSS Why using CSS is a better way of describing presentation than HTML The degree of formatting control in CSS is significantly better than that provided in HTML. Web sites become significantly more maintainable because all formatting can be centralized into one, or a small handful, of CSS files. CSS-driven sites are more accessible. A site built using a centralized set of CSS files for all presentation will also be quicker to download because each individual HTML file will contain less markup. CSS can be used to adopt a page for different output mediums. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Section 2 of 7 CSS SYNTAX Randy Connolly and Ricardo Hoar Fundamentals of Web Development  CSS Syntax Rules, properties, values, declarations A CSS document consists of one or more style rules. A rule consists of a selector that identifies the HTML element or elements that will be affected, followed by a series of property declaration and value pairs (each pair is also called a syntax declaration). selector { property: value; property2: value2; } rule declaration block selector em { color: red; } property value examples p { margin: 5px 0 10px 0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Declaration Blocks The series of declarations is also called the declaration block. A declaration block can be together on a single line, or The spread across multiple lines. browser declaration ignores white selector { property: value; property2: value2; } rule syntax space Each declaration block declaration is selector em { color: red; } terminated with property value examples a semicolon. p { margin: 5px 0 10px 0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Selectors Which elements Every CSS rule begins with a selector. The selector identifies which element or elements in the HTML document will be affected by the declarations in the rule. Another way of thinking of selectors is that they are a pattern which is used by the browser to select the HTML elements that will receive the style. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Properties Which style properties of the selected elements Each individual CSS declaration must contain a property. These property names are predefined by the CSS standard. The CSS2.1 Recommendation defines over a hundred different property names. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Properties Common CSS properties Property Type Property Fonts font font-family font-size font-style font-weight @font-face Text letter-spacing line-height text-align text-decoration text-indent Color and background background background-color background-image background-position background-repeat color Borders border border-color border-width border-style border-top border-top-color border-top-width etc Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Properties Common CSS properties continued. Property Type Property Spacing padding padding-bottom, padding-left, padding-right, padding-top margin margin-bottom, margin-left, margin-right, margin-top Sizing height max-height max-width min-height min-width width Layout bottom, left, right, top clear display float overflow position visibility z-index Lists list-style list-style-image list-style-type Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Values What style value for the properties Each CSS declaration also contains a value for a property. The unit of any given value is dependent upon the property. Some property values are from a predefined list of keywords. Others are values such as length measurements, percentages, numbers without units, color values, and URLs. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Color Values CSS supports a variety of different ways of describing color Metho Description Example d Name Use one of 17 standard color color: red; names. CSS3 has 140 standard color: hotpink; names. RGB Uses three different numbers color: rgb(255,0,0); between 0 and 255 to describe color: rgb(255,105,180); the Red, Green, and Blue values for the color. Hexadeci Uses a six-digit hexadecimal color: #FF0000; mal number to describe the red, color: #FF69B4; green, and blue value of the color; each of the three RGB values is between 0 and FF (which is 255 in decimal). Notice that the hexadecimal number is preceded by a hash or pound symbol (#). RGBa Allows you to add an alpha, or color: rgb(255,0,0, 0.5); transparency, value. This allows a background color or image to “show through” the color. Transparency is a value between 0.0 (fully transparent) and 1.0 (fully opaque). HSL Allows you to specify a color using color: hsl(0,100%,100%); Hue Saturation Randy Connolly and Ricardo Hoar and Light values. color: hsl(330,59%,100%); Fundamentals of Web Development  Units of Measurement There are multiple ways of specifying a unit of measurement in CSS Some of these are relative units, in that they are based on the value of something else, such as the size of a parent element. Others are absolute units, in that they have a real-world size. Unless you are defining a style sheet for printing, it is recommended to avoid using absolute units. Pixels are perhaps the one popular exception (though as we shall see later there are also good reasons for avoiding the pixel unit). Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Relative Units Unit Description Type px Pixel. In CSS2 this is a relative measure, while Relative (CSS2) in CSS3 it is absolute (1/96 of an inch). Absolute (CSS3) em Equal to the computed value of the font-size Relative property of the element on which it is used. When used for font sizes, the em unit is in relation to the font size of the parent. % A measure that is always relative to another Relative value. The precise meaning of % varies depending upon which property it is being used. ex A rarely used relative measure that expresses Relative size in relation to the x-height of an element’s font. ch Another rarely used relative measure; this one Relative expresses size in relation to the width of the zero ("0") character of an element’s font. (CSS3 only) rem Stands for root em, which is the font size of Relative the root element. Unlike em, which may be different for each element, the rem is (CSS3 only) constant throughout the document. vw, vh Stands for viewport width and viewport Relative height. Both are percentage values (between 0 and 100) of the viewport (browser window). (CSS3 only) This allows an item to change size when the viewport Randy Connolly and Ricardo Hoar is resized. Fundamentals of Web Development  Absolute Units Unit Description Type in Inches Absolute cm Centimeters Absolute mm Millimeters Absolute pt Points (equal to 1/72 of an inch) Absolute pc Pica (equal to 1/6 of an inch) Absolute Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Comments in CSS It is often helpful to add comments to your style sheets. Comments take the form: NOTE It is helpful to add comments to your style sheets. Comments take the form: It is a common practice to locate related style rules together, and then indicate that they are related via a comment. For instance: nav#main { … } nav#main ul { … } nav#main ul li { … } header { … } h1 { … } Comments can also be a helpful way to temporarily hide any number of rules, to help with debugging. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Section 3 of 7 LOCATION OF STYLES Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Actually there are three … Different types of style sheet Author-created style sheets (what we are learning in this presentation). User style sheets allow the individual user to tell the browser to display pages using that individual’s own custom style sheet. This option is available in a browser usually in its accessibility options area. The browser style sheet defines the default styles the browser uses for each HTML element. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Style Locations Author Created CSS style rules can be located in three different locations CSS style rules can be located in three different locations. Inline Embedded External You can combine all 3! Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Inline Styles Style rules placed within an HTML element via the style attribute An inline style only affects the element it is defined within and will override any other style definitions for the properties used in the inline style. Using inline styles is generally discouraged since they increase bandwidth and decrease maintainability. Inline styles can however be handy for quickly testing out a style change. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Embedded Style Sheet Style rules placed within the element inside the element While better than inline styles, using embedded styles is also by and large discouraged. Since each HTML document has its own element, it is more difficult to consistently style multiple documents when using embedded styles. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  External Style Sheet Style rules placed within a external text file with the.css extension This is by far the most common place to locate style rules because it provides the best maintainability. When you make a change to an external style sheet, all HTML documents that reference that style sheet will automatically use the updated version. The browser is able to cache the external style sheet which can improve the performance of the site Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Section 4 of 7 SELECTORS Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Selectors Things that make your life easier When defining CSS rules, you will first need to use a selector to tell the browser which elements will be affected. CSS selectors allow you to select individual elements multiple HTML elements, elements that belong together in some way, or elements that are positioned in specific ways in the document hierarchy. There are a number of different selector types. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Element Selectors Selects all instances of a given HTML element Uses the HTML element name. You can select all elements by using the universal element selector, which is the * (asterisk) character. declaration selector { property: value; property2: value2; } rule declaration block selector em { color: red; } property value p { margin: 5px 0 10px 0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Grouped Selectors Selecting multiple things You can select a group of elements by separating the different element names with commas. This is a sensible way to reduce the size and complexity of your CSS files, by combining multiple identical rules into a single rule. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Reset Grouped selectors are often used as a way to quickly reset or remove browser defaults. The goal of doing so is to reduce browser inconsistencies with things such as margins, line heights, and font sizes. These reset styles can be placed in their own css file (perhaps called reset.css) and linked to the page before any other external styles sheets. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Class Selectors Simultaneously target different HTML elements A class selector allows you to simultaneously target different HTML elements regardless of their position in the document tree. If a series of HTML element have been labeled with the same class attribute value, then you can target them for styling by using a class selector, which takes the form: period (.) followed by the class name. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Class Selectors Share Your Travels.first { font-style: italic; color: brown; } Reviews By Ricardo on September 15, 2012 Easy on the HDR buddy. By Susan on October 1, 2012 I love Central Park..first { font-style: italic; color: brown; } Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Id Selectors Target a specific element by its id attribute An id selector allows you to target a specific element by its id attribute regardless of its type or position. If an HTML element has been labeled with an id attribute, then you can target it for styling by using an id selector, which takes the form: pound/hash (#) followed by the id name. Note: You should only be using an id once per page Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Id Selectors Share Your Travels -- New York - Central Park #latestComment { font-style: italic; color: brown; } Reviews By Ricardo on September 15, 2012 Easy on the HDR buddy. By Susan on October 1, 2012 I love Central Park. #latestComment { font-style: italic; color: brown; } Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Id versus Class Selectors How to decide Id selectors should only be used when referencing a single HTML element since an id attribute can only be assigned to a single HTML element. Class selectors should be used when (potentially) referencing several related elements. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Attribute Selectors Selecting via presence of element attribute or by the value of an attribute An attribute selector provides a way to select HTML elements by either the presence of an element attribute or by the value of an attribute. This can be a very powerful technique, but because of uneven support by some of the browsers, not all web authors have used them. Attribute selectors can be a very helpful technique in the styling of hyperlinks and images. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Attribute Selectors [title] { cursor: help; padding-bottom: 3px; border-bottom: 2px dotted blue; text-decoration: none; Share Your Travels } [title] { cursor: help; padding-bottom: 3px; border-bottom: 2px dotted blue; text-decoration: none; } Canada Canada is a North American country consisting of … Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Pseudo Selectors Select something that does not exist explicitly as an element A pseudo-element selector is a way to select something that does not exist explicitly as an element in the HTML document tree but which is still a recognizable selectable object. A pseudo-class selector does apply to an HTML element, but targets either a particular state or, in CSS3, a variety of family relationships. The most common use of this type of selectors is for targeting link states. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Pseudo Selectors Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Contextual Selectors Select elements based on their ancestors, descendants, or siblings A contextual selector (in CSS3 also called combinators) allows you to select elements based on their ancestors, descendants, or siblings. That is, it selects elements based on their context or their relation to other elements in the document tree. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Contextual Selectors Selector Matches Example Descendan A specified element that is div p t contained somewhere Selects a element that is contained within another specified somewhere within a element. That is, element the can be any descendant, not just a child. Child A specified element that is div>h2 a direct child of the Selects an element that is a child of a specified element element. Adjacent A specified element that is h3+p Sibling the next sibling (i.e., Selects the first after any. comes directly after) of the specified element. General A specified element that h3~p Sibling shares the same parent as Selects all the elements that share the the specified element. same parent as the. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Descendant Selector Selects all elements that are contained within another element While some of these contextual selectors are used relatively infrequently, almost all web authors find themselves using descendant selectors. A descendant selector matches all elements that are contained within another element. The character used to indicate descendant context selected element selection is the space character. div p { … } #main div p:first-child { … } Selects a element Selects the first element somewhere somewhere within a element within a element that is somewhere within an element with an id="main" Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Contextual Selectors in Action Canada Germany ul a:link { color: blue; } United States #main time { color: red; } Comments as of November 15, 2012 #main>time { color: purple; } By Ricardo on September 15, 2012 Easy on the HDR buddy. #main div p:first-child { By Susan on October 1, 2012 color: green; I love Central Park. } Home | Browse | Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Section 5 of 7 THE CASCADE: HOW STYLES INTERACT Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Why Conflict Happens In CSS that is Because there are three different types of style sheets (author-created, user-defined, and the default browser style sheet), author-created style sheets can define multiple rules for the same HTML element, CSS has a system to help the browser determine how to display elements when different style rules conflict. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Cascade How conflicting rules are handled in CSS The “Cascade” in CSS refers to how conflicting rules are handled. The visual metaphor behind the term cascade is that of a mountain stream progressing downstream over rocks. The downward movement of water down a cascade is meant to be analogous to how a given style rule will continue to take precedence with child elements. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Cascade Principles CSS uses the following cascade principles to help it deal with conflicts: inheritance, specificity, location Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Inheritance Cascade Principle #1 Many (but not all) CSS properties affect not only themselves but their descendants as well. Font, color, list, and text properties are inheritable. Layout, sizing, border, background and spacing properties are not. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Inheritance body { font-family: Arial; inherited color: red; inherited border: 8pt solid green; not inherited margin: 100px; not inherited } Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Inheritance How to force inheritance It is possible to tell elements to inherit properties that are normally not inheritable. div { font-weight: bold; margin: 50px; border: 1pt solid green; } p { border: inherit; margin: inherit; } Reviews By Ricardo on September 15, 2012 Easy on the HDR buddy. By Susan on October 1, 2012 I love Central Park. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Inheritance div { font-weight: bold; inherited margin: 50px; not inherited border: 1pt solid green; not inherited } Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Specificity Cascade Principle #2 Specificity is how the browser determines which style rule takes precedence when more than one style rule could be applied to the same element. The more specific the selector, the more it takes precedence (i.e., overrides the previous definition). Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Specificity How it works The way that specificity works in the browser is that the browser assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence. Randy Connolly and Ricardo Hoar Fundamentals of Web Development  Specificity These color and font-weight body { This text is not within a p element. properties are inheritable and font-weight: bold; Reviews thus potentially applicable to color: red; all the child elements } By Ricardo on September 15, 2012 contained within the body. Easy on the HDR buddy. div { This text is not within a p element. However, because the font-weight: normal; and elements also have color: magenta; the same properties set, they } override the value defined for the element because p { By Susan on October 1, 2012 their selectors (div and p) are color: green; I love Central Park. } more specific. Class selectors are more.last { specific than element color: blue; selectors, and thus take } By Dave on October 15, 2012