Heading Heading Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Heading h1 { font-family: Arial; color: green; } Lorem ipsum dolor sit amet. HTML CSS
Heading Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Heading h1 { font-family: Georgia; color: green; } p { color: red; font-weight:bold; } Lorem ipsum dolor sit amet. Heading HTML CSS
Try giving everything on your page a different background color Open this in another tab for reference: http://goo.gl/tngWK (don’t forget, American spelling)
Lorem ipsum Dolor sit amet Consectetuer adipiscing div { background-color:yellow; … } Dolor sit amet Lorem ipsum we want to target this one Consectetuer adipiscing HTML CSS
Lorem ipsum Dolor sit amet Consectetuer adipiscing div { background-color:yellow; … } Dolor sit amet Lorem ipsum Consectetuer adipiscing use classes as “hooks” for styling HTML CSS
Lorem ipsum Dolor sit amet Consectetuer adipiscing div { background-color:yellow; … } .alert { background-color:red; } Dolor sit amet Lorem ipsum Consectetuer adipiscing HTML CSS
Class tips • When using a class, think about what it is rather than how it looks • Don’t start with a numeral or symbol • You can use a class more than once, and have different styles for it depending on where it’s nested.
div { padding-bottom: 20px; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS
div { padding: 20px; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS
div { padding: 20px 20px 0 20px; } Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. CSS
div { margin-right: 20px; } Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. CSS
div { margin: 20px; } Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. CSS
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. width: 200px Total Width: 200px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. width: 200px Total Width: 210px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. width: 200px Total Width: 220px padding: 10px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. width: 200px Total Width: 230px padding: 10px padding: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. margin: 10px Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Add some margin, padding and borders to your page. Tip: Try adding a left and right margin to your body. Adding a margin of “auto” to it centres everything.
p.highlight {…} p .highlight {…} .highlight {…} Spacing is important Any element with a class of “highlight” Any paragraph with a class of “highlight” Anything with a class of “highlight” that’s within a paragraph CSS CSS CSS
Breakdown If an element has 2 classes, the one declared last in the stylesheet will override the one declared before it Lorem ipsum Lorem ipsum p { color:blue; } .prominent { color:pink; } .highlight { color:green; } HTML CSS
Breakdown If an element has 2 classes, the one declared last in the stylesheet will override the one declared before it Lorem ipsum Lorem ipsum p { color:blue; } .highlight { color:green; } .prominent { color:pink; } HTML CSS
Open up the Hackbook: Try the following tasks: • Apply a background image to the whole page • Make your navigation look more realistic using background colors and borders • Add a table http://hackbook.hackasaurus.org
Ninja Style div.last-child {…} a[href$=.pdf] div:nth-child(3) {…} T argets the third child div of a parent T argets the last child div of a parent T argets all links that are pointing to a PDF file CSS CSS CSS