Using HTML 5 to Add Styles and Classes to Your Web Pages
CSS styles are the foundation of page layouts and adding aesthetic elements to your pages. The latest version of CSS is CSS3, and this version lets you use media queries to work with mobile devices. Before you work with more advanced CSS and HTML5 concepts, it's important to know how to work with basic styles. Basic styles format text, set columns in your page's layout, and they set the base color set for your pages. This article reviews CSS styles and shows you how to add them to your HTML.
CSS Classes
CSS styles are organized as classes. If you have no programming experience, the idea of a class can be a bit confusing at first. Classes are objects that contain several properties. For instance, you could have a class for a <p> tag that makes the text contained bold, red, and uses an Arial font. This class is then linked to your HTML elements. You can link HTML elements with CSS classes in several ways. You can specify that the class should be applied to all <p> tags, or you can be more granular and tell CSS to only apply the class to an element with a specific HTML id.
CSS styles can be contained within an external .css file, or you can create inline styles directly within the HTML <style> tag. For our first examples, we'll use inline styles, so you can see the relationship between CSS classes and your HTML elements.
Let's take a look at HTML code we used in previous chapters and apply some styles to the elements.
<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>
<style>
body {
background-color: #000000;
}
p {
font-family: "Times New Roman";
font-size: 16px;
}
</style>
</head>
<body>
<p>The content you want to display to users. </p>
<a href="myotherpage.html" target="_blank">See my other page.</a>
<img src="myimage.png" alt="My product image">
</body>
</html>
Notice that we removed the stylesheet link we've continually used in previous chapters. We've replaced the stylesheet link with two inline CSS styles. The first style applies to the background color of the body element. Using styles for the <body> tag, you can apply global colors, fonts, and layouts for the entire page. The background-color style for the <body> tag changes the color of the page's background. In this instance, we used the hexadecimal color "#000000", which translates to black.
The next style sets the font and font size for all <p> tags. Since we have one <p> element in the HTML page, this element is affected by the CSS class. The class sets the font to "Times New Roman," and it sets the font size to 16 pixels.
More Granularity with CSS Classes
In most cases, you'll want to apply styles to specific elements. For instance, you wouldn't want to create a large font in all <p> tags. You'd want to have a 16 pixel font size for the first <p> tag, and then you can set subsequent paragraphs with a smaller font size. This type of styling lets you control headings and page content using CSS instead of the default header tags.
Let's use the previous HTML code and add another paragraph element and ID property attributes.
<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>
<style>
body {
background-color: #000000;
}
#pheading {
font-family: "Times New Roman";
font-size: 18px;
}
#pcontent {
font-family: "Times New Roman";
font-size: 16px;
}
</style>
</head>
<body>
<p id="pheading">This is the first header on the page. </p>
<p id="pcontent">This is the content on the page. </p>
<a href="myotherpage.html" target="_blank">See my other page.</a>
<img src="myimage.png" alt="My product image">
</body>
</html>
We've replaced the global "p" CSS class that affects all paragraph elements with CSS classes that are specific to an HTML tag id. The pound sign (‘#') tells CSS to apply the class to an element with the specified class name. In this example, the second CSS class applies to the HTML element with the id of "pheading." The third class affects the element with the id of "pcontent." Notice the HTML contains two paragraph tags with those two IDs.
The above example shows you how to use CSS selectors. CSS selectors tell your code how to apply CSS styles. In the above example, the "id" selector was used. Another popular selector is using class names. The id selector is the pound sign, and the class selector is a period (‘.'). Let's take a look at the class name selector.
<!DOCTYPE html>
<html>
<head>
<title>Your web page title<
