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

[code]<div id="foo"></div>[/code]

Setting a Div Class

[code]<div class="boo"></div>[/code]

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.

Target a Div Id

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

[code]#foo{}[/code]

Target a Div Class

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

[code].boo{}[/code]

Code from Today’s Lesson

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

[code]<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>[/code]

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

Summary
DIV TAGS ID'S CLASSES CODING MADE EASY PART 3
Article Name
DIV TAGS ID'S CLASSES CODING MADE EASY PART 3
Description
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. Here is an example.
Author
Publisher
A1WEBSTIEPRO LLC
Logo
DIV TAGS ID'S CLASSES CODING MADE EASY PART 3

2 Comments

Leave a Reply

Your email address will not be published.

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