Build Your Own Website A Comic Guide to HTML, CSS and Wordpress by Nate Cooper (z-lib.org)

Guys, I think it’s all about how you Yep. You can use # to select any id work together! So can I put this code you’ve given to an element in your in the stylesheet in the root? HTML in any document that’s been linked to style.css. I think I’ll put Yes. If we are going to use that it into the main style over and over within a single stylesheet, at the root. I think I page, we’d want to use class might want to use instead. That looks like this: that same ID over and over. But wait—you said something about id being unique. <p>Welcome to Kim's site. This is where you can find all of my work, including my portfolio comics and pictures of my dog, Tofu.</p> <p class=\"quote\">\"If you work really hard and you're kind, amazing things will happen.\" Conan O'Brien</p> 88  Chapter 3  Kim Makes Things Look Great with CSS

And you select it out .quote { differently in the CSS. font-size: 18px; When you’re dealing with font-weight: bold; classes, you’ll need to use } this in the CSS: Oh, I see, so it’s a Yes. But keep in mind that # for id and a . for this isn’t just for paragraph elements—it can be used for class, right? any tag in your HTML. What if I want to create a section of the page News still comes that is independent of a paragraph? For example, on paper? what if I wanted to make a column like in a newspaper? Kim Learns CSS Classes and IDs  89

Hush...I think what you’re What does that looking for is the <div> tag, <div> do? which stands for division. <div id=\"mybox\">here's a div</div> Nothing yet! You’ll need me #mybox { for that. We can write some background: green; CSS that affects that <div> width: 100px; height: 100px; element. } I don’t get it. What’s the The <p> is meant for paragraphs— difference between the <div> usually this means text and images. You can’t put a paragraph inside of tag and the <p> tag? another paragraph, for example. 90  Chapter 3  Kim Makes Things Look Great with CSS

So if you want ...You can use the That means that if I You’re a group of <div> tag. want columns, I can use getting it, <div> tags in my HTML paragraphs... kiddo! and then use CSS to define the spacing? You say that, but all of We’ve just scraped this seems like mumbo the surface of what’s possible with CSS and jumbo to me. HTML; we’ve just given So just to recap, this you the basic outline, is HTML because it and it’s up to you to has < and />? This learn the rest. is a hyperlink, an There’s a whole world out there with anchor! HTML5 and CSS3, which add all kinds of useful tags for things like structure, layout, and graphics. <a href=\"http://tofuinspace.com\">click here</a> You are learning well. Kim Learns CSS Classes and IDs  91

And this is CSS That's right! because of the . and the {. It’s styling the .column { width: 300px; class column! } But there’s so much more HTML and For now, just learn How should CSS out there. How will I ever learn it to recognize the I look all? Is it just a matter of memorization? difference so that you can look up them up? specific tags as you need them. Here you go, deary. We Kim has learned a new got you this. When you spell: Google. She can get stuck, just look it up. now recognize the 92  Chapter 3  Kim Makes Things Look Great with CSS difference between HTML and CSS and can look up which tags to use when she needs to do something new.

Cascading Style Sheets Before we can dive into learning Cascading Style Sheets (CSS), we’ll need to know a little bit about how CSS connects to HTML. CSS and HTML are used together and rely upon each other to work. Think of HTML as an architect who builds the skeleton of a building and gives each web page its basic structure. CSS is more like the interior designer deciding how things look, what color the walls are, and where the furniture goes. In this chapter, we’ll see how to build on the bare-bones HTML framework and add some extra flair and finesse with CSS. CSS can be added to your site in a few different ways. You can use CSS inline—that is, written right inside an individual HTML tag—or you can put CSS into the <head> of a document. The most common and powerful way of including CSS is to create a separate stylesheet file and link it to each HTML document. That’s what we’ll be doing in this chapter. Setting Up Your Stylesheet and Linking It to Your HTML The name Cascading Style Sheets actually comes from the magazine world, where a style­ sheet is how desktop publishing programs format and present the magazine’s pages. It’s a single file that dictates things like the font and margins. Any changes that need to apply throughout the entire magazine can be made in a single place, and those edits cascade through the magazine. By creating a separate file for the CSS on your website, you mimic the power of the magazine stylesheet. All you need to do is create a separate CSS file and use the <head> section to link each HTML document to that file. The resulting organization might look something like Figure 3-1. home.html stylesheet.css about.html portfolio.html portraits.html landscapes.html Figure 3-1: You can have all the pages on your website point to a single stylesheet. Cascading Style Sheets  93

Making Your First Stylesheet In your code editor, create a new document and call it style.css. Technically, it doesn’t matter what you call the document as long as it ends in .css. Like HTML, the contents of the file are just text, but by using the file extension .css, you let the web browser and server know to expect CSS and not HTML or text. Save the file in the same folder as your test.html file. This is important because you’ll need to know the path to connect your stylesheet to your HTML document, just like with linking images. Next, open your test.html document. In the <head> of the document, add this line of code: <link href=\"style.css\" rel=\"stylesheet\">. It doesn’t matter whether you add this above or below the <title> and <meta> tags, as long as it’s between <head> and </head>, but we’ll put it on a line right before the </head> tag. Your document should now look like this: <!DOCTYPE html> <html> <head> <title>My Web Page</title> <meta name=\"description\" content=\"A test page created while learning to code using the book Build Your Own Website.\"> <link href=\"style.css\" rel=\"stylesheet\"> </head> <body> <h1>Hello World!</h1> <p>This is a second paragraph. <strong>This is bold text.</strong><br> <em>This is italic.</em></p> <p><a href=\"http://natecooper.co\">Click here!</a></p> <img src=\"image.jpg\" alt=\"our first photo\"> </body> </html> That little line of code is all we need to link the stylesheet we’ve created to our HTML document. For every other HTML page in our site, we’ll use the same line of code in the <head> to link the HTML document to the single stylesheet. Since a stylesheet is so fundamental to a modern website, it is common practice to place yours in the most important folder of your site, the “top” or so-called root directory. We know from the latest part of Kim’s adventure that to link to the path to the root of a site, you can simply use the / at the start of your path. For example, if you are working on a web page in a folder called portfolio, your <link> might look something like this: <link href=\"/style.css\" rel=\"stylesheet\"> By including this link in each of the <head> sections, you can link many different HTML pages to the same stylesheet, even if they’re in different folders. 94  Chapter 3  Kim Makes Things Look Great with CSS

It might take you some time and practice before you become fully efficient with paths. But don’t get intimidated. The main things to remember are that / is used every time there is a new folder, and you always work from the current folder in the case of relative paths. So if a file is in the same folder, you don’t need the /; but if it’s in a different folder, use / to signify that you are moving up a level. Because we are working off a computer, not a live server, just keep style.css in the same folder as test.html and link it using just the filename. CSS: The Language of Style Now that we have a separate stylesheet in our style.css file and a link to style.css in test.html, we’re ready to start doing something with it. Open your blank style.css file and type the fol- lowing text: p{ font-family: Helvetica, Arial, sans-serif; } Save your work, and refresh your HTML page, test.html. Did you see the difference? The font should have changed for all of the paragraphs on your page. So how did that hap- pen? When we added that <link> to the <head> of our HTML document, we essentially told the HTML page to behave according to the properties set forth in our style.css file. To add a property in CSS, you have to first use a selector. A selector is a unique identifier for the segments in the HTML that you want to change. In this example, we used the selector p, which corresponds to the HTML tag <p>. We then added the property font-family—with the values S S Helvetica, Arial, sans-serif—to that selector. By using the font-family property, we’re indicat- ing that we want to change the font. The values for this property define what to change the font to. In this case, it tells your browser to change the font to Helvetica, but if that font isn’t available, then use Figure 3-2: Sans-serif typefaces like Arial (left) Arial; and if Arial is also not available, grab the next are clean and modern-looking; serifed typefaces available sans-serif font. (Sans-serif means a font like Times New Roman (right) have little “feet.” without the little hooks and feet on the letters, like you see in Times New Roman—see Figure 3-2.) Just like HTML, CSS is not whitespace dependent. That means that the code would have worked the same way had we written it on one line like this: p {font-family: helvetica, arial, sans-serif; } Once again, the extra spacing is just a convention to help make the code easier to read. What we’ve done is created a property that must be followed by every paragraph; that is, the p in our CSS corresponds to the <p> element in any HTML document that links to this stylesheet. You’re probably starting to see why CSS is a very powerful tool. Suppose we had 10, 20, 200, or 2,000 pages in our website. If each links to this style.css document, we would need to edit only this single file to change all the fonts in all the paragraphs for the entire site. CSS: The Language of Style  95

CSS Syntax That CSS line looks different from HTML, doesn’t it? CSS is a different language from HTML, so when you write CSS you have to follow different properties. The two main components are the selector and the curly brackets ({}) that follow it. The selector tells the CSS which HTML element (such as <p> or <strong>) you’d like to create a property for. You put the properties between the curly brackets. Values for a property are defined with a colon (:) and separated by commas (where there’s more than one). Properties are separated from other properties by a semicolon (;). If you forget any of these pieces, your CSS won’t work! Let’s define another property to the paragraph selector to see how it works. After the font-family line, press return and set the font size to 10px. Your CSS code should look like this: Selector Value Value Value Property p{ Property font-family: Helvetica, Arial, sans-serif; font-size: 10px; } Value Save your style.css document and then reload your test.html page in your web browser. Remember that because we linked test.html to style.css, any changes we make to style.css will be automatically reflected in test.html. You should see that the paragraphs’ font size has decreased. When changing CSS dimensions like the size of the fonts, you have several ways of measuring. Two commonly used font sizing options are px and em. In the preceding example, we used px, which sizes the font according to a set number of pixels. Since the amount of pixels on a screen can vary depending on its resolution, a font set at 10 pixels might show up slightly larger on a small screen (where there are fewer pixels) but smaller on a huge display (where there are tons of pixels). If you set the font size with em, on the other hand, that font size is relative to the cur- rent default font size. Using em allows you to adjust the font size proportionally according to the browser it’s being viewed on. The default font size for a given browser is 1 em. For a mobile browser, the default font size is usually smaller so you can see more text. On a desk- top browser, the default will usually be bigger. If you set the font size to less than 1 em, the font will appear smaller than the default size; if you set it to more than 1 em, it will appear larger. (For example, a font set to 0.8 em will appear smaller than the default size, while 1.2 em will appear larger.) When you want to have a site that’s flexible and adaptable for many different browsers, using em is very practi- cal. For starters, though, try sticking with px so you can get the hang of sizing. Don’t get overwhelmed. You’ve already seen that with any technology, you have a ­couple of different ways of doing the same thing, but with varying results. Imagine painting a canvas. You can use a roller, a sponge, or any of several thousand brush sizes. It all comes down to what’s best for the task at hand. You don’t become a Rembrandt overnight, but with practice you’ll start to understand the advantages and disadvantages of using things like px and em. 96  Chapter 3  Kim Makes Things Look Great with CSS

Let’s take a look at our web page in the browser (see Figure 3-3). Figure 3-3: The paragraphs have the font properties we applied in the CSS. The headings do not. So far, we’ve changed only a single element in our HTML, the <p> tag. You may have noticed that the Hello World! part hasn’t changed. In our code, Hello World! is wrapped in the <h1> tag. That means that all of the CSS properties we applied under the p selector don’t apply to it. Let’s say we also want to change the font and set the font size for our <h1> tags. Open your CSS file and add the properties for the <h1> selector, just like we did for the paragraph tag, but set the font size to 1.3em. Also change the font size in the paragraph tag to .8em. Your CSS code should look like this: p{ font-family: Helvetica, Arial, sans-serif; font-size: .8em; } h1 { font-family: Helvetica, Arial, sans-serif; font-size: 1.3em; } CSS: The Language of Style  97

Save your document and reload test.html in your web browser. We changed the font, but perhaps you’re wondering: Wasn’t the <h1> already larger? Why did we add in the font-size if the default setting automatically makes <h1> bigger than <p>? Those are great questions. Anything we don’t intentionally take control of in the CSS is left to the browser defaults. While most browsers automatically make <h1> larger than <p>, how much bigger can vary from browser to browser. CSS is where you get to take control and tell the browser you want something to be exactly a certain size or proportion. By setting up properties in CSS, we’re elaborating on the basic structure provided by the HTML page so that the project gets built exactly to our specifications. Classes, IDs, and Inheritance We’ve taken our first steps to define the style of broad elements in the CSS. By now, you should understand that any tagged element in HTML can be selected out in the CSS for modification. What if you want to select out a more specific section, though? Let’s say, for example, that you have a quotation that you want to format differently than the rest of the page. Open your HTML document and add the following bolded code: <!DOCTYPE html> <html> <head> <title>My Web Page</title> <meta name=\"description\" content=\"A test page created while learning to code using the book Build Your Own Website.\"> <link href=\"style.css\" rel=\"stylesheet\"> </head> <body> <h1>Hello World!</h1> <p>This is a second paragraph. <strong>This is bold text.</strong><br> <em>This is italic.</em></p> <p><a href=\"http://natecooper.co\">Click here!</a></p> <img src=\"image.jpg\" alt=\"our first photo\"> <p>I have never let my schooling interfere with my education. - Mark Twain</p> </body> </html> It’s behaving as we might suspect (see Figure 3-4). We set up the properties for a paragraph to have a certain font and size, and all of our paragraphs are behaving according to those properties. But we want this quote to have its own properties. There’s nothing in the code that makes this paragraph special, so how do we target it in the stylesheet? We’ll have to do something to the HTML to give it a special name or qualification—an attribute. Open your test.html file in your code editor and add this to the paragraph tag: <p id=\"quote\">I have never let my schooling interfere with my education. - Mark Twain</p> 98  Chapter 3  Kim Makes Things Look Great with CSS

Figure 3-4: The new paragraph at the bottom of our page behaves by the existing properties from the stylesheet because it is still a paragraph. ID is a unique identifier you can add to (almost) any tag in HTML to call it out by name in the CSS. In this case, we named it quote for simplicity’s sake, but when you create an ID you can give it any name you like. Save and reload, and you should see that, so far, nothing is different. Even though we’ve given this paragraph a unique ID, it’s still a paragraph and it will inherit the proper- ties and attributes we’ve applied to the <p> element. But we want to do something special with just this one paragraph, so how do we identify it in the CSS? Any time you want to identify a specific ID in CSS, you use a hash mark (#). Instead of specifying p in the selector, we’ll use a #quote selector instead. Let’s add the following into our stylesheet so that we can make some changes to the quote’s formatting: #quote { text-align: center; color: gray; } After saving and reloading, you should notice that the font color is now gray and the text is centered on the page (see Figure 3-5). The font and size remain the same. This is CSS: The Language of Style  99

what’s meant by cascading (also sometimes called inheritance) in CSS: Anything that you don’t specifically change will cascade down from the previous property. So in this case, we have a paragraph #quote that takes on all of the existing properties of being a paragraph first and then takes on any additional properties we apply to it. Figure 3-5: Because the #quote paragraph is given a unique ID, you can give it different properties to make it centered and gray. Add font-family: Times, Courier, serif; on the next line after color: gray;. Your CSS file should look something like this: p{ font-family: Helvetica, Arial, sans-serif; font-size: .8em; } h1 { font-family: Helvetica, Arial, sans-serif; font-size: 1.3em; } 100  Chapter 3  Kim Makes Things Look Great with CSS

#quote { text-align: center; color: gray; font-family: Times, Courier, serif; } Save and reload. Now you should see that the quote in the browser is in a different font than the other paragraph, while the size remains the same. ID works great if you have only one per page, but what if you want more than one? Class is a better tool to use if you want to style several parts of your page in the same way. In this case, we’re looking to style a group of quotes. Let’s add another quote into the test.html code and see how classes work. <!DOCTYPE html> <html> <head> <title>My Web Page</title> <meta name=\"description\" content=\"A test page created while learning to code using the book Build Your Own Website.\"> <link href=\"style.css\" rel=\"stylesheet\"> </head> <body> <h1>Hello World!</h1> <p>This is a second paragraph. <strong>This is bold text.</strong><br> <em>This is italic.</em></p> <p><a href=\"http://natecooper.co\">Click here!</a></p> <img src=\"image.jpg\" alt=\"our first photo\"> <p class=\"quote\" id=\"twain\">I have never let my schooling interfere with my education. - Mark Twain</p> <p class=\"quote\" id=\"einstein\">Education is what remains after one has forgotten what one has learned in school. - Albert Einstein</p> </body> </html> Notice how we’ve changed both the original quote and the new quote we’ve added. In each case, we’ve given the paragraphs a class of quote, signifying that they are part of a group. A class, unlike an ID, can be used multiple times within a page. You can give an ele- ment both a class and an ID, and you can give multiple elements the same class, but you don’t want to give the same ID to different elements on the same page. IDs are meant for picking out a single element on a page to style it uniquely, while classes are good for picking out a group of elements on a page to style the same way. As you might imagine, classes and IDs are targeted separately via your CSS document. You can see the code here: p{ font-family: Helvetica, Arial, sans-serif; font-size: .8em; } CSS: The Language of Style  101

h1 { font-family: Helvetica, Arial, sans-serif; font-size: 1.3em; } .quote { text-align: center; color: gray; font-family: Times, Courier, serif; } #twain { color: blue; } #einstein { color: red; } Notice how in the CSS we use a dot (.) to signify class. The <p class=\"quote\"> in HTML is selected with .quote in the CSS. Knowing when you would use class and when it’s better to use ID can seem tricky at first, but you’ll get the hang of it with some practice. The main takeaway here is that both class and ID can be applied to any HTML elements that you need to separate from the general CSS properties for an element. Class can be applied as often as needed within a page or across pages, while ID can be used only once per page. Class defines styles that you might want to use again and again; in this case, quote is a class because we are going to have more than one quote on the page. Since ID is narrower and more specific, the style within it can trump styles set by class, as shown in Figure 3-6. Here we’re applying class and ID to the <p> tag, but you can apply them to any tag that you want to distinguish from the rest of the page. Colors In the previous example, we changed the color of our paragraphs using the words blue, red, and gray. This is one of several ways to set the color of elements in CSS. For many colors, you can use English words to change them in CSS (even weird ones like azure and salmon), but another way to assign colors is by using a hex value. What does that look like? For example, #FFFFFF is white and #000000 is black. You can also represent colors using red, green, and blue (RGB) values. That looks like rgb(0,0,0) for black, or rgb(255,255,255) for white. Hex values, RGB values, and color names are just different ways of expressing the same concept. Unlike px and em, though, you get the same results no matter what you use. 102  Chapter 3  Kim Makes Things Look Great with CSS

Figure 3-6: Class defines characteristics for both quote paragraphs. ID specifies the color for each uniquely. For example, any one of these will give you the exact same color for your #twain: #twain { color: rgb(0,0,255); } #twain { color: #0000FF; } #twain { color: blue; } For your reference, Table 3-1 lists common colors you might want to use in CSS. You can learn whichever color system makes the most sense to you. CSS: The Language of Style  103

Table 3-1: Common Colors Color Hex value RGB #000000 rgb(0,0,0) black #C0C0C0 rgb(192,192,192) gray #FFFFFF rgb(255,255,255) white #FFFF00 rgb(255,255,0) yellow #FF0000 rgb(255,0,0) red #00FF00 rgb(0,255,0) green #0000FF rgb(0,0,255) blue The <div> Tag and Alignment with CSS Every HTML element we’ve discussed so far has some basic default styling. The <p> tag, for example, separates one paragraph from another with a space. The <h1> tag automatically makes the text bold and larger. Next we’ll look at the <div> tag. This tag has no inherent properties, which makes it especially handy for custom CSS. Go back to your HTML docu- ment and add the following code: <!DOCTYPE html> <html> <head> <title>My Web Page</title> <meta name=\"description\" content=\"A test page created while learning to code using the book Build Your Own Website.\"> <link href=\"style.css\" rel=\"stylesheet\"> </head> <body> <h1>Hello World!</h1> <p>This is a second paragraph. <strong>This is bold text.</strong><br> <em>This is italic.</em></p> <p><a href=\"http://natecooper.co\">Click here!</a></p> <img src=\"image.jpg\" alt=\"our first photo\"> <p class=\"quote\" id=\"twain\">I have never let my schooling interfere with my education. - Mark Twain</p> <p class=\"quote\" id=\"einstein\">Education is what remains after one has forgotten what one has learned in school. - Albert Einstein</p> <div>This is The Guru's div.</div><div>This is Glinda's div.</div> </body> </html> 104  Chapter 3  Kim Makes Things Look Great with CSS

Save the document and refresh your browser. You should notice a few things. One is that the <div>s are not using the Helvetica font that your paragraphs use. That should make sense because when we applied that CSS property, we applied it only to the <p> tag. Another interesting thing to note is that the spacing between the two <div>s is different than the spacing between paragraphs; it’s more like what you get with a <br> than a <p>. <div> is short for division, and it’s a kind of code separator that has little or no inherent qualities until we add them with CSS. Let’s do that now. We’ll need to create a unique iden- tifier for each of our two <div>s in the HTML first so that we can style them differently in the CSS. We can do that with IDs. Go back to the line of HTML code and label each <div> like so: <div id=\"guru\">This is The Guru's div</div> <div id=\"glinda\">This is Glinda's div</div> Now that we have unique IDs on each <div>, we can select them out in the CSS. #guru { height: 100px; width: 100px; background-color: blue; float: left; } #glinda { height: 100px; width: 100px; background-color: green; float: left; } Save and reload your page. If all works well, you’ll see something that looks like Figure 3-7. We applied a couple of CSS properties there, so let’s look at each of them. First, we set the width and height of each <div>. <div>s have no inherent dimensions. If we hadn’t added text and set the width and height, our <div>s wouldn’t be visible on the page at all. By setting each <div> to 100px by 100px, we’re making a small box. We also set the color of the background with the background-color properties. The property color, which we used earlier, is for setting the color of fonts, while background-color sets the container background color. A container is what we might call an element that holds something between its start and end tags. In this case, the container is a <div>, but you could also set the background-color of a <p> or a <a href=\"\"></a>. The last property we apply is float: left. float is a positioning property that can help us with alignment; it adds a kind of gravity to the left or the right side of the browser window. When we add float: left to each <div>, they fall together as if gravity is pulling them to the left side of the window. CSS: The Language of Style  105

Figure 3-7: The <div> is basically invisible until you give it properties. In this case, we’ve changed the color and shape. Let’s look at our CSS code again: #guru { height: 100px; width: 100px; background-color: blue; float: left; } #glinda { height: 100px; width: 100px; background-color: green; float: left; } 106  Chapter 3  Kim Makes Things Look Great with CSS

There is a lot of overlap with the properties for our boxes. There must be a cleaner way we can add CSS. What about adding an attribute to the HTML? Open your HTML document and add a class=\"box\" to each <div>. <div class=\"box\" id=\"guru\">This is The Guru's div</div> <div class=\"box\" id=\"glinda\">This is Glinda's div</div> Now we can open our CSS file and attach a lot of our common properties to the class and leave the unique properties to the IDs, like so: .box { height: 100px; width: 100px; float: left; } #guru { background-color: blue; } #glinda { background-color: green; } In this case, we’ve taken all of our alignment and sizing properties and attached them to the class and left only the colors (the unique properties) attached to the IDs. This will leave us in good shape to add common properties that apply to both boxes. Let’s add a text alignment property to .box in our CSS file. .box { height: 100px; width: 100px; float: left; text-align: center; } Once you save style.css and reload your HTML document, you should see that the text within the boxes is centered, but the boxes themselves are still floating to the left. The float property is applied to the container in this case, while the text-align property is applied to the text within the container. You’ll notice this kind of thing happening a lot with CSS; the inner and outer parts of a container are affected differently depending on which properties you use. CSS: The Language of Style  107

Margins and Padding Margins and padding provide a good example of the difference between a property that affects the inner part of a container and one that affects the outer part. Open your CSS file and add the following to the .box: .box { height: 100px; width: 100px; float: left; text-align: center; margin: 5px; } When you save and reload your page, you should see something like Figure 3-8. Figure 3-8: The margin property creates space between objects. 108  Chapter 3  Kim Makes Things Look Great with CSS

Space was created all around the boxes, which pushes them apart. Now go back to your CSS file and change the margin to padding, like this: .box { height: 100px; width: 100px; float: left; text-align: center; padding: 10px; } Now you have something like Figure 3-9. Figure 3-9: The padding property creates space within the <div>s. CSS: The Language of Style  109

The boxes are squished together again, but there is some space between the text and the outer edges of the boxes. margin is space between elements, and padding is spacing within an element, as illustrated in Figure 3-10. margin padding Figure 3-10: Notice the difference between margin, which separates two containers, and padding, which separates the edge of the con- tainer from its contents. It’s a subtle but important difference. Go back to your CSS file, and restore margin and adjust your padding to 5px. Your code should look like this: .box { height: 100px; width: 100px; float: left; text-align: center; padding: 5px; margin: 5px; } This should leave a little room between your text and the edge of an element and also some space between the boxes. Deciding when to use padding and when to use margin can be tricky at first. The important thing is to practice, and don’t worry too much initially about things looking a bit wonky. That’s part of learning. Using <div>s for Structure If you’d like to see how CSS can be used for structuring a document, here is an example you can try. Create an HTML document, save it as columns.html, and type the following code into it: <!DOCTYPE html> <html> <head> <title>Columns Example</title> <link rel=\"stylesheet\" href=\"columns.css\"> </head> 110  Chapter 3  Kim Makes Things Look Great with CSS

<body> <div class=\"main\"> <div class=\"header\">Header</div> <div class=\"column\" id=\"leftcolumn\">left column</div> <div class=\"column\" id=\"rightcolumn\">right column</div> </div> </body> </html> Next, create and save a CSS file called columns.css. Type the following code in it: .main { margin: 0 auto; width: 80%; } .main:after { display: block; clear: both; content: \"\"; } .column { width: 50%; min-height: 500px; margin-bottom: 20px; float: left; display: block; } #leftcolumn { background-color: blue } #rightcolumn { background-color: red; } .header { width: 100%; height: 100px; background-color: yellow; clear: both; } CSS: The Language of Style  111

You should see something like Figure 3-11. Figure 3-11: In this example, we’ve created two columns using <div>s and placed a third <div> on top as a kind of header. As you can see from this example, CSS isn’t just for fonts. You can use it to scaffold complex layouts that scale and change according to the browser. In this case, we’ve used <div>s to structure our page. First, we’ve got one large <div> called main that wraps all of our content together. We’ve given it some properties: margin: 0 auto; width: 80%;. These center the <div> and set its width to a fraction of the overall page. Inside of the main <div> we have a header <div> and two <div>s with a class column. We want the header to be the full width of the <div>, so we add width: 100%;. We want it only on the top, so we set the height dimensions in pixels: height: 100px;. Below the header, we want the two columns. Since the columns will be equal in width and height, we’ll use class to define the properties that are shared among them: width: 50%; min-height: 500px;. Each column takes up half of the main <div>, so its width is 50%. We want the height to be a little shorter than the <body> so we use margin-bottom: 20px; to add some space at the bottom. 112  Chapter 3  Kim Makes Things Look Great with CSS

NOTE In CSS, nesting HTML elements inside of each other—as we’ve nested our header and column elements inside the main <div>—is called the box model. Now the header, the left column, and the right column are set up correctly with the right dimensions; however, until you add the float, they are going to stack vertically on the page. Floats are often used to wrap elements around each other. For example, if you put a float: left; property on an image, the image will hug the left side of its container ele- ment and text will wrap to the right. Here, the float: left; property tells the column <div>s to cling to the left side of the page. Be careful, though—floats can be tricky. Once you add a float to one element, the browser expects to wrap it around all the others. In our case, the header might not work right without accounting for the floats. We use the clear: both; property on the header to help with this. clear tells an element to ignore a float happening on its left, right, or both left and right. We also have to add a clear float to the main <div> using what’s called a pseudo-element: main: after;. However, this will work only if we add the display and content properties as shown. A pseudo-element creates a dynamic within HTML, most commonly before or after a paragraph. This is a workaround that should give you a nice structured document that you can actually use and play around with. As you start to master some of the more advanced properties in CSS, you can make columns and sidebars, and even hide and show elements on a page. Ready for even more CSS? Try out the properties in Table 3-2. Table 3-2: Common CSS Properties Property Value(s) Description background-color hexvalue, rgb, color name Sets the background color of a container background-image url(\"http://address-to-image\") (like a <p> or <div>). border-color hexvalue, rgb, color name Sets the background of a container to be border-style dotted, solid, double dashed an image located at a specific address. border-width thin, thick, medium Sets the color of a border on an element. border (shorthand) Sets the look of the border line. clear left, right, none, both color hexvalue, rgb, color name Places a border around an element and float left, right, none sets the thickness. font-family font names separated by commas Rather than listing border properties font-size px, pt, in, cm, em individually, you can group the values under the single border property (e.g., border: thin solid black;). Tells an element to ignore a float. Sets the color of text within a container. Makes elements cling toward one direction or another. Sets the fonts for a container element. Sets the size of a font in a container in ­pixels, points, inches, centimeters, or ems. (continued) CSS: The Language of Style  113

Table 3-2: Common CSS Properties (continued) Property Value(s) Description font-weight light, lighter, normal, bold, bolder height px, in, cm, % Changes the thickness of a font. margin px, in, cm, % Sets the height of an element. margin-bottom px, in, cm, % Sets the margin between two elements. margin-left px, in, cm, % Sets the bottom margin. margin-right px, in, cm, % Sets the left margin. margin-top px, in, cm, % Sets the right margin. overflow hidden, scroll, visible Sets the top margin. Sets what happens when the contents of padding px, in, cm, % a container are larger than the size of the container. padding-bottom px, in, cm, % Sets the spacing between a container element and its contents. padding-left px, in, cm, % Sets the bottom spacing between a container element and its contents. padding-right px, in, cm, % Sets the left spacing between a container element and its contents. padding-top px, in, cm, % Sets the right spacing between a container element and its contents. text-align left, right, center, justify Sets the top spacing between a container text-decoration underline, line-through, none element and its contents. width px, in, cm, % Aligns the text within a container element. Styles the text. Sets the width of an element. 114  Chapter 3  Kim Makes Things Look Great with CSS

4 Kim Explores WordPress City



Welcome to WordPress City Looks like they were as scared as we were, Tofu. Bark! Welcome to WordPress City  117

Who goes there? 118  Chapter 4  Kim Explores WordPress City

Oh! Hi! I’m Kim We’ve been building our and this is Tofu... website, and we have all these great pages we’ve made in HTML and CSS. Woof! We heard how WordPress Poppycock! Those That’s HTML...? can manage our content for aren’t pages. What’s us. We’re building a portfolio all this gibberish and we’ve already built written down here? out our pages in HTML and CSS. Whatever you say... If you want to create web pages, you’ve definitely come to the right place. WordPress City is a modern, managed city that makes it easy to create web pages, blogs, and even portfolios exactly like you want. While you’re here, why don’t you stay at the village inn? My brother’s the innkeeper there. He can put you up for the night. Welcome to WordPress City  119

Hello? Yes? 120  Chapter 4  Kim Explores WordPress City

Oh, hi. We I beg your pardon, Yes, well...anyway, we just met... young lady, but I’ve need a room. never seen you before in my life. Woof? I see. And how long It might be a while. will you be staying? We’re building a portfolio. It’s likely to take us weeks, maybe months... Weeks and months? Oh, no. Listen, Hours?! You’ll find you’re welcome to stay as long as you that things like, but tomorrow I’ll introduce you to move faster in the librarian here in town. She’ll get your the city. site up in a matter of hours. Woof! Welcome to WordPress City  121

Kim Learns Her Way Around WordPress Well, I guess this is it, Tofu. 122  Chapter 4  Kim Explores WordPress City

Hello, ma’am. I’m wondering if you might be able to help me. I’m new to the city and I’m building a portfolio. Oh, hello there. My name is I’m not sure. Isn’t a blog Wendy. Will you be building when you post what you’re a blog or a website? eating online? Well, I guess some people use blogs I’m Kim. Come with that way, but they’re so much more. me, Kim! Let me show you, Miss...? Bark! Kim Learns Her Way Around WordPress  123

This building is the central database of WordPress City. Whoa. Where are we? 124  Chapter 4  Kim Explores WordPress City

Some of these pages are static, meaning they don’t change much at all. Think of your résumé. You keep it up-to-date, but you don’t change it every day. Other pages—short articles, opinions, even just photos— are more up-to-the-minute. Although you don’t update your résumé every day, you’ll probably want an area of your website to show off current projects and engage your audience. Blog is short for web log, and you can think of it as a kind of journal. An artist like yourself will want to keep your audience up- to-date, and that means posting frequent updates. People like to know what you’re up to, and a blog is the best way to let them know! Kim Learns Her Way Around WordPress  125

An article written for a blog is called a post. This one has Yep. Thousands of today’s date bloggers write millions of blog posts every day. on it! It’s up-to-the-minute content, created by people just like you. But they look You’re right. Blog posts are I see...so a blog is just exactly like normal still web pages. They’re a special kind of website that has information that web pages! just usually on a particular changes more frequently. subject and stamped with the date to provide a current perspective. 126  Chapter 4  Kim Explores WordPress City

You’re getting it. While the pages are Like those important to communicate information over there? about you, your blog is where people get to know you. Most websites have a combination of blog-like pages and other content that’s meant to last. Yep. Basically anything I see. But I’m You can use pages you add to WordPress still not sure why for the portfolio is a page (long-lasting, I need a blog if sections, but you want people static content) or a I’m building a to keep coming post (which is a short portfolio. back to your site, article that appears in right? your blog). Well, sure. A blog is a great way to I’ve heard that That’s true. Blogs let your audience and up-to-date are a great way potential clients know to keep producing what you’re up to—and pages also help with SEO. more work that gets keep them coming back. indexed by search engines. Kim Learns Her Way Around WordPress  127

Kim Builds Her First Page in WordPress You won’t be needing that pen and paper, Oh, I see. Well, better sweetie. get to work. I brought my HTML pages with me. You can do everything through WordPress’s visual editor. First, we’ll need to log in. Log in? Is that Hmm, sort of. like FTP? WordPress runs on the server, so 128  Chapter 4  Kim Explores WordPress City it manages the files along with building the pages. When we go to the login screen, we’re going to get to the backend of WordPress, called the Dashboard.

Think of the Dashboard as the control panel for your whole site. It’s not just for file management like FTP— it’s also the place where we actually create content like pages. So when we’re in Nope! You can do The “visual Yep. It’s a great and WordPress, we don’t everything within editor”? simple way of creating need our code editor the Dashboard! We’ll use the visual web pages or blog anymore? posts in WordPress. editor here. Look at all those buttons. This looks like a word processor. Kim Builds Her First Page in WordPress  129

Yep. Let’s try Can I just copy and formatting some text. paste from my existing HTML pages? Let’s say you want Sure can. We’ll do that to make some words later. For now, write bold. You can select the text, and then click this some new text and then format it like you would B button. in a word-processing tool. That’s what makes the visual editor cool! Looks like there’s a button to change the colors of the text, too. Welcome to my portfolio website! Hi. My name is Kim. Here you’ll find updates on my current projects. If you’d like to read more about my background, check it out here. 130  Chapter 4  Kim Explores WordPress City

Cool! What if I want to make a link? Welcome to my portfolio website! Yep. And there are eveHni.mMorye nsatymlees.is Kim. Select the text “WelcomHe etroemyyoup’olrltffionldio updates on my current projects. If webdsoitwen!”maennductliockmtahkeeyoPiotuarutaa’hdgherelraaiepkd.heindtgor.orpe-ad more about my background, check it Here you go. I just click this button? Yep. Well, that’s easy! Welcome to my portfolio website! Hi. My name is Kim. Here you’ll find updates on my current projects. If you’d like to read more about my background, check it out here. Kim Builds Her First Page in WordPress  131

So when I make Oh! You Visual Text pages with the visual know HTML? No one’s asked editor, my pages aren’t made in about that HTML at all? in ages. See the Text tab back there? If you click Yep. Many people who build I see. That this, you’ll explains why the see the code. websites in WordPress never innkeeper didn’t see the code underneath it all, so they don’t even realize know what I <h3>Welcome to my portfolio website!</h3> it’s there. meant by HTML. Hi. My name is Kim. Here you'll find updates on my <strong>current projects</strong>. If you'd like to read more about my background, <a href=\"http://www\">check it out here</a>. So the visual editor is just a shortcut? Yes. Since you have a lot of But if I use Yes! That’s why HTML pages already written, WordPress to make WordPress is so useful just copy and paste them into the code view here, so you won’t new pages, I can for making websites. have to redo the formatting. write and format my pages without having to do the code? 132  Chapter 4  Kim Explores WordPress City

Kim Organizes Her Site Oh, don’t worry! It’s a little confusing at first. Remember, your portfolio pages So how do I get started, then? will be “pages” within WordPress and not Do I want to write a page or a post? I guess I’m still confused about how “posts,” which are part of the blog. WordPress organizes them. These are all pages, because they won’t change over time. We’ll organize them to branch off, just like you’ve done on the paper, right in WordPress. Pages are stored Okay... So I need to hierarchically in start making folders to WordPress. organize the branches of my site. I’ll start digging. Kim Organizes Her Site  133

Ha! Don’t worry. So no FTP? We do all this organization through the Dashboard. No FTP. No folders! See this little area to the bottom right of the editor? It says Yep. When a page lives And we just Yep. Pretty “Parent.” under another in the select that from easy, right? hierarchy, it is considered a the drop-down child of a parent page. menu? 134  Chapter 4  Kim Explores WordPress City

Yeah. It’s basically And that So if posts and Pages are laid out doing everything I’ve saves you a pages both use hierarchically, just done with HTML and lot of time. the visual editor, like your map. But FTP, but in a simple what’s the real posts are part of a blog, so they’re a interface. difference? bit more linear. Ah, so it’s just a big list, Basically, you’ll organized by date. have one page called your posts page. This is your blog. The blog lists all of your posts. Yep. The first post has been set up for you; it’s called “Hello World!” Let’s create another post. Kim Organizes Her Site  135

There’s no Parent Right. That’s because posts section here. aren’t stored hierarchically. They are usually organized by subject. See where it says “Categories”? Oh, I see. Yep. You can Art Projects There’s one also have Comics category called more than My Life “Uncategorized.” one category attached to a post. Uncategorized If you want to create Book Reviews another one called Art Projects “Kim’s Daily Drawings,” just click the Add New Category button. I’m starting to get it. So I could also create a category called “Upcoming Projects” for posts about what I’m working on. 136  Chapter 4  Kim Explores WordPress City

What are these “tags”? Tags are a way to further refine and group your posts Got it. So pages are by subject. Categories are broader and tags are more organized just like a specific. When you publish your blog post, the tags and traditional website, and categories become links that a user can click to see all posts are organized by subject and date to related posts on that topic. remain more topical? And these categories and Precisely! By using words that tags are kind of like my identify your posts, you’ll ensure keywords that help me find that your blog readers can my older blog posts? find your content. Kim Organizes Her Site  137