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 web-pages. 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.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>