Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.
-
Upload
clementine-rogers -
Category
Documents
-
view
218 -
download
0
Transcript of Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.
![Page 1: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/1.jpg)
Ch 10HTML and CSS Web Standards SolutionsA Web Standardistas’ Approach
![Page 2: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/2.jpg)
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.
![Page 3: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/3.jpg)
Web_page.html
![Page 4: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/4.jpg)
The order of your CSS rules is important
![Page 5: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/5.jpg)
The BOX model
Source: http://www.w3.org/TR/CSS21/box.html
![Page 6: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/6.jpg)
Applying margins, borders and padding
![Page 7: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/7.jpg)
Applying margins, borders and padding
![Page 8: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/8.jpg)
Using CSS shorthand for margins, borders and padding
![Page 9: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/9.jpg)
Using CSS shorthand for margins, borders and padding
Work clockwise from top-top-right-bottom-left
Applies to margins, borders and padding
Summarized as margin: 1, 2, 3, 4 sequence
1 -top
2 -right
3 -bottom
4 -left
![Page 10: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/10.jpg)
Using CSS shorthand for margins, borders and padding
![Page 11: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/11.jpg)
<div> and <span> elementsHelp to group information into logical clusters
Often referred to as Content AreasGeneric holders of informationNo inherent meaning whereas <ul> has a definite meaning
Should contain meaningful elements such as <p>, <h1>, etc
<div> - block-level<span> - inline
Controlled byid (identification) and class (classification) attributes
![Page 12: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/12.jpg)
<div id=“content”>unique – so can only apply to
the one place<div class=“entry”>
Can be applied uniformly across many <div>
![Page 13: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/13.jpg)
![Page 14: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/14.jpg)
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.
![Page 15: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/15.jpg)
Each div in a layout can be given a: width, height, colour and position.
![Page 16: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/16.jpg)
A one-column CSS layout
![Page 17: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/17.jpg)
auto;
![Page 18: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/18.jpg)
Centering text
![Page 19: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/19.jpg)
![Page 20: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/20.jpg)
Using Descendant or Contextual Selectors to Minimise Markup
Look for any <p> within a <div> called footer
![Page 21: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/21.jpg)
<span class=“entry”>Can be applied uniformly across many <span>Can be located within a Block-level element
![Page 22: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/22.jpg)
<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" />
![Page 23: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/23.jpg)
Background images in CSS Body
Other elements can also have images in their background
![Page 24: Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.](https://reader036.fdocuments.in/reader036/viewer/2022062321/56649efe5503460f94c12d8c/html5/thumbnails/24.jpg)
Background images in CSSbody {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 #containerselector */color: #666666;}
Other elements can also have imagesin their background