Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach A ONE-COLUMN CSS LAYOUT CASCADE IN CASCADING STYLE SHEETS What exactly is the cascade ? This is how the browser resolves conflicts of which CSS rule to apply when there is more than one CSS rule applied to the same element. CASCADE IN CASCADING STYLE SHEETS Combined “Virtual” Style Sheet Inline Style – 1st Internal Style Sheet – 2nd Web_page.html External Style Sheet 3rd Browser’s Style Sheet – 4th CASCADE IN CASCADING STYLE SHEETS The order of your CSS rules is important MARGINS, BORDERS AND PADDING The BOX model Source: http://www.w3.org/TR/CSS21/box.html MARGINS, BORDERS AND PADDING Applying margins, borders and padding MARGINS, BORDERS AND PADDING Applying margins, borders and padding MARGINS, BORDERS AND PADDING Using CSS shorthand for margins, borders and padding MARGINS, BORDERS AND PADDING Using CSS shorthand for margins, borders and padding 1 -top Work clockwise from top -top -right -bottom -left Applies 4 -left 2 -right 3 -bottom to margins, borders and padding Summarized as margin: 1, 2, 3, 4 sequence DIVIDING UP YOUR DOCUMENT Using CSS shorthand for margins, borders and padding DIVIDING UP YOUR DOCUMENT <div> and <span> elements Help to group information into logical clusters Often referred to as Content Areas Generic holders of information No inherent meaning whereas <ul> has a definite meaning Should contain meaningful elements such as <p>, <h1>, etc <div> - block-level <span> - inline Controlled id by (identification) and class (classification) attributes <DIV> <div id=“content”> unique – so can only apply to the one place <div class=“entry”> Can be applied uniformly across many <div> DEFINING RULES FOR IDS OR CLASSES <div id=“content”> <div class=“entry”> #content .entry { { /* property : value pairs */ } /* property : value pairs */ } CHOOSING THE IDENTIFIERS FOR IDS AND CLASSES Choose the names for the identifiers carefully Have meaning Use a-z/A-Z/0-9,-_ Start with a letter and be careful as Header is considered different from header by the browsers. USING DIV ELEMENTS TO CREATE CSS LAYOUTS Each div in a layout can be given a: width, height, colour and position. USING DIV ELEMENTS TO CREATE CSS LAYOUTS A one-column CSS layout USING DIV ELEMENTS TO CREATE CSS LAYOUTS auto; USING DIV ELEMENTS TO CREATE CSS LAYOUTS Centering text USING DIV ELEMENTS TO CREATE CSS LAYOUTS A ONE-COLUMN CSS LAYOUT Using Descendant or Contextual Selectors to Minimise Markup Look for any <p> within a <div> called footer STYLING DETAILS WITH THE SPAN ELEMENT <span class=“entry”> Can be applied uniformly across many <span> Can be located within a Block-level element STYLING WITH CLASS ATTRIBUTES <img src="images/king_kong.jpg" width="500" height="350" alt="The mighty King Kong, a fearsome giant ape." title="King Kong contemplates scaling yet another tall building." class="portrait" /> STYLING WITH CLASS ATTRIBUTES Background images in CSS Body Other elements can also have images in their background STYLING WITH CLASS ATTRIBUTES Background images in CSS body { background:url(../images/darkblueGrad2.gif) repeat-x; background-color:#01A9EA; font-family: Verdana, Arial, Helvetica, sans-serif; //font-size:0.7em; font-size:62.5%; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #666666; } Other elements can also have images in their background