Designing Websites with CSS

Internet Programming How to style your web pages with CSS.

Cascading Stylesheets (CSS) are used to deﬁne the look and feel of HTML elements. HTML <h3>Style Me!</h3> h3 { color: green; text-decoration: underline; } CSS Style Me! Result

How to use CSS • Declare your CSS header <style type= “text/css”></style> • Write your CSS code • Use Selectors to select HTML elements • Deﬁne the selection with properties and deﬁnitions

3 Ways to Declare CSS Good - Importing External File <link rel=“stylesheet” type=“text/css” href= “main.css” /> Bad - CSS explicitly deﬁned in HTML header <style type=“text/css”> h3 { color: #CCC; } </style> Ugly - Inline CSS declarations <p style= “color:#CCC;”>yuck</p>

CSS Definition Structure selector { property: definition; property: definition; property: definition; }

Basic Selectors Selectors help you pinpoint what you are wanting to style. • HTML element h3, p, body, etc. • Class attribute .subtopic <h1 class=“subtopic”> • ID attribute #ﬁrst <p id=“ﬁrst”>

HTML selectors allow you to deﬁne a style for multiple elements at once. h1, p { color: blue; } <h1>First Title</h1> <p id=“ﬁrst”>First Paragraph</p> <h1 class=“sub”>Second Title</h1> <p>Second Paragraph</p> <h1 class=“sub”>Third Paragraph</h1> <p>Third Paragraph</p>

Class selectors deﬁne HTML elements that have a given class attribute .sub { text-decoration: underline; } <h1>First Title</h1> <p id=“ﬁrst”>First Paragraph</p> <h1 class=“sub”>Second Title</h1> <p>Second Paragraph</p> <h1 class=“sub”>Third Paragraph</h1> <p>Third Paragraph</p>

ID selectors define an HTML element that has a given id attribute #first { letter-spacing: 10px; } <h1>First Title</h1> <p id=“first”>First Paragraph</p> <h1 class=“sub”>Second Title</h1> <p>Second Paragraph</p> <h1 class=“sub”>Third Paragraph</h1> <p>Third Paragraph</p>

Properties and Definitions style the Selection • Selections can have an unlimited amount of properties and definitions • There are numerous properties available to style a selection • Some properties are used for colors and styles, others are used for positioning color: blue; font-size: 12px; background-color: blue; font-size: 12px; background-color: blue; font-size: reen; margin: 0px; border: 1px solid green; margin: 0px; border: 1px solid green; margin: 0px; backgro px 10px; font-weight: bold; padding: 5px 10px; font-weight: bold; padding: 5px 10px; font-weight: bold round-image: url(bar.png); float: left; background-image: url(bar.png); float: left; background-image: url(bar ; font-size: 12px; background-color: blue; font-size: 12px; background-color: blue; font-size: 12px; rgin: 0px; border: 1px solid green; margin: 0px; border: 1px solid green; margin: 0px; border: 1px solid font-weight: bold; padding: 5px 10px; font-weight: bold; padding: 5px 10px; font-weight: bold; padding: age: url(bar.png); float: left; background-image: url(bar.png); float: left; background-image: url(bar.png); flo ound-color: blue; font-size: 12px; background-color: blue; font-size: 12px; background-color: blue; font- olid green; margin: 0px; border: 1px solid green; margin: 0px; border: 1px solid green; margin: 0px; ba

h1 { text-decoration: underline; } p{ font-style: italic; } .notice { <h1 id=“ﬁrst”>First Title</h1> border: 1px solid red; <p>First Paragraph</p> } <h1>Second Title</h1> <p class=“notice”>Second Paragraph</p> #ﬁrst { <h1>Third Paragraph</h1> color: blue; <p class=“notice”>Third Paragraph</p> }

body { background: #59b5f5 url(bg.png) repeat-x top left; color: white; } <body> <h1>CSS Repeating Background</h1> </body>

#left-column { <div id=“left-column” class=“column”> ﬂoat: left; <p>Left</p> width: 100px; <p>Left</p> } <p>Left</p> </div> #right-column { <div id=“right-column” class=“column”> margin-left: 105px; <p>Right</p> width: 200px; <p>Right</p> } <p>Right</p> </div> .column { border: 1px solid black; text-align: center; }

For an exhaustive list of CSS properties, check out this website: http://meiert.com/en/indices/css-properties/

For questions, comments or feedback, feel free to contact me. Chad Hutchins hutchins.chad@gmail.com twitter.com/chadhutchins

Designing Websites with CSS

0 comments

Notes on slide 1

3 Favorites