Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.

Similar presentations


Presentation on theme: "CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline."— Presentation transcript:

1 CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline style

2 External Style Sheet  External Style Sheet  With an external style sheet, you can change the look of an entire website by changing just one file!  Each page must include a reference to the external style sheet file inside the element. The element goes inside the head section: 

3 Internal style Sheet  An internal style sheet may be used if one single page has a unique style.  Internal styles are defined within the element, inside the head section of an HTML page:  Example  body { background-color: linen; } h1 { color: maroon; margin-left: 40px; }

4 Inline Styles  An inline style may be used to apply a unique style for a single element.  An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!  To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a element:  Example  This is a heading.

5  A CSS rule set consists of a selector and a declaration block:  The selector points to the HTML element you want to style.  The declaration block contains one or more declarations separated by semicolons.  Each declaration includes a property name and a value, separated by a colon.

6  A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces  Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.  A CSS comment starts with /* and ends with */

7  CSS selectors allow you to select and manipulate HTML elements.  CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more.  Id=‘#’ class=‘.’ in css page.  Do NOT start an ID and class name with a number!

8  you can group the selectors, to minimize the code.  To group selectors, separate each selector with a comma.  In the example below we have grouped the selectors from the code above:  Example  h1, h2, p, h3, h4,h5 { text-align: center; color: red; }

9 W3Schools' CSS reference is tested regularly with all major browsers. Here the link with all CSS reference; http://www.w3schools.com/cssref/default.asp Here more rules with CSS in the Learn CSS LayoutLearn CSS Layout http://learnlayout.com/toc.html


Download ppt "CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline."

Similar presentations


Ads by Google