Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSS comes after HTML By David J. Young.

Similar presentations

Presentation on theme: "CSS comes after HTML By David J. Young."— Presentation transcript:

1 CSS comes after HTML By David J. Young

2 Agenda Web pages created with CSS CSS 101 Tools Demo CSS Concepts
CSS Shortcuts CSS based page design Tools Demo

3 CSS Example 1

4 CSS Example 2

5 CSS Example 3

6 CSS Example 4

7 CSS Example 6

8 CSS Example 7

9 CSS Example 7

10 CSS Example 8

11 CSS Example 9

12 CSS Samples Q: What is different about all of the samples?
A: Each presentation (look & feel) is completely different Q: What is the same in all the samples? A: The content. That is, the (X)HTML is identical.

13 Example 10

14 HTML for all Examples

15 What is CSS? CSS stands for Cascading Style Sheets
Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags. As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout. To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0. Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document! CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

16 Why CSS? Separates content from presentation
Semantic HTML for authoring web pages Non-Semantic HTML Semantic HTML <div class="title"> This is my headline </div> <br /> <div class="sub-header"> this is a sub header <div class="content"> this is a paragraph of content, it contains some <b>bold</b> text and some <span class="blue">colored</span> text. this is a second paragraph <h1>This is my headline</h1> <h2>this is a sub header</h2> <p> this is a paragraph of content, it contains some <strong>bold </strong> text and some <span class="highlight"> colored</span> text. </p> <p> this is a second paragraph </p>

17 CSS Concepts Before you can understand CSS, you need to first understand a few key concepts: Variations Media Types Importance Inheritance Origin Rules Ruleset Properties Selectors Specificity

18 Variations CSS 1 CSS 2 CSS 2.1 CSS 3
The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December Among its capabilities are support for: Font properties such as typeface and emphasis Color of text, backgrounds, and other elements Text attributes such as spacing between words, letters, and lines of text Alignment of text, images, tables and other elements Margin, border, padding, and positioning for most elements Unique identification and generic classification of groups of attributes CSS 2 CSS level 2 was developed by the W3C and published as a Recommendation in May A superset of CSS1, CSS2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows. CSS 2.1 CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a Candidate Recommendation for several months, on June 15, 2005 it was reverted to a working draft for further review. It was returned to Candidate Recommendation status on 19 July 2007. CSS 3 CSS level 3 is currently under development. The W3C maintains a CSS3 progress report. CSS3 is modularized and will consist of several separate Recommendations. The W3C CSS3 Roadmap provides a summary and introduction.

19 Browser Support for CSS

20 Media Types All Used for all media type devices
Aural Used for speech and sound synthesizers Braille Used for braille tactile feedback devices Embossed Used for paged braille Printers Handheld Used for small or handheld devices Print Used for printers Projection Used for projected presentations, like slides Screen Used for computer screens TTY Used for media using a fixed-pitch character grid, like teletypes and terminals TV Used for television-type devices

21 Importance There a two levels of importance
Normal Important (made using !important declaration) Both Authors and Readers can make !important declarations In CSS1, author !important declarations overruled reader declarations In CSS2, reader !important declarations overrule author declarations All rules default to a normal importance Both authors and readers have the ability to specify style sheets. When rules between the two conflict, the author's rules will win out over reader's rules of otherwise equal weight. Both author's and reader's style sheets override the browser's built-in style sheets. A user may override the author’s rules by using the !important declaration. For example, a user may require large font sizes or special colors due to vision problems, and such a user would likely declare certain style rules to be !important, since some styles are vital for the user to be able to read a page.

22 Inheritance Virtually all selectors which are nested within other selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph. There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.

23 Importance Generally speaking styles will "cascade" into a new "virtual" style sheet by using the following order, where the last item carries the highest importance:

24 Origin Origin is where styles originate User Agent Style Sheets
Browser Defaults C:\Program Files\Mozilla Firefox\res\html.css User Style Sheets Ignore cheap-effect tags blink { text-decoration: none !important } marquee { -moz-binding: none !important } Visually impaired html { font-size: 24pt !important } Author Style Sheets External style sheet Internal style sheet (inside the <head> tag) Inline style (inside an HTML element)

25 Rules A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;).

26 Properties Text and Fonts font line-height letter-spacing word-spacing
font-family font-size font-weight font-style font-variant line-height letter-spacing word-spacing text-align text-decoration text-indent text-transform vertical-align white-space Colours and Backgrounds color background-color background background-image background-repeat background-position background-attachment Tables table-layout border-collapse border-spacing empty-cells caption-side Generated Content content counter-increment counter-reset quotes Paged Media page-break-before page-break-after page-break-inside orphans Widows Misc. cursor direction unicode-bidi Positioning and Display position top right bottom left clip overflow z-index float clear display Visibility Lists list-style list-style-type list-style-image list-style-position The Box Model – dimensions width height min-width max-width min-height max-height The Box Model - padding, margin, outline and borders padding, padding-top, padding-right, padding-bottom, padding-left border, border-top, border-right, border-bottom, border-left border-style, border-top-style, border-right-style, border-bottom-style, border-left-style border-color, border-top-color, border-right-color, border-bottom-color, border-left-color border-width, border-top-width, border-right-width, border-bottom-width, border-left-width outline outline-style outline-color outline-width margin, margin-top, margin-right, margin-bottom, margin-left

27 Selectors Selectors are used to declare which elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements which match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model (DOM).

28 Selectors Element Selectors element { } Class Selectors .classname { }
ID Selectors #idname { } Descendant Selectors ul li { } Child Selectors ul > li { } Adjacent Sibling h1 + p { } Attribute Selectors img[src|="vacation"] { } Daisy Chaining #id element.class { } Group Selectors h1,h2,h3 { } Universal Selectors * { } Psuedo-Classes a:hover { } Psuedo-Elements p:first-letter { }

29 HTML relates to CSS Element Selectors Class Selectors ID Selectors
<p> styled by p {color: red; } Class Selectors <p class=“code"> styled by p.code {color: cyan; font-family: courier } or .code {color: #F0F; font-family: courier } ID Selectors <p id="sig"> styled by p#sig {color: cyan; } or #sig {color: #F0F; }

30 ID vs Class A unique ID can only be used only “once” on a HTML page
IDs are usually associated with “layout” regions or areas A class can be used any number of times

31 Selector Specificity A selector's specificity is calculated as follows: count 1 if the declaration is from a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.) count the number of ID attributes in the selector (= b) count the number of other attributes and pseudo-classes in the selector (= c) count the number of element names and pseudo-elements in the selector (= d) The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD. Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity. Some examples: * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

32 Practical Specificity
HTML Elements <p>, <div>, <h1> CSS Classes .center, .hilight CSS ID #content, #navbar Inline Styles style="text-align: center"

33 Cascade Order Find all declarations that apply to the element and property for the target media type. Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence: user agent declarations user normal declarations author normal declarations author important declarations user important declarations Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

34 Cascade Conflicts Find all declarations that match a particular element Sort declarations by weight and origin Sort selectors by specificity Sort by order specified

35 What color is P element text?
Example <HEAD> <STYLE type="text/css"> p.std { color: magenta; } #x97z { color: red; } p { color: green; } body { color: yellow; background-color: #000;} </STYLE> </HEAD> <BODY> <P ID="x97z" class="std" style="color: cyan">Text</P> <P>Other Paragraph</P> </BODY> body { color: yellow; } /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ p { color: green; /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ p.std { color: magenta; /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ #x97z { color: red; /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="color: cyan" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ In the above example, Text is cyan, and Other Paragraph is green.

36 Inserting Style Sheets
External Style Sheet Link <link rel="stylesheet" type="text/css" href="navbar.css" /> Import <style type="text/css" url("/css/my.css"); </style> <style url("import.css") tv,print; </style> Internal Style Sheet <style type="text/css"> body {margin:0;width:100%;height:100%} body,td,input,textarea,select{font-family:arial,sans-serif} input,textarea,select{font-size:100%} #loading{position:absolute;width:100%;height:100%; background-color:#fff} .cmsg{margin:1em} .msg{font-weight:bold} </style Inline Styles <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

37 HTML Webpage External Style Sheets Internal Style Sheet Inline Style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title> CSS comes after HTML </title> <meta name="description" content=“CSS For programmers." /> <meta name="keywords" content=“CSS, HTML, Tutorial" /> <style type="text/css" media="screen"> @import url(""); @import url(""); </style> <link rel="stylesheet" type="text/css" href="" media="print" /> <style type="text/css“> body {margin: 0; padding: 0; background-color: } /head> <body id="EyeBrow"> <div id="content" style="text-align:left;"> </div> </body> External Style Sheets Internal Style Sheet Inline Style

38 External CSS Files menu HTML1 layout navbar HTML2 <link> @import

39 CSS Sample /* basic elements */ html { margin: 0; padding: 0; } body {
font: 75% georgia, sans-serif; line-height: ; color: #555753; background: #fff url(blossoms.jpg) no-repeat bottom right; h3 { font: italic normal 1.4em georgia, sans-serif; letter-spacing: 1px; margin-bottom: 0; color: #7D775C; a:link { font-weight: bold; text-decoration: none; color: #B7A5DF; /* specific divs */ #container { background: url(zen-bg.jpg) no-repeat top left; padding: 0 175px 0 110px; margin: 0; position: relative; } #intro { min-width: 470px; /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, */ #pageHeader h1 { background: transparent url(h1.gif) no-repeat top left; margin-top: 10px; width: 219px; height: 87px; float: left; #pageHeader h1 span { display:none .accesskey { text-decoration: underline;

40 Shorthands or #full { border-width: 1px; border-style: dotted;
border-color: #ff0000; } or #shorthand {border: 1px dotted #f00;}

41 CSS Shorthand Border » *-width *-style *-color
Margin » *-top *-right *-bottom *-left Padding » *-top *-right *-bottom *-left Font » *-style *-variant *-weight *-size *-height *-family List-Style » *-type *-position *-image Background » *-color *-image *-repeat *-attachment *-position

42 Shorthand Declarations
margin-top: 25px; margin-right: 0; margin-bottom: 5px; margin-left: 0; margin: 25px 0 5px 0; margin: 10px; margin: 10px 10px 10px 10px; margin: 10px auto; margin: 10px auto 10px auto; margin: 10px auto 15px; margin: 10px auto 15px auto; 25px 5px

43 Colors color_name A color name (e.g. red)
rgb(x,x,x) An RGB value (e.g. rgb(255,0,0)) rgb(x%, x%, x%) An RGB percentage value (e.g. rgb(100%,0%,0%)) #rrggbb A HEX number (e.g. #ff0000) The W3C HTML and CSS standards have listed only 16 valid color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow However, see for a list of 140 color names supported by all major browsers.

44 Length Units Absolute Relative in inch cm centimeter mm millimeter
pt point (1 pt is the same as 1/72 inch) pc pica (1 pc is the same as 12 points) Relative em 1em is equal to the current “M” size. 2em means 2 times the size of the current “M” . E.g., if an element is displayed with a “M” of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the “M” that the reader uses ex one ex is the x-height of a “x” (x-height is usually about half the “M”-size) px pixels (a dot on the computer screen) % percentage

45 HTML Tags Deprecated <basefont> <center> <font>
<strike> <s> <u> Discouraged <b> <i> <big> <small> <tt>

46 Comments CSS uses “C” Style comment Syntax
/* Comment here */ p { margin: 1em; /* Comment here */ padding: 2em; /* color: white; */ background-color: blue; } /* multi-line comment here */ Comments cannot be nested

47 Centering <center> is deprecated Suggested to use CSS instead
{text-align: center; } only centers text Centering HTML elements with CSS is easy, but not initially obvious Set margin-left and margin-right to “auto” Define an element width div {margin: 0 auto 0 auto; width:800px; }

48 Display of HTML elements
Block Takes up the full width available, with a new line before and after (display:block;) Inline Takes up only as much width as it needs, and does not force new lines (display:inline;) Not displayed Some tags, like <meta /> and <style> are not visible (display:none;)

49 display vs visibility selector {display: none;} &
selector {visibility: hidden;} accomplish the same thing: The element is removed from view. But fundamentally they work completely different. Display:none removes the element from the normal document flow. The effect is surrounding elements will be adjusted as they reflow in the document. visibility:hidden hides the element, but it remains in the document flow. This may leave what appears to be an unexplainable “blank hole” your document.

50 Block vs Inline <div> <h1> <p> <table>
<acronym>CSS</acronym> stands for Cascading Style Sheet. A CSS style sheet <strong>can</strong> be used to create powerful web pages. Click <a href=> here </a> for a sample of a CSS based web page.

51 HTML Elements Block Inline <div> <span>
Your general-purpose box <h1> ... <h6> All headings <p> Paragraph <ul>, <ol>, <dl> Lists (unordered, ordered and definition) <li>, <dt>, <dd> List items, definition list terms, and definition list definitions <table> Tables <blockquote> Like an indented paragraph, meant for quoting passages of text <pre> Indicates a block of preformatted code <form> An input form Inline <span> Your all-purpose inline element <a> Anchor, used for links (and also to mark specific targets on a page for direct linking) <strong> Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag <em> Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag <img /> Image <br> The line-break is an odd case, as it's an inline element that forces a new line. However, as the text carries on on the next line, it's not a block-level element. <input> Form input fields like and <abbr> Indicates an abbr. (hover to see how it works) <acronym> Working much like the abbreviation, but used for things like this TLA.

52 CSS based layout #layout #header #nav #content #sidebar #footer

53 Positioning Schemes Normal Flow Float Absolute position: static;
Normal flow is the default scheme used for positioning. In this scheme, block boxes flow vertically starting at the top of their containing block with each placed directly below the preceding one. position: static; position: relative; Float When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block's padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side. Absolute In absolute positioning, block boxes are removed from the normal flow and have no effect on boxes in that flow. Like floated elements, absolutely positioned elements are always treated as block-level elements. As such, they establish a new containing block for any descendants, i.e., any elements contained within the absolutely positioned element. position: absolute; position: fixed;

54 Static Positioning {position: static;}
position:static is the default scheme used in normal flow positioning. In this scheme, block boxes flow vertically starting at the top of their containing block with each placed directly below the preceding one. Inline boxes flow horizontally from left to right. Take note that vertical margins are collapsed in the normal flow. That is, instead of adding the bottom margin of a box to the top margin of the one immediately below it, only the larger of the two values is used:

55 Relative Positioning {position: relative;}
When an element specifies {position:relative;} it is initially positioned following the normal flow rules. Surrounding boxes are positioned accordingly. Then, the box is moved according to its offset properties.

56 Float Positioning {float: left;}
Floating is achieved by setting the float property on an element's style to either left or right. Special rules apply to floated elements. When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block's padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side.

57 Absolute Positioning {position: absolute;}
When an element specifies {position:absolute;} The position of an absolutely positioned element is determined by its offset values: top, right, bottom and left. These values work in much the same way as with relatively positioned elements. But unlike relative positioning, where the offsets are measured from the element's position in the normal flow, an absolutely positioned element is offset from its container block.

58 Fixed Positioning {position: fixed;}
Fixed positioning is a special case of absolute positioning. For fixed elements, the containing block is always taken to be the viewport of the browser window. A fixed element does not move when a web page is scrolled as all other elements do.

59 Clear {clear: left;} The CSS clear property is used to control flow when using the float property. Using CSS clear, you can specify whether to keep one or both sides of an element "clear" (i.e. no elements can appear on the side that is clear).

60 Box Model

61 Box Model Hack p { background: #ff9999; border: 5px solid #ff0000;
padding: 25px; width: 160px; /* IE */ voice-family: "\"}\" "; voice-family: inherit; width: 100px; /* FF */ } html>body p { width: 100px; 160px 100px border content padding 5px 25px

62 Quirks Mode To maintain compatibility with the greatest possible number of web pages, modern web browsers are generally developed with multiple rendering modes standards mode: pages are rendered according to the HTML and CSS specifications quirks mode: attempts are made to emulate the behavior of an older browser to support the large body of legacy documents

63 DOCTYPE (Almost) Standards Mode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> Quirks Mode <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Almost Standards Mode maintains the "traditional" vertical sizing of table cells according to the CSS2 specification. "Almost standards" mode rendering matches "standards" mode in all details except for one. The layout of images inside table cells is handled the same way "quirks" mode operates. This means that sliced-images-in-tables layouts are less likely to fall apart in browsers when in either "quirks" or "almost standards" mode, rather than "standards“ mode

64 DHTML Some Dynamic HTML effects can be accomplished with CSS Rollovers
Button pushes

65 Common Mistakes Using an HTML tag because of the way it looks, not for its meaning Inserting presentation into your HTML Adding an ID or Class to all HTML elements so that it is a selector for CSS Using “=“ instead of “:” in declaration Not preserving case: ID & Class names are case-sensitive

66 Best Practices Make sure you’re using a good DOCTYPE
Order styles in file HTML selectors at top ID selectors together (especially those used for layout) Place class and pseudo-class selectors last Add notes Use em or %, not px Add {border: 1px solid red;} to elements in your CSS to help debug layout, positioning or spacing Always terminate your declarations with a semicolon (;) Do not use the HTML tables for layout

67 Tools Firefox with Firebug 1st Page 2000 in Realtime Preview mode

68 Demo

69 Firebug Demo P element Box Model Styles Look at CSS Viewing colors
Viewing images Editing TechRepublic “print media”

70 References

71 Questions?

Download ppt "CSS comes after HTML By David J. Young."

Similar presentations

Ads by Google