HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 12: Styling text

In this chapter we'll go through some of the properties that you can use to style the text on your web pages. For this exercise we'll use the paragraph directly under the h1 element that we just added style to. Add this code inside of your style tags right after the } closing curly bracket for the h1 rule:

<style>

h1,h2{

background-color: blue;

color: white;

}

p {

color: red;

background-color: black;

font-family: tahoma;

font-size: 20px;

text-align: center;

}

</style>

¨p { The selector we want to style is p and we open the curly brace.

¨color: red; Then we choose the font color property. Remember it is color not font-color. We add a colon and enter the value red to change the font color to red. Finish the statement with a semicolon so that the browser will move to the next property.

¨background-color: black; We give our paragraph a black background.

¨font-family: tahoma; Here we chose the property font-family and the value tahoma. You could put any of your favorite fonts in here like arial, georgia, times new roman. Note that some browsers might not find the font that you enter here if it's an uncommon one so it will go back to the default font. There are some things that we could do about this and you'll see that later.

¨font-size: 20px; Here we are using the font property again and this time we want to adjust the size. Pretty easy to understand. And we want our text to be 20px. Now there are a few different ways to adjust the size. You could use %, em, px. We'll go over all of them. But pixels is a very common and that's what we used here. Later you'll see how we can combine different values so that you can adjust your entire website or specific parts with one value in your CSS code.

¨text-align: center; And in our final statement/instruction we use the text-align property. We set it to center. Now our text in the paragraph is center aligned. Some other values that you could have used here are left, right, and justify. Justify is how the text is displayed in most books in case you were wondering.

¨} And don't forget to end your p rule with the closing curly bracket.

We learned a few more properties in this example. Now if you save and run your code you might notice that even though we were trying to style the paragraph under the h1 heading our code affected every p element that we had on the page in the exact same way. If your following along with the exercises in this book then you will have two paragraphs that were changed and also the footer because we used the p element for that as well. This is normal. There are going to be many times where you want to style multiple things at once. You might want to have your changes take affect on all of the paragraphs throughout your entire site. And that is what's happening here. Our site is only one page. Our selector is the p element. So anything that is a p element gets the same style changes. There are two ways that you can specifically pick what elements that you want to change. And those ways are by using classes or id's. That might sound confusing but when we learn how to use classes and id's you will see how simple they are and how convenient that they can be to a web designer. Also know that the order that you enter your statements inside of you rules isn't that important. The main reason that you might want to order them in a certain way is that it's easier to understand for you. So you can kind of make a system for yourself like in your rule you apply color changes first, then font changes second and so on. Then if you use this same type of system for all of your rules they will be more organized and easy to read.

Let's go over a few more CSS text/font properties. We'll add another statement inside of our h1,h2 rule. Add this somewhere inside of the curly brackets:

text-decoration: underline;

¨A few other values that you could use here would be overline, line-through, and none. Now overline and line-through are pretty self explanatory. But you might say, Why would I add a value like none? We'll the value none does have it's uses and you'll see one of those uses when we create a navigation bar for our web pages. Using it for this exercise would have no affect what so ever. One of the main uses of the value none is to get rid of bullets in an unordered list.

So go ahead and try out these new values in the property text-decoration. underline is the one most commonly used on web pages. But you may find some uses for the other values.

Bold And Italicize

This is gonna be a quick exercise to show you how to make your text bold and how to italicize it. Let's use our unordered and ordered lists for this lesson. So were gonna make two new rules up inside of our style tags. One for the unordered list and one for the ordered list. Add these two new rules right under your p rule:

ul {

font-weight: bold;

}

ol {

font-style: italic;

}

Run your code again and you have a bold unordered list and an italicized ordered list. This is a better way to make text bold or italic. But if for some reason you wanted to bold or italicize a single word or just a few words on your page, you could use HTML tags directly in your code. And just to show you what that would look like lets say you had a line of text inside of a paragraph that said "I like things bold but not italicized.". If you wanted to bold the word bold and italicize the word italicize you could just use these HTML tags directly in your HTML code without CSS. It would look like this:

I like things <b>bold</b> but not <em>italicized</em>. You surround whatever word or words you want bolded with the <b></b> bold tags and it's the same for the italicized word or words. Use the <em></em> emphasis tags.

Before we end this chapter let's get rid of that boring white background. As you might have guessed the selector that we use is body. So let's make our body rule. Put it right after your opening <style> tag. This is the most common place to put it because if you remember when we talked about the parent/child hierarchy, the body is the parent of everything inside of it. So some of the children of the body are the h1 element, the p elements, and the footer element. The children of the parent element body will inherit properties that we specify in it. So body is where we would put our code that we want to take affect site wide. For example font, text-size, background-color, etc. And then when we make a rule for example the p element. The properties inside are called overrides. So we are overriding our own default settings. The body selector makes designing a whole lot faster. Add this code immediately following the opening <style> tag:

<style>

body {

background-color: yellow;

}

Know that if you have text or something else that is yellow, You will not be able to see it now that we've changed the body's background color to yellow. When creating a website it's a good idea to plan everything out in advance. And as far as color schemes go, You should try to pick two to four colors that work together well that you want to use throughout your site. You'll get a more professional look this way. But that is up to you, the designer. You can use 100 colors if you wanted to. We're gonna end on that note for this chapter.

Quiz Chapter 12

1.What is the property used to change the size of text?

2.How would you underline text using CSS?

3.How do you change the body's background color/wallpaper?

4.Why is a good idea to plan out your website design before you code?

5.What are some of the advantages of using a body rule in CSS?

6.What are the HTML tags used to make text bold and italicized?

7.What are the CSS properties and values used to make text bold and italicized?