1 Star2 Stars3 Stars4 Stars5 Stars (11 votes, average: 5.00 out of 5)

DIV TAGS ID’S CLASSES CODING MADE EASY PART 3

To set a div tag we type out the tag just like we would do any other tag, “<div></div>”. It is important however that you set id’s or classes to these div tags so we can target them for styling. We use CSS Cascading Style Sheets for styling our webpages. First we need to set div id’s and classes in order for the styling to work.

Syntax For Div’s *

You will hear the word “syntax” a lot when it comes to coding. Syntax refers to the way a computer understands the code your are typing in. Here is an example for the syntax on setting div id’s and classes.

Setting a Div Id *

<div id="foo"></div>

Setting a Div Class *

<div class="boo"></div>

Styling Div’s with CSS *

The whole reason why we use div id’s and classes is so we can style a web page. They way we target them in CSS is a little different. We target div id’s with a “#” sign. We target div classes with a “.” sign. Here are some examples.

Subscribe To My YouTube Channel:

Target a Div Id *

To target a div id of “foo” in your style tag you would use this syntax.

#foo{}

Target a Div Class *

To target a div class you would use the following syntax.

.boo{}

Code from Today’s Lesson *

Here is the complete code that we used in the video. you can use this as a reference.

<html>
<head>
<title>All About DIV's</title>
<style>
#foo{
background-color:orange;
width:49%;
float:left;
}
.goo{
color:red;
}
#boo{
background-color:blue;
width:49%;
float:left;
}
.too{
color:white;
}
</style>
</head>
<body>
<div id="foo" class="goo">
<h1 class="too">All About DIV's</h1>
<p>Div's help us position things on our webpage.</p>
</div>
<div id="boo">
<h2>More About Divs</h2>
<p>Div's can be targeted with CSS and styled.</p>
</div>
</body>
</html>

Things To Do *

If you have not already done so be sure to subscribe so you get the latest lessons on beginner coding. You will see the subscribe box on the bottom and to the right of this page. Be sure to subscribe to our YouTube channel and follow us on Facebook and Twitter.

Our Next Lesson *

In our next lesson we will be going over tables and how they work in a webpage.

Next Lesson

DIV TAGS ID’S CLASSES CODING MADE EASY PART 3 was last modified: June 16th, 2017 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

DIV TAGS ID'S CLASSES CODING MADE EASY PART 3

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.