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>