Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSS comes after HTML By David J. Young. Agenda Web pages created with CSS Web pages created with CSS CSS 101 CSS 101 CSS Concepts CSS Concepts CSS Shortcuts.

Similar presentations


Presentation on theme: "CSS comes after HTML By David J. Young. Agenda Web pages created with CSS Web pages created with CSS CSS 101 CSS 101 CSS Concepts CSS Concepts CSS Shortcuts."— Presentation transcript:

1 CSS comes after HTML By David J. Young

2 Agenda Web pages created with CSS Web pages created with CSS CSS 101 CSS 101 CSS Concepts CSS Concepts CSS Shortcuts CSS Shortcuts CSS based page design CSS based page design Tools Tools Demo 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

10 CSS Example 8

11 CSS Example 9

12 CSS Samples Q: What is different about all of the samples? Q: What is different about all of the samples? A: Each presentation (look & feel) is completely different A: Each presentation (look & feel) is completely different Q: What is the same in all the samples? Q: What is the same in all the samples? A: The content. 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 CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a problem Styles were added to HTML 4.0 to solve a problem External Style Sheets can save you a lot of work External Style Sheets can save you a lot of work External Style Sheets are stored in CSS files External Style Sheets are stored in CSS files Multiple style definitions will cascade into one Multiple style definitions will cascade into one

16 Why CSS? This is my headline This is my headline

this is a sub header this is a sub header
this is a paragraph of content, it contains some bold text and some colored text. this is a paragraph of content, it contains some bold text and some colored text. this is a second paragraph this is a second paragraph
This is my headline this is a sub header this is a paragraph of content, it contains some bold text and some colored text. this is a second paragraph Separates content from presentation Semantic HTML for authoring web pages Semantic HTML for authoring web pages Semantic HTML Non-Semantic HTML

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

18 Variations CSS 1 CSS 1 The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December Among its capabilities are support for: FontFont properties such as typeface and emphasis Font Color of text, backgrounds, and other elements Text attributes such as spacing between words, letters, and lines of text AlignmentAlignment of text, images, tables and other elements tables Alignmenttables Margin, border, padding, and positioning for most elements Unique identification and generic classification of groups of attributes CSS 2 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. positioning CSS 2.1 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 Candidate RecommendationCandidate Recommendation CSS 3 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. developmentCSS3 progress reportdevelopmentCSS3 progress report

19 Browser Support for CSS

20 Media Types AllUsed for all media type devices AuralUsed for speech and sound synthesizers BrailleUsed for braille tactile feedback devices EmbossedUsed for paged braille Printers HandheldUsed for small or handheld devices PrintUsed for printers ProjectionUsed for projected presentations, like slides ScreenUsed for computer screens TTYUsed for media using a fixed-pitch character grid, like teletypes and terminals TVUsed for television-type devices

21 Importance There a two levels of importance There a two levels of importance Normal Normal Important (made using !important declaration) Important (made using !important declaration) Both Authors and Readers can make !important declarations Both Authors and Readers can make !important declarations In CSS1, author !important declarations overruled reader declarations In CSS1, author !important declarations overruled reader declarations In CSS2, reader !important declarations overrule author declarations In CSS2, reader !important declarations overrule author declarations

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. 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.color 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. 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.margin- topmargin- top

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 User Agent Style Sheets Browser Defaults C:\Program Files\Mozilla Firefox\res\html.css User Style Sheets 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 Author Style Sheets External style sheet External style sheet Internal style sheet (inside the tag) Internal style sheet (inside the tag) Inline style (inside an HTML element) 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 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 The Box Model - padding, margin, outline and borders padding, padding, padding-top, padding-right, padding-top, padding-right, padding-bottom, padding-left padding-bottom, padding-left border, border, border-top, border-right, border-top, border-right, border-bottom, border-left border-bottom, border-left border-style, border-style, border-top-style, border-right-style, border-bottom-style, border-left-style border-top-style, border-right-style, border-bottom-style, border-left-style border-color, border-color, border-top-color, border-right-color, border-bottom-color, border-left-color border-top-color, border-right-color, border-bottom-color, border-left-color border-width, border-width, border-top-width, border-right-width, border-bottom-width, border-left-width border-top-width, border-right-width, border-bottom-width, border-left-width outline outline-style outline-color outline-width margin, margin, margin-top, margin-right, margin-top, margin-right, margin-bottom, margin-left margin-bottom, margin-left 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 Tables table-layout border-collapse border-spacing empty-cells caption-side Generated Content content counter- increment counter- increment counter-reset quotes Paged Media page-break- before page-break- before page-break-after page-break- inside page-break- inside orphans Widows Misc. cursor direction unicode-bidi

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 Selectorselement { } Element Selectorselement { } Class Selectors.classname { } Class Selectors.classname { } ID Selectors#idname { } ID Selectors#idname { } Descendant Selectorsul li { } Descendant Selectorsul li { } Child Selectorsul > li { } Child Selectorsul > li { } Adjacent Siblingh1 + p { } Adjacent Siblingh1 + p { } Attribute Selectorsimg[src|="vacation"] { } Attribute Selectorsimg[src|="vacation"] { } Daisy Chaining#id element.class { } Daisy Chaining#id element.class { } Group Selectorsh1,h2,h3 { } Group Selectorsh1,h2,h3 { } Universal Selectors* { } Universal Selectors* { } Psuedo-Classesa:hover { } Psuedo-Classesa:hover { } Psuedo-Elementsp:first-letter { } Psuedo-Elementsp:first-letter { }

29 HTML relates to CSS Element Selectors Element Selectors styled by styled by p {color: red; } p {color: red; } Class Selectors Class Selectors styled by styled by p.code {color: cyan; font-family: courier } or.code {color: #F0F; font-family: courier } ID Selectors ID Selectors styled by 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 A unique ID can only be used only once on a HTML page IDs are usually associated with layout regions or areas IDs are usually associated with layout regions or areas A class can be used any number of times 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) 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 ID attributes in the selector (= b) count the number of other attributes and pseudo-classes in the selector (= c) 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) 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 li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* 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,, HTML Elements,, CSS Classes.center,.hilight CSS Classes.center,.hilight CSS ID #content, #navbar CSS ID #content, #navbar Inline Styles style="text-align: center" Inline Styles style="text-align: center"

33 Cascade Order Find all declarations that apply to the element and property for the target media type. Find all declarations that apply to the element and property for the target media type. media type media type Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence: Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence: user agent declarations user agent declarations user normal declarations user normal declarations author normal declarations author normal declarations author important declarations author important declarations user 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. 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.specificity 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. 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 Find all declarations that match a particular element Sort declarations by weight and origin Sort declarations by weight and origin Sort selectors by specificity Sort selectors by specificity Sort by order specified Sort by order specified

35 What color is P element text? Example

Text

Other Paragraph

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.
External Style Sheets Inline Style Internal Style Sheet
External Style Sheets Inline Style Internal Style Sheet"> HTML Webpage <!DOCTYPE html PUBLIC "http://www.w3." title="HTML Webpage "http://www.w3.">

38 External CSS Files menu layout navbar @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; margin: 0; padding: 0; } 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 #full { border-width: 1px; border-style: dotted; border-color: #ff0000; }or #shorthand {border: 1px dotted #f00;}

41 CSS Shorthand Border» *-width *-style *-color Border» *-width *-style *-color Margin» *-top *-right *-bottom *-left Margin» *-top *-right *-bottom *-left Padding» *-top *-right *-bottom *-left Padding» *-top *-right *-bottom *-left Font» *-style *-variant *-weight *-size *-height *-family Font» *-style *-variant *-weight *-size *-height *-family List-Style» *-type *-position *-image List-Style» *-type *-position *-image Background» *-color *-image *-repeat *-attachment *-position 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 00 5px

43 Colors color_nameA 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%)) #rrggbbA 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 ininch cmcentimeter mmmillimeter ptpoint (1 pt is the same as 1/72 inch) pcpica (1 pc is the same as 12 points) Relative em1em 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 exone ex is the x-height of a x (x-height is usually about half the M-size) pxpixels (a dot on the computer screen) %percentage

45 HTML Tags Deprecated Discouraged

46 Comments CSS uses C Style comment Syntax 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 Comments cannot be nested

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

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

49 display vs visibility selector {display: none;} & 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. 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. 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 CSS stands for Cascading Style Sheet. A CSS style sheet can be used to create powerful web pages. Click here for a sample of a CSS based web page.http://www.sample.com/url.html

51 HTML Elements Block

Your general-purpose box All headings

Paragraph,,,, Lists (unordered, ordered and definition),,,, List items, definition list terms, and definition list definitions

Tables
Like an indented paragraph, meant for quoting passages of text
 Indicates a block of preformatted code 
An input form Inline Your all-purpose inline element Anchor, used for links (and also to mark specific targets on a page for direct linking) Used to make your content strong, displayed as bold in most browsers, replaces the narrower (bold) tag Adds emphasis, but less strong than. Usually displayed as italic text, and replaces the old (italic) tag Image 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. Form input fields like and Indicates an abbr. (hover to see how it works) Working much like the abbreviation, but used for things like this TLA.

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

53 Positioning Schemes Normal Flow Normal Flow 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: static; position: relative; position: relative; Float 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 Absolute In absolute positioning, b lock 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: absolute; position: fixed; position: fixed;

54 Static Positioning {position: static;} {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;} {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;} {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;} {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;} {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;} {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; } content 100px 25px5px 160px padding border

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 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 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 Quirks Mode 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 CSS2

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

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

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

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

68 Demo

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

70 References

71 Questions?


Download ppt "CSS comes after HTML By David J. Young. Agenda Web pages created with CSS Web pages created with CSS CSS 101 CSS 101 CSS Concepts CSS Concepts CSS Shortcuts."

Similar presentations


Ads by Google