Presentation is loading. Please wait.

Presentation is loading. Please wait.

Very quick intro HTML and CSS. Sample html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> A Web Title.

Similar presentations


Presentation on theme: "Very quick intro HTML and CSS. Sample html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> A Web Title."— Presentation transcript:

1 Very quick intro HTML and CSS

2 Sample html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> A Web Title Go here No, go here This is a header Bet you want to know why you're here This is important Let me explain why... Sections help us decode the site Here's some info about this section This is another section for our site Here's some info about this section Some more stuff that's important And make sure you don't forget!

3 Sample CSS body {background: cyan; } /* style the "links" menu" */ /* The div size is 150x700. Position is 30 px from the top */ div#links {position: absolute; top: 30px; left: 0; width: 150px; height: 700px; font: 16px Verdana, sans-serif;} /* Style the actual links */ /* override the ul so it's closer to the left edge */ div#links ul {padding-left: 2px; } /* no underline on the links */ div#links li {list-style-type: none;} /* give it a background and color */ div#links a {background: blue; color: #F7C8D5; display: block; text-align: center; font: bold 1em sans-serif; padding: 2px 4px; margin: 0; margin-bottom: 2px; border- width: 0; text-decoration: none; } /* Special style for when the mouse is hovering */ div#links a:hover {background: #94B3F2; color: #411;} /* Style the content area */ div#content {background: #232334; color: #F7F7ED; } div#content {position: absolute; top: 10px; left: 160px; right: 25px; font: 13px Verdana, sans-serif; padding: 10px; border: solid #cbc8f6;} div#content p {margin: 0 1em 1em; font-size: 12px;} h1 { background: #cbc8f6; color: blue; } /* Style elements within a class of div */ div.important h2 { color: red; } div.important p { font-style: italic; } /* Style specific elements with a class */ h2.notice {color: yellow; } /* One style for images (could use classes, ids for more control */ img {float: right; } Which CSS commands will be important?


Download ppt "Very quick intro HTML and CSS. Sample html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> A Web Title."

Similar presentations


Ads by Google