Chapter 2 - Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
A W3C language for applying structure and formatting instructions to HTML pages and other markup language documents. Web design technology that enables developers to determine how the HTML elements in their Web pages will display, giving a page or entire site a particular "look and feel." CSS instructions can be: ►Applied inline to individual HTML elements on an HTML page. ►Embedded within an HTML page to affect all specified elements on that page. ►Collected in an external file that is linked to multiple HTML pages.
External style sheets
An external CSS file, or style sheet, is a text file that contains CSS formatting instructions to define the font, color and position of elements used on any markup page(s) to which you attach the style sheet. CSS benefits include: ►Consistency — CSS easily gives an entire site a consistent look and feel. ►Easy change management — You have the ability to change the look and feel of an entire site by simply changing one part of a single line of code, rather than having to change possibly thousands of lines in hundreds of Web pages.
CSS versions
Currently, three standards exist for style sheets: ►Cascading Style Sheets (CSS1) — governs the basic structure of style sheets. ►Cascading Style Sheets 2 (CSS2) — adds more capabilities to the CSS1 specification, including the ability to support media types (such as specific printers) and work with tables. ►Cascading Style Sheets 3 (CSS3) — provides a modularized standard so that when changes must be made to a style, only a particular module within CSS3 will need to be updated, rather than the entire standard. This will allow for a more flexible and timely upgrade of the CSS standard as a whole. New functions are being added to CSS3 to enhance its support of borders, backgrounds, colors, text effects and so forth. Note: HTML5 uses CSS1, CSS2 and CSS3. Any given Web page may include CSS rules from all three versions. Note: HTML 4.01 and XHTML 1.0 used CSS1 and CSS2
Multipurpose Internet Mail Extensions (MIME)
Defines the file type, such as text or video, and the extension, such as css or mp4, for a user agent or browser.
Embedding an internal style sheet
Embedding styles in an HTML page is useful when: ►You have styles that you want to apply consistently to an entire page but not necessarily more than one page. ►You want to apply one or more styles on a single page that will override styles applied to the same element(s) by an external style sheet. To embed CSS in a single Web page as an internal style sheet, you add the <style> element to the <head> section of your HTML file. You then place your CSS declarations within the <style> </style> block. <head> <style type="text/css"> h1 { font-family: arial, sans-serif; color: #FFFFFF; font-size: 36px;} </style> </head>
Comments in style sheets
If you want a particular rule in a style sheet to be ignored, you can "comment out" the entry by placing it in between the /** and **/ characters. example /** STYLE SHEET FOR INDEX.HTM **/ /** A comment is added here **/
CSS Positioning Schemes
In addition to providing the top, bottom, left and right properties, CSS provides various ways to render the position of block-level elements. This is done by using the position property for an element. ►Static The normal, or default, position of the element within a page ►Relative The element is relative to others on a page, usually because of the top, bottom, left and right properties ►Absolute The element appears to float above the document and can be positioned as needed It is completely removed from the rest of the page flow ►Fixed The element remains in the same position when the page is scrolled ►Inherit The element inherits its position from the parent element
The CSS Box Model
The CSS Box Model allows designers to configure the space around each HTML element. It represents each HTML element as a rectangular box. Without this box, HTML elements would overlap or lay against one another. CSS is used to configure the boxes. The Box Model is straightforward: Each element is surrounded by four rectangular boxes that can be configured to create space and a border. ►Content The content within an HTML element ►Padding Surrounds the content Defines the space between the content and the border of an element ►Border Surrounds the padding Defines a border, such as a line, around an element ►Margin The outermost box Defines only the amount of space between the border and the surrounding elements in the HTML document
HTML5, CSS and legacy browsers
HTML5 is not supported by Internet Explorer 8 or earlier. This is a challenge because Windows XP cannot run IE9, which is the first Internet Explorer version that supports HTML5. Because older IE browsers will not recognize the new HTML5 elements (such as <header>, <footer>, <article>, etc.), you must use JavaScript to create these elements in your Web pages so that older IE browsers will recognize them At a minimum, you should create the basic HTML5 structural elements by adding the following JavaScript in the <head> element: and enclosing it in the script tag document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("nav"); The new HTML5 structural elements must also become block-level elements in CSS for consistent styling. A block-level element is a large block of content, such as a paragraph or a structural element that starts a new line of text or a new section. header, nav, article, footer{display: block;} This task can be long and laborious. One solution is to implement a script developed by Remy Sharp, available at http://remysharp.com/2009/01/07/html5-enabling-script. This technique of using JavaScript to force IE to acknowledge new HTML5 elements is sometimes called the HTML5 shiv.
Document flow
In CSS, the arrangement of content elements on a page and how the space is used. Document flow describes how your content is positioned By default, browsers render block-level elements with blank space above and below them, whereas inline elements are rendered within other elements. However, you can use CSS to modify element positioning
Fixed-width vs. liquid design layouts
There are two page-layout methods that designers use to control the placement of Web page elements when rendered in the browser: ►Fixed-width layout — achieved by assigning specific pixel widths to elements using the HTML5 structural elements or the <div> tag. This layout ensures that the text, images and layout will not vary from browser to browser. The problem with using a fixed-width layout is that the elements may not render as expected when users change the size of their browser windows. ►Liquid layout — also known as relative width or fluid layout. Achieved by assigning percentage values to elements. With this layout, the size of an element is flexible and will change dynamically depending on the size of the browser window. For example, you can specify in the CSS width property that Element A will occupy 35 percent of the screen and Element B will occupy the remaining 65 percent. If the user resizes the browser window, the elements will resize correspondingly.
Layout guidelines
►Be succinct — Limit words to clear, necessary verbiage, especially on the home page. Most users simply scan pages quickly looking for specific information or links to it. Let users navigate to additional pages if they want more information. ►Make sure that each page focuses on one topic — No tangent message, regardless of its importance, should be added to a page. Use links to point users to appropriate related topics on separate pages. ►Include navigation aids — A common way to enable navigation is to place links at the top and bottom of the page, and within the body of the page, to reduce the need for users to scroll. ►Place comments in each section of code — Comments help explain changes you have made to the code or page. You can indicate the nature of the change, including the date you made the change and your name or initials, or you can explain the nature of the markup. For example, the syb.html page has three headings (h1, h2 and h3). You could comment each of these sections of the narrative. Effective page layout is essential for effective search engine optimization.
CSS Box Model properties
►Padding padding:[top right bottom left] OR Individually padding-top: padding-right: padding-bottom: padding-left: ►Border border:[width style color] OR Individually border-top: [width style color] border-right: [width style color] border-bottom: [width style color] border-left: [width style color] ►Margin margin:[top right bottom left] OR Individually margin-top: margin-right: margin-bottom: margin-left:
CSS Terms and Syntax
►Selector. In a style sheet, any HTML element to which designated styles are applied. Any element you want to affect with a CSS style ►Property. you will change the way the selector renders in the browser A property must then have a value. ►Value. assigned value to the property ►Declaration. which consists of a property and a value. A declaration must always end with a semicolon. In a style sheet, a property and a value applied to format a specified HTML element (selector). A declaration combined with a selector is a CSS rule. ►Rule. The name for a selector, property and value all grouped together body {background-color: #008080; color: #FFFFFF;} is a rule Although optional, you should also place a semicolon between the last value of the declaration and the end bracket. This practice is standard for all style sheet rules, except when declaring inline styles.
Style Guides
A style guide or style manual is a set of standards for the writing and/or design of documents, either for general use or for a specific publication, organization or field. Implementing a style guide provides uniformity in style and formatting within a document and across multiple documents. Some organizations follow a CSS style guide to define the CSS formatting to be used for all Web documents across the organization. It defines styles such as the page layout, font sizes, colors, and image placement for Web sites. Google and WordPress make their css style guides available to the public: Google HTML/CSS Style Guide (https://google.github.io/styleguide/htmlcssguide.html) WordPress CSS Coding Standards (http://make.wordpress.org/core/handbook/coding-standards/css/)
Applying an inline style
Applying an inline style in an HTML page is useful when: ►You have a style that you want to apply to an element on a single page but not to every occurrence of that element on that page. ►You want to apply a style that will override other styles applied to that same element on that page (by an external style sheet or embedded style). To apply an inline style to an HTML element in a Web page, you add the style attribute directly into the element tag to which you want to apply the style These styles are applied to elements individually in the <body> section of the HTML, rather than page-wide in the <head> section. <head> </head> <body> <h1 style="font-family: arial, sans-serif;"> Introduction </h1> </body>
Class selector
Sometimes you must apply a specific style to a group of elements. Class A selector that specifies CSS styles for a group of elements. The class selector specifies a CSS style that you can apply to a group of elements. When using class selectors, you create the selector in your CSS file, then add the class attribute inline to HTML elements with the value you named in your CSS file. The class selector always starts with a period ( . ) in CSS, although the period is not included in the HTML. for example CSS file will have .right { text-align: right; } HTML file will be <h3 class="right">Right-aligned heading level three</h3><p class="right">Right-aligned paragraph</p> NOTE: If only one HTML element needs to be affected by the style, then add that element name before the period in the CSS rule. for example to put right alignment to only the h3 tags h3.right { text-align: right; } To help remember these terms, consider the following: ►An ID is a unique identifier for one person, such as an identification (ID) card. ►A class is an identifier for a group of people, such as a classroom of students.
Inheritance
The concept of inheritance is essential to CSS. In fact, the word "cascading" refers to inheritance .The styles you define in a style sheet will flow, or cascade, throughout the documents to which it is attached, unless another style defined inside of a page specifically overrides ►A style sheet rule will override the default <body> font color, which is black. ►Styles embedded in an internal style sheet in an HTML page's code will override styles specified in a linked external style sheet. ►Styles specified inline using the style attribute in individual HTML elements within an HTML page will override embedded and external CSS entries. basically the CSS closest to the HTML element wins in the inheritance
The id selector
The id selector specifies CSS styles for one unique element, such as one paragraph that requires red text. The id selector always starts with the pound or hash symbol ( # ) in CSS, whereas the # symbol is not included in HTML. example, the paragraph with id="red" will have red text. CSS file has #red { color:red; } HTML file has <p id="red">This paragraph has red text</p> <p>Not affected</p> To help remember these terms, consider the following: ►An ID is a unique identifier for one person, such as an identification (ID) card. ►A class is an identifier for a group of people, such as a classroom of students.
Linking to an external style sheet
You can link an HTML file to an external style sheet using the HTML <link> element. The <link> element specifies any external resource for the HTML document, but is usually used to link to an external style sheet. You place the <link> element in the <head> section of your HTML file. It is an empty element that can appear multiple times and contains only attributes. <head> <link rel="stylesheet" type="text/css" href="css/habitat.css"/> </head> The external CSS file to which you link is a separate text file with a .css file name extension. It contains only CSS style rules, no HTML. ►The rel attribute is required and defines the relationship between the HTML document and the linked document. ►The type attribute specifies the linked document's MIME type. ►The href attribute specifies the location of the linked document.
examples of guidelines and tips from the Google HTML/CSS Style Guide:
►Be consistent — When editing existing code, for example, match the written code style (spacing, comment use, etc.). If code that you add to a file looks drastically different from the existing code around it, other users of the code can become distracted or even confused. The purpose of style guidelines is to provide a common vocabulary for coding. Global style rules are helpful in general, but local style (dictated by your organization) is also important. ►Capitalization — Use only lowercase letters for your code, including HTML element names, attributes, attribute values, CSS selectors, properties and property values. ►Declaration order — In a style sheet, alphabetize your declarations to create consistent code that is easy to remember, search and maintain.
CSS values that you can use to align images to text.
►bottom The default alignment The bottom of the image is aligned with the baseline of adjoining text Ex CSS file: .bottom {vertical-align: baseline;} HTML file: <img src="syb/SYBcollage2.png" class="bottom" /> ►middle A vertical — not horizontal — alignment option This value aligns the middle of the image to the baseline of adjoining text Ex CSS file: .middle {vertical-align: middle; margin: 5px;} HTML file: <img src="syb/SYBcollage2.png" class="middle" /> ►top Aligns the top of the image with the top of adjoining text Ex CSS file: .top {vertical-align: top;} HTML file: <img src="syb/SYBcollage2.png" class="top" /> ►left Floats the image to the left of the text paragraph into which the <img> tag is inserted The top of the image will align with the left and top of the adjoining text Ex CSS file: .floatleft {float: left; margin: 5px;} HTML file: <img src="syb/SYBcollage2.png" class="floatleft" /> ►right Floats the image to the right of the text paragraph into which the <img> tag is inserted The top of the image will align with the right and top of the adjoining text Ex CSS file: .floatright {float: right; margin: 5px;} HTML file: <img src="syb/SYBcollage2.png" class="floatright" /> If you do not want floating elements before or after a paragraph (or any element), you can use the clear property: ►clear: left — prevents floating elements on the left side. ►clear: right — prevents floating elements on the right side. ►clear: both — prevents floating elements on both sides
