PHP, MySQL, JavaScript & HTML5 All-in-One For Dummies (2013)

---

It’s quite common to set a font size for the entire page and then change font sizes for individual elements in the page. For example, setting the font size for the body element — in other words, the entire page — looks like this:

body {

font-size: 90%;

}

With that CSS setting, the fonts across all elements on the page would be set to 90% of their default value. You could then change individual areas of the page to have a different font size. Using em’s for the other fonts allows you to change the font sizes relative to that initial setting of 90%. This allows for greater control over the page’s font sizes.

Like other CSS settings, visitors can override your CSS with their own settings. They may change the font sizes according to their needs.

Listing 2-3 shows a CSS file that depicts this functionality.

Listing 2-3: CSS to Change the Font Size

body {

font-size: 90%;

}

span {

font-size: 1.7em;

}

When combined with the HTML from the previous exercise, you get a page like that in Figure 2-7. Note the increased font size for the word nicest, thanks to the increased size set with an em.

Figure 2-7: Changing font sizes with CSS.

When using em’s for font sizes, an em value of 1.0 corresponds to 100%. Therefore, 0.9em would be about 90%, while 1.7em (as in the example) is essentially 170%.

Fonts set with pixels or points use their abbreviations, as in these examples:

font-size: 12px;

font-size: 12pt;

Setting the font color

Just as font sizes can be set, so too can the colors used for fonts. Care should be taken when choosing font colors so as to make the text readable. For example, using white text on a white background makes it impossible for the reader to see the text!

Just as there are multiple options for how to change the font size, there are also multiple ways to change the font color. You can use a friendly name for common colors, like red, blue, green, and so on, or you can use a hexadecimal code, or hex code for short.

Hex codes are three- to six-character codes that correspond to the Red, Green, and Blue (RGB) color mix appropriate to obtain the desired color.

Table 2-1 shows some common hex codes and their corresponding color.

Table 2-1 Hex codes for colors

Code	Color
#FF0000	Red
#00FF00	Green
#0000FF	Blue
#666666	Dark Gray
#000000	Black
#FFFFFF	White
#FFFF00	Yellow
#FFA500	Orange

Hex codes are the more accurate and preferred way to set colors in HTML but they're hard to remember. A tool like Visibone's Color Lab at www.visibone.com/colorlab is essential to obtaining the hex code corresponding to the color that you want to use.

Font color is set using the color CSS property, as in this example (which is the code for red):

color: #FF0000;

Listing 2-4 shows CSS to change colors of a <span> element to blue using a hex code:

Listing 2-4: Coloring a Font Using CSS

span {

color: #0000FF;

}

When viewed in a browser with the HTML created earlier in this chapter, the output looks like Figure 2-8. Note the blue coloring (which may be a bit difficult to read in this black-and-white book) for the word “nicest” on the page.

Figure 2-8: Changing the font color to blue.

Adding Borders

Borders can help provide visual separation between elements on a page. You can add borders around just about anything in HTML and there are a few border styles to choose from. Borders are added with the border CSS property.

When creating a border with CSS, you set three things:

Border thickness

Border style

Border color

These three items are set in a list, separated by a space, as in this example:

border: 1px solid black;

In this example, a border would be created and would be 1 pixel thick. The border would be solid and would be black in color.

Some common border styles are shown in Table 2-2.

Table 2-2 Border Styles in CSS

Style	Description
Solid	A solid line
Dotted	A dotted line
Dashed	A line with a dash effect
Double	Two solid lines

It’s time for an exercise to create a border around some elements. Follow these steps.

1. Open your text editor.

2. Verify the HTML file from the preceding exercise.

The HTML from the preceding exercise is the starting point for this exercise. If yours doesn't look like this, change it to look like this HTML. For those of you who had this file exactly as in the preceding exercise, the only thing you need to do is add a class called addBorder in the first<div> element.

<!doctype html>

<html>

<head>

<title>A CSS Exercise</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="boldText addBorder">This is my web page.</div>

<div>

This is the <span>nicest</span> page I've made yet.

</div>

<div class="boldText">Here is some text on my page.</div>

</body>

</html>

3. Save the HTML file.

Save it as css-border.html and place it in your document root.

4. Open your CSS file.

You should have a CSS file from the preceding exercise. The CSS file from that exercise should contain a class called boldText and a CSS rule changing all <span> elements to italic. Within your CSS file, add and change your CSS so that it looks like the following:

.boldText {

font-weight: bold;

}

span {

font-style: italic;

}

.addBorder {

border: 3px double black;

}

5. Save the CSS file.

Save the file as style.css in your document root.

6. View the page in a browser.

Open your web browser and point to http://localhost/css-border.html to view the page. You should see a page like Figure 2-9.

Figure 2-9: Adding a border to a div element.

You may have noticed in this exercise that you now have two classes on the first <div> in the page. That's a great feature of classes because you can use more than one on an element to combine them.

You can experiment with the CSS from this exercise to add different styles of borders to different elements in the page.

You may not like how close the text is to the border in Figure 2-9. We sure don't. You can change this with CSS. The CSS padding property changes how close the text will come to the inside edge of the border. For example, you could change the CSS for the addBorder class to look like this:

.addBorder {

border: 3px double black;

padding: 5px;

}

When you do so, the resulting page will look like that in Figure 2-10.

Figure 2-10: Adding padding within the addBorder class.

Padding can be added to move the text farther away from its borders. Padding can be applied to any element, regardless of whether it has borders, in order to move that element’s contents.

When you add padding, the contents of the element move away from all the edges. However, you can also add padding so that the contents move away from the top, bottom, right, or left, or any combination therein. This is accomplished with the padding-top, padding-bottom, padding-right, and padding-left properties, respectively.

There’s a shortcut method for setting padding that sees all the padding defined on one line. That shortcut isn’t used here, but you’ll see it in other people’s CSS.

Where padding moves elements from the inside, there’s also a property to move or shift elements around from the outside. This element is called margin, and we discuss it later in the chapter when we talk about creating page layouts.

Changing List Styles

Recall the example from Chapter 1 of this minibook that created a bulleted list. That section indicated that you can change or even remove the bullets from the list using CSS. Well, it's true. You can. The bullet style for a list is determined by the list-style-type CSS property.

There are numerous values for the list-style-type property. Table 2-3 shows some common ones.

Table 2-3 Common List Styles

Style	Description
circle	Provides a circle type bullet.
decimal	The default style for <ol> lists, a simple number.
disc	The default style for <ul> lists, a filled in circle style.
none	Removes styling completely for the list.
square	A square bullet.
upper-roman	An uppercase Roman numeral, as in an outline.

Changing bullet styles

The best way to see these styles in action is by trying them out. This exercise uses Listing 1-7 from the preceding chapter, and we show you all that code here in Step 3.

1. Open your text editor.

2. Change or create ul.html.

If you have a file called ul.html from the previous chapter, open it now. If you don't, you can create one now by creating a new empty text document.

Inside the file, use the following HTML. If you're using ul.html, then you merely need to add the <link> element to incorporate a CSS file.

<!doctype html>

<html>

<head>

<title>An unordered list</title>

<link rel="stylesheet" type="text/css" href="ul.css">

</head>

<body>

<ul>

<li>Pine</li>

<li>Oak</li>

<li>Elm</li>

</ul>

</body>

</html>

3. Save the file.

Save the file as ul.html in your document root.

4. Create a new file.

Create a new empty text document using your text editor.

5. Place the following CSS in the new document:

ul {

list-style-type: square;

}

6. Save the CSS file.

Save the file as ul.css in your document root.

7. Open your web browser and view the page.

In your web browser, type http://localhost/ul.html into the address bar and press Enter. You should see a page like the one in Figure 2-11.

Figure 2-11: Changing the list style.

You can experiment with the list-style-type property to add or change bullet style.

Removing bullets

A common look for lists on web pages uses no bullets at all. This effect is created by setting the value of the list-style-type to none, as in this example, which can be used in the ul.css file you just created.

ul {

list-style-type: none;

}

When applied to the page you created in the preceding exercise, the result looks like Figure 2-12.

You apply the list-style-type property to the <ul> or <ol> and not to the individual list items (the <li> element).

Figure 2-12: Removing the bullets from an HTML list.

Adding a Background

The pages you’ve created so far have a white background, or more exactly, they have the default background chosen by the browser. In old versions of web browsers, that background color was gray. You can change the color of the background using CSS, or use a background image.

Background colors and background images can be applied to the entire page or to individual elements. Changing background colors on individual elements helps to add highlight and color to certain areas of the page.

Changing the background color

The background color of an HTML element is changed with the background-color CSS property. The background color uses the same syntax (hex code) as font colors; refer to the discussion of font colors earlier in this chapter to see hex codes for common colors.

Here’s an example that changes the background color of the entire page:

body {

background-color: #FFFF00;

}

Figure 2-13 shows the resulting page. Note that the yellow color won’t come through very well in the book, but it’s there!

Figure 2-13: Adding a yellow background color to a page.

As previously stated, individual elements can also be changed and you can use all the different CSS selectors to focus that color change to a class, to an individual element (using an id), or to all elements by using the element name. For example, changing all the <div> elements to yellow looks like this:

div {

background-color: #FFFF00;

}

You can also use CSS to target elements by their hierarchy; in other words, you can target the elements when they appear as children of other elements. This calls for an example. Many of the examples in this book use HTML similar to that shown in Listing 2-5, so we use Listing 2-5 to show you how to target certain HTML elements.

Listing 2-5: HTML Used in Some Examples

<!doctype html>

<html>

<head>

<title>A CSS Exercise</title>

<link rel="stylesheet" type="text/css" href="style8.css">

</head>

<body>

<div class="boldText">This is my web page.</div>

<div>

This is the <span>nicest</span> page I've made yet.

</div>

<div class="boldText">Here is some text on my page.</div>

</body>

</html>

Focus on the <span> element inside the second <div> in this HTML. You could say that the <span> element is a child of the <div>. Using CSS, you can target this span by its position as a child of the <div>. This is helpful if you want to apply certain styling to all elements of a certain type but you don't (or can't) add a class to those elements. For example, if you wanted to make all <span> elements that appear within a <div> to have a red background, you could do so with this CSS:

div span {

background-color: #FF0000;

}

Applying this CSS to the CSS previously seen, including that for Figure 2-13, you get a result like Figure 2-14, which (trust us) shows the word nicest highlighted in red.

Figure 2-14: Targeting an element in order to apply a CSS rule.

This CSS targeting can be applied in any way that you’d like, whether that’s targeting a certain ID, a certain class, or certain elements, like the example does. You can create powerful (and sometimes confusing) combinations of CSS hierarchies in order to apply CSS rules.

You can use this CSS targeting to apply any CSS rule, not just background colors.

Adding a background image

Background images are a good way to create a nice looking HTML page. Using a background image, you can create a gradient effect, where one part of the page is a solid color and the color fades out or gets lighter as it stretches to the other side.

Background images appear behind other elements. This means that you can overlay all your HTML, including other images, on top of a background image.

You can find many free images through the Creative Commons. See http://search.creativecommons.org for more information. Be sure to choose an image that still allows for the text to be readable on the page; black text on a dark picture is not a good match.

Background images are added with the background-image CSS property, as described here and in the following sections.

background-image:url("myImage.jpg");

Adding a single background image

One of the features of background images is that you can tile or repeat them within a page. This means that no matter how large the visitor’s screen, the background image will always appear. Conversely, you can also choose to not repeat the background image. This section shows how to add a single, non-repeating image.

In order to complete this exercise, you need an image. The image will preferably be at least 800 pixels by 600 pixels. You can find out the image resolution by right-clicking the image and selecting Properties in Windows or choosing Get Info from the Finder window on a Mac.

1. Open your text editor.

Create a new empty text document in your text editor.

2. In the text editor, enter the following HTML:

<!doctype html>

<html>

<head>

<title>Background Image</title>

<link rel="stylesheet" type="text/css"

href="image-style.css">

</head>

<body>

</body>

</html>

3. Save the file.

Save the file as backimage.html in your document root.

4. Create a new text document.

Create a new empty text document with your text editor.

5. Place the following CSS in the new document.

Be sure to use the name of your image. In this example, we're using an image called large-snow.jpg. The image should be saved within your document root.

body {

background-image:url("large-snow.jpg");

background-repeat: no-repeat;

}

6. Save the CSS file.

Save the file as image-style.css and make sure it's saved within your document root.

7. Open your web browser and view the page.

Open your web browser and navigate to the page at http://localhost/backimage.html. You'll see the page with a background image. You can see a screenshot of our page, with the large-snow.jpg image, in Figure 2-15.

Figure 2-15: A single background image.

Depending on the size of your image and your screen, you may notice that the image ends, as it does along the right side of Figure 2-15. Additionally, you may notice that the image isn’t centered. Keep reading for a solution.

Improving the single background image page

A common approach used to create a better looking page is to add a background color that matches the edges of the image. In the case of our image, the top and bottom are black. Therefore, we could add a rule to the CSS to make the default background color black. This won’t have any effect where the image is located — the image takes precedence — but it will matter along the bottom where the image ends.

The CSS for this look is as follows:

body {

background-image:url("large-snow.jpg");

background-repeat: no-repeat;

background-color: #000000;

}

With that rule in place, the image will still end but the appearance won’t be quite as shocking or noticeable because it matches the color of the edge of the image, as shown in Figure 2-16.

Figure 2-16: Adding a background color and a background image.

While the background color trick solves the problem with the edge of the image, it doesn’t solve the centering issue. The current background image is applied to the body — in other words, the entire page. In order to center the background image, another CSS property needs to be added, as shown in this CSS:

body {

background-image:url("large-snow.jpg");

background-repeat: no-repeat;

background-color: #000000;

background-position: center top;

}

This CSS adds the background-position rule and places it at the center at the top of the page. Other values include left, right, and bottom, and you can combine them so that the background image would appear at the bottom right, for example.

The CSS shown here places the image at the center of the page and at the top. This results in the page shown in Figure 2-17.

Figure 2-17: A centered background image on the top, with a background color.

With that image in place, you can then add any HTML to the page that you see fit. Note with an image like this (a dark top and light middle) you need to adjust the font colors so that the text is visible on the page.

Adding a repeating image

You can add an image that repeats. This is a common scenario for web pages because then the image doesn’t end along the sides, no matter how large your resolution is. This also alleviates the need for a background position because the background image applies to the entire element.

When applied to the entire page, as in the examples shown, you can also forego the background-repeat rule and the background color because the image continues throughout the entire page.

An ideal repeating image is one that doesn’t have noticeable borders because those borders will show up when the image is tiled or repeated on the page.

Figure 2-18 shows a small image (15 pixels x 15 pixels) used as a repeating image with the following CSS:

body {

background-image:url("back.jpg");

}

Figure 2-18: A repeating background image.

As in the example for a single image background, you can now add HTML atop the background, again choosing a font color that offsets the image so that visitors can easily read the text.

Creating Page Layouts

You’ve now learned a good amount of CSS to change the behavior and appearance of individual items, add background colors, style lists, and so on. All of this leads to creating pages by using CSS. CSS is used to create more complex appearances for web pages than you’ve seen so far. For example, you can create column effects, where there’s a menu on the left or right side and content in the other column, and we tell you how to do that here.

When working with alignment and column layouts, it’s sometimes helpful to add a border to the element to see where it begins and ends so that you can see how the layout looks.

Creating a single-column layout

Everything you’ve seen so far has been a single-column layout. There’s only one column, aligned on the left of the page. You can, however, control that alignment with CSS. Doing so means creating more complex HTML than you’ve seen so far but nothing in the HTML will be new; there’ll just be more HTML than before.

1. Open a text editor.

Open your text editor and create a new empty document.

2. Within the empty document, enter the following HTML:

<!doctype html>

<html>

<head>

<title>Single Column</title>

<link rel="stylesheet" type="text/css" href="single.css">

</head>

<body>

<div id="container">

<div id="content">

<h2>Here's some content</h2>

<p>This is where a story would go</p>

<h2>Here's more content</h2>

<p>This is another story</p>

</div> <!-- end content -->

</div> <!-- end container -->

</body>

</html>

3. Save the file.

Save the file as single.html in your document root.

4. Open your browser and view the page.

View the page by going to http://localhost/single.html in your browser. You’ll see a page similar to that in Figure 2-19.

Figure 2-19: A basic page before adding CSS.

5. Create a new text document.

Create a new empty text document in your text editor.

6. In the document, place the following CSS:

body {

font-family: arial,helvetica,sans-serif;

}

#container {

margin: 0 auto;

width: 600px;

background: #FFFFFF;

}

#content {

clear: left;

padding: 20px;

}

7. Save the CSS file.

Save the file as single.css in your document root.

8. Open your web browser.

Navigate to http://localhost/single.html in your browser. If your browser is still open, reload the page with Ctrl+R on Windows or Command+R on Mac. You’ll see a page like that in Figure 2-20. See the paragraphs that follow for more information on what specific modifications you made in Step 6.

Figure 2-20: A single-column layout.

Later in this chapter, you see how to add a header and footer onto this layout in order to improve its look and functionality.

The HTML for this layout uses a <div> element as a container. The container helps to create the layout and doesn't hold any text content of its own. The CSS for this exercise uses three CSS properties that might be new to you: width, margin, and clear. Here's how they work:

width: Sets the horizontal width of an element. In this case, the container is set to 600px (pixels) wide. No matter how small the browser window is, your HTML will never get smaller than 600px.

margin: This is the complement to the padding property shown earlier in this chapter, in the Adding Borders section. The margin property defines the spacing on the outside of the element. In the case shown here (margin: 0 auto;), the shortcut method is used. See the sidebar for more information. The value "auto" means that the browser will choose the value.

clear: Makes it so that no elements can appear on the side of the element to which the rule applies. In the example, clear left was used on the <div> with the id of #content. This means that nothing could appear on the left side of that element. Other values for clear include "both," "none," "right," and "inherit."

You can experiment with the margins of your browser window to see how the layout created in the exercise reacts or moves along with the browser.

The layout created in this section is called a single-column fixed-width layout. Another option is a single-column liquid layout. A liquid layout can work better in certain devices. The fixed-width layout shown can sometimes result in a horizontal scroll bar at the bottom of the page.

To change the layout to a liquid layout, you only need to change a small amount of CSS in the #container, as shown here:

body {

font-family: arial,helvetica,sans-serif;

}

#container {

margin: 0 30px;

background: #FFFFFF;

}

#content {

clear: left;

padding: 20px;

}

Note the only changes are to remove the width property within the #container and also change the margin from "0 auto" to "0 30px." With that, the layout becomes a liquid layout and works better, especially in mobile devices.