external style rules for html organization web sites can share a style sheet layout of pages using...
Post on 15-Jan-2016
221 views
TRANSCRIPT
External style rules for HTML
Organization web sites can share a style sheet
Layout of pages using positioning
Absolute & Relative Positioning
Cascading Style Sheets
- standardizing appearance
- replacing tables for layout
HTML Elements' Box Formatting Model
<html>
XML and CSS menu > CSS-XML-Examples > CSS-Examples/
<body> Hello</body></html>
<head> <style type="text/css">@import "myCS01.css"; </style>
</head>
body {
}
background-color: #bbbbbb ;font-family: verdana ;
reference to style sheet
myCS01.css
style rule for body element
Cross-Reference Style Sheets
style sheet
Style sheet
Web site 1 Web site 3 Web site 3
Standardize "Look" of multiple web sites
'Cascading' because of how priority rules are used to resolve conflictswhen multiple style rules apply to the same element.
body {
}
background-color: #bbbbbb;
font-family: verdana, arial, helvetica, sans-serif ;
myCS01.css
h1 {margin: 30px;padding: 50px;border: 3px dashed #333;}
uses Box Format Model For Html elements
to understand effects
- experiment with values
Another Style Rulefonts in order of
preference
margin
border
padding
HTMLcontent
Atmospheric space around HTML content
has width & color- solid, dashed
Buffer space beyond border
BoxFormatting Model
Applies to EVERY HTML element
http://www.w3.org/TR/REC-CSS1#formatting-model space-border-space
body {
}
background-color: #bbb ;font-family: verdana, arial, helvetica, sans-serif ;
myCS01.css
p {
}
Top-Right-Bottom-Left
T RI B LE(clockwise)
Experiment - font-sizeline-heightmarginpadding
border: 3px dashed #333;
font-size: 11px;line-height: 20px;
margin: 20px 20px 20px 20px;padding: 0px;
Another ruleBox Formatting Model
Simple style rules -
Grouped elements
Class selector
Types of Style Rules
h1 { color: blue }
declarationselector
h1, h2, h3 { color: blue }
Grouped declarations h1 { color: blue ; font-size: 12pt ; }
ID selector
h1.bluish { color: blue }
.bluish { color: blue }
<h1 class=bluish> --- </h1>
<p class=bluish> --- </p>
#bluish { } <p id=bluish> --- </p>
CSS Rule HTML reference
These can be applied to any HTML element – tables, forms, etc !
CSS Rule HTML reference
Cross Reference
ID selector #bluish { } <p id=bluish> --- </p>
CSS Rule HTML reference
with respect to nearestabsolute parent container
eg <body>
#Immobile {
}
Absolute Positioning
closest absolute Html container
top
width
left
position: absolute;
top: 150px;left: 50px;
width: 200px;
background-color: #cba;
font: 11px/20px verdana, arial,
helvetica, sans-serif;
padding: 10px; border: 1px dashed #999;
line-height: 17px;
Anchors the element
on Html page
Html elt
#Content-right {
}
Relative Positioning
/* Top-Right-Bottom-Left margin box T RI B LE */
margin: 50px 30px 50px 300px ;
background-color: #eee;
line-height: 17px ;
border: 1px dashed #999 ;
padding: 10px ;
Htmlcontent
Parent Html
Top
Right
Bottom
Left
Body
test00.html & css00.cssExperiment with these.
Style rule
Embedded in Parent Html Element
CSS Rule
<body>
<p>
<pre id="Content-right">
<div id='Immobile> 'position absolute
<pre id="Content-left">
<table id="Content-right">
<form id="Content-left">
<div id='Menu'>position absolute
test00.htmlmyCS00.html- Code next slides
AbsoluteRelative
Layout Control
Relative to bodymargin
margin
<select id="Content-right">
<img id="Content-right">
body {
margin: 10px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
border:10px solid #111;
background-color:#bbb;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:20px 20px 20px 20px;
padding:0px;
border:1px dashed #999;
background-color:#eee;
}
/* same as:
p {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
margin:20px 20px 20px 20px;
padding:0px;
}
*/
#Content-right {
margin: 50px 30px 50px 300px;
padding:10px;
border:1px dashed #999;
background-color:#eee;
line-height:17px;
}
/* Top-Right-Bottom-Left constraints on margin box T-RI-B-LE */
#Content-left {
margin: 20px 350px 70px 20px;
padding:10px;
border:1px dashed #999;
background-color:#dce;
line-height:17px;
}
#Immobile {
position:absolute;
top:150px;
left:50px; bottom 220px;
font:11px/20px verdana, arial, helvetica, sans-serif;
padding:10px;
width:200px;
background-color:#cba;
border:1px dashed #999;
line-height:17px;
}
#Menu {
position:absolute;
top:650px;
left:50px;
width:172px;
padding:10px;
font:11px/20px verdana, arial, helvetica, sans-serif;
background-color:#eba;
border:1px dashed #999;
line-height:17px;
}
<html>
<head><style type="text/css">@import "myCS00.css";</style></head>
<body>
Hello
<p> Hello. I hope you are having a nice day. </p>
<pre id="Content-right">
THE SUN RISING.
by John Donne
BUSY old fool, unruly Sun,
Why dost thou thus,
Through windows, and through curtains, call on us ?
Must to thy motions lovers' seasons run ?
Saucy pedantic wretch, go chide
Late school-boys and sour prentices,
.
</pre>
<pre id="Content-left">
Thy beams so reverend, and strong
Why shouldst thou think ?
I could eclipse and cloud them with a wink,
But that I would not lose her sight so long.
If her eyes have not blinded thine,
Look, and to-morrow late tell me,
</pre>
<div id="Immobile">See what the Immobile style does.
#Immobile {
position:absolute;
top:150px;
left:0px;
padding:10px;
width:200px;
background-color:#cba;
border:1px dashed #999;
line-height:17px;
}
</div>
<table id="Content-right">
<tr><td>hello</td><td>hello</td><td>hello</td></tr>
<tr><td>hello</td><td>hello</td><td>hello</td></tr>
<tr><td>hello</td><td>hello</td><td>hello</td></tr>
</table>
<form id="Content-left" >
<input type="text" value= "hello" />
<input type="button" value= "bye " />
</form>
<div id="Menu">List of Links <br>
<a href="a.html"> nowhere to go </a><br>
<a href="a.html"> fake link </a><br>
<a href="a.html"> another deadend </a><br>
</div>
<select id="Content-right" name="menu" onchange="window.location = menu.value" >
<option value="Menu04.html" > Choose an HTML Reference Site </option>
<option value="http://www.transaction.net/web/tutor/cmdtable.html"> Table of HTML Commands and Attributes </option>
<option value="http://www.htmlreference.com/" > HTML reference </option>
<option value="http://www.w3schools.com/tags//tag_img.asp" > w3schools HTML reference </option>
<option value="http://www.htmlreference.com/" > w3schools DOM reference </option>
<option value="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/fontsize.asp"> Style Properties </option>
</select>
<img id="Content-right" src="California.gif" />
</body>
</html>
XML CSS menu > CSS-XML-Topics
http://www.w3.org/TR/REC-CSS1#formatting-model
http://www.html-faq.com/faq.php
especially Box Formatting model
http://justinsomnia.org/notes/css/CSS_notes.html
References to CSS Links
> CSS-Examples/
Web Standards Organization
http://bluerobot.com/web/layouts/
examples adapted from here