Head First HTML and CSS - Cdn.oreilly.com

More documents

Recommendations

Info

Cruisin’ with style… It’s time for another test drive, so reload your “index.html” file again. This time, you’ll see the Starbuzz web page has a whole new look. Now we have margins around the content. We’ve got a black dotted border around the content. There’s now some padding between the content and the border (on all sides). We’re using a different font for a cleaner look. If you're using IE, you might not see the border. Internet Explorer does not display the border around the body correctly. Try loading the page in Firefox, Chrome or Safari to see the border. Whoa! Very nice. We’re in business now! the language of the web Background color is now tan. Margin you are here 4 31
looking more closely at css background-color: #d2b48c; margin-left: 20%; margin-right: 20%; border: 2px dotted black; padding: 10px 10px 10px 10px; font-family: sans-serif; Q: CSS looks like a totally different language than HTML. Why have two languages? That’s just more for me to learn, right? A: You are quite right that HTML and CSS are completely different languages, but that is because they have very different jobs. Just like you wouldn’t use English to balance your checkbook, or math to write a poem, you don’t use CSS to create structure or HTML to create style because that’s not what they were designed for. While this does mean you need to learn two languages, 32 Chapter 1 Even though you’ve just glanced at CSS, you’ve already begun to see what it can do. Match each line in the style definition to what it does. you’ll discover that because each language is good at what it does, this is actually easier than if you had to use one language to do both jobs. Q: #d2b48c doesn’t look like a color. How is #d2b48c the color “tan”? A: There are a few different ways to specify colors with CSS. The most popular is called a “hex code,” which is what #d2b48c is. This really is a tan color. For now, just go with it, and we’ll be showing you exactly how #d2b48c is a color a little later. Defines the font to use for text. Defines a border around the body that is dotted and the color black. Sets the left and right margins to take up 20% of the page each. Sets the background color to tan. Creates some padding around the body of the page. Q: Why is there a “body” in front of the CSS rules? What does that mean? A: The “body” in the CSS means that all the CSS between the “{” and “}” applies to content within the HTML element. So when you set the font to sans-serif, you’re saying that the default font within the body of your page should be sans-serif. We’ll go into a lot more detail about how CSS works shortly, so keep reading. Soon, you’ll see that you can be a lot more specific about how you apply these rules, and by doing so, you can create some pretty cool designs.
Page 2 and 3: Want to read more?
Page 4 and 5: Table of Contents (summary) Intro I
Page 6 and 7: going further with hypertext 2Meeti
Page 8 and 9: getting connected 4A Trip to Webvil
Page 10 and 11: 6 Serious standards and all that ja
Page 12 and 13: 3 2 1 0 4 5 6 7 8 8 Expanding 9 A 1
Page 14 and 15: Weekly Elixir Specials Lemon Breeze
Page 16 and 17: 12 Modern html5 markup HTML table o
Page 18 and 19: 14 Getting html forms Interactive t
Page 20 and 21: 1 getting to know HTML The Language
Page 22 and 23: What does the web server do? Web se
Page 24 and 25: What the browser creates When the b
Page 26 and 27: You’re closer to learning HTML th
Page 28 and 29: Your big break at Starbuzz Coffee S
Page 30 and 31: Creating the Starbuzz web page Of c
Page 32 and 33: Step four: Change your TextEdit Pre
Page 34 and 35: Step two: Open Notepad. Once you’
Page 36 and 37: Meanwhile, back at Starbuzz Coffee
Page 38 and 39: Opening your web page in a browser
Page 40 and 41: Markup Magnets So, let’s add that
Page 42 and 43: Are we there yet? You have an HTML
Page 44 and 45: Tags dissected Okay, you’ve seen
Page 46 and 47: Starbuzz Coffee’s Mission 1 2 3 4
Page 48 and 49: Meet the style element To add style
Page 52 and 53: Now that you’ve put a little styl
Page 54 and 55: HTML CSS Right. In fact, we’re to
Page 56 and 57: Across HTMLcross It’s time to sit
Page 58 and 59: Markup Magnets Solution Y
Page 60 and 61: Here’s the CSS in the mission pag
Page 62: Want to read more? Spreading the kn

Head First HTML and CSS - Cdn.oreilly.com

Create successful ePaper yourself

Delete template?

Save as template?