Html, Css, Website Development And Design BootCamp.: For Complete Beginner's To Novice. Learn To Code Like A Pro Fast, In As Little As One Day! Bonus: We Make A Responsive Website Layout! by Programming Clear Coded

Author:Programming, Clear Coded [Programming, Clear Coded]
Language: eng
Format: azw3
Tags: web design,, responsive website, html,, web development,, programming,, web page,, css,
Published: 2016-02-24T05:00:00+00:00

Chapter 16: Classes and Id's

In this chapter we are going to learn about CSS classes and id's. What they do, Which one to use, and how they can help you design your elements faster and easier.

CSS Classes

We'll begin with classes. The first thing we need to do is remove the inline styles that we added to our h3 element and our p element from chapter 14. So delete the style="color:red;font-size:20px;" code. And also the style="color:purple;font-size:14px;text-align:left;" code. Now your just left with an <h3> element an a <p> element and we don't have anymore inline style code. So our h3 and p elements now takes the property values from our internal style sheet in the head element. Okay so now that we're done with that we can begin. A class allows you to design one specific element or many elements at the same time. Now as you already know all of our paragraphs have the same style characteristics that we specified in our p rule. But what if we wanted our first and second paragraphs to have a different set of styles? Well that is where classes come in to play. Let's add this code to the opening tags of both our first and second p elements. We are just gonna set up a class that changes the text color. Don't worry about what the paragraph says. This HTML document that we're using is just for learning purposes. When we create our website layout we will add some relevant content.

<p class="gray">

<p class="gray">

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.