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.
2 Comments
This really helped. Thanks!
YOUR WELCOME 🙂