Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All...
Transcript of Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All...
![Page 1: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/1.jpg)
Styling HTML5By Derek Peacock
![Page 2: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/2.jpg)
<body><div id=“page">
<header><img src="http://placehold.it/120x90"> <h1>Web Site Title</h1>
</header>
<nav><ul>
<li><a href="#">Menu Item 1</a></li><li><a href="#">Menu Item 2</a></li><li><a href="#">Menu Item 3</a></li>
</ul></nav>
<section><p>This is the main content!</p>
</section>
<footer><p>Copyright Notice etc.</p>
</footer>
</div></body>
Basic HTML5 Page
![Page 3: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/3.jpg)
This is the area around the web page normally outside the left and right borders of the page.
Set suitable background colour and image Select font family for paragraph text Select default font size (100% = 16px)
Styling <body>
body{
background-color:#00CCFF;font-family: Georgia, "Times New Roman", Times, serif;font-size: 100%;
}
![Page 4: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/4.jpg)
Adding Background Colours
header{
background‐color:#66FF99;}nav{
background‐color:#CCC;}section{
background‐color:#FF6;}footer{
background‐color:#CF3;}
![Page 5: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/5.jpg)
Design View & Page Inspector
![Page 6: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/6.jpg)
*{
padding: 0;margin: 0;border: 0;
}
CSS Reset
![Page 7: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/7.jpg)
Using a CSS Reset
• All space around elements removed
• Will look the same in all browsers
• Including Dreamweaver Live view (Opera/Web‐kit)
• Padding and margins re‐added later
![Page 8: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/8.jpg)
Needed to hold page parts together Sets the overall width of the page Positions the page on the screen
<div id=“container”>
#container{
background-color:#66cc66; /*green*/max-width:1160px; /*responsive design*/margin: 0 auto; /*Centre the page*/
}
![Page 9: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/9.jpg)
<div id=“container”>
![Page 10: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/10.jpg)
Usually a fixed height with the name of the site, images. Logo and corporate colours.
<header>
header{
background-color:#CCFF00;padding: 4px;height: 128px;
}
![Page 11: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/11.jpg)
FontsBody : Cambria, 'Times New Roman', serif;
Filename: MainStyles.cssSite: Peacock’s WinesAuthor: Dr Derek PeacockVersion: 0.1Changed: 1st September 2013Description: A Basic HTML5 Style Sheet
TOC* HTML Selectors
** Body** Header** Nav** Footer
* Class Selectors* ID Selectors
Commenting css Sheets
![Page 12: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/12.jpg)
Floating Elements
![Page 13: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/13.jpg)
Browser View
Other items have floated Floats need clearing Clearing floats is not easy in
different browsers
![Page 14: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/14.jpg)
.clearfix:before,.clearfix:after{
content: "\0020"; display: block; height: 0; overflow: hidden;
} .clearfix:after { clear: both; } .clearfix { zoom: 1; }
clearfix
![Page 15: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/15.jpg)
<header class=“clearfix"><img src="http://placehold.it/160x120"><h1>Web Site Title</h1>
</header>
Applying class=“clearfix”
![Page 16: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/16.jpg)
header h1{margin-top:15px;font-size: 2.0em;
}header h2{
font-size: 1.67em;}h1, h2, h3, h4{
font-family: Tahoma, Verdana, sans-serif}
<header><h1>
![Page 17: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/17.jpg)
Design View
![Page 18: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/18.jpg)
Nav Bar ‐More Floating
![Page 19: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/19.jpg)
Horizontal Navigation
![Page 20: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/20.jpg)
nav li a:hover, nav li a:focus{
background-color:#FF9966;}
Hover and Focus
![Page 21: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/21.jpg)
Adding Space back
![Page 22: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/22.jpg)
Browser View
![Page 23: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/23.jpg)
Styling <footer>
![Page 24: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/24.jpg)
HTML5 & CSS3 Logos
http://www.w3.org/html/logo/
![Page 25: Styling HTML5valerianweb.com/tutor/Assets/CSS/51_StylingaSite.pdf · Using a CSS Reset • All space around elements removed • Will look the same in all browsers • Including Dreamweaver](https://reader034.fdocuments.in/reader034/viewer/2022050611/5fb207429fd5b627424ebd21/html5/thumbnails/25.jpg)
Browser View