{"id":1412,"date":"2016-10-25T18:08:04","date_gmt":"2016-10-26T01:08:04","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/dh101f16\/?page_id=1412"},"modified":"2016-10-25T18:44:27","modified_gmt":"2016-10-26T01:44:27","slug":"css-part-2-divs-classes-and-ids","status":"publish","type":"page","link":"https:\/\/miriamposner.com\/classes\/dh101f16\/tutorials-guides\/web-publishing\/html-css\/css-part-2-divs-classes-and-ids\/","title":{"rendered":"CSS Part 2: Divs, Classes, and IDs"},"content":{"rendered":"
\n
\n
\n
\n
\n
\n
\n

We\u2019ve learned how to use CSS styles to format content on our webpage, and the code we\u2019ve used is great for when you want to format all<\/i> paragraphs, headers, or images. But what happens if you want to, say, distinguish among paragraphs on your page? Or break your page up into sections? That\u2019s where divs, classes, and IDs come in handy.<\/p>\n<\/div>\n

\n

Use IDs to distinguish among elements<\/h3>\n
\"media_1445883439712.png\"<\/div>\n
\n

I like the way my paragraphs look, but I want to create a special style for paragraphs I want to highlight. I can do this by adding an ID tag<\/strong> to those paragraphs. First, after the tag for the paragraph I want to highlight, I type\u00a0id=\"highlight\"<\/code>. Then I create a style for that ID tag on my stylesheet by typing\u00a0#highlight<\/code> and entering styling information, just as I would for any element. The hashtag in front of \u201chighlight\u201d tells the browser that it refers to an ID tag.<\/p>\n

Notice that when I refresh the page, the first paragraph is treated as before, since I haven\u2019t labeled it \u201chighlight.\u201d The second paragraph, because of its ID tag, looks different.<\/p>\n<\/div>\n<\/div>\n

\n

Divide your page into sections with divs<\/h3>\n
\"media_1445883990276.png\"<\/div>\n
\n

The last step works well when you want to style individual elements. But what if you want to create sections on your page? Div<\/strong> tags come in handy for that. A div\u00a0<\/strong>creates a new, invisible box around whatever elements it encloses, allowing you to style these elements as one block.<\/p>\n

To label divs, use a class<\/strong>, which is just a way of naming an element. It\u2019s very similar to an ID tag, except classes refer to elements that appear multiple times per page, while ID tags can be used only once. (In practice, this distinction is pretty blurry, but that\u2019s the idea.)<\/p>\n

Create a new div<\/strong> around part of your page and give it a class<\/strong>. Then style it on your stylesheet just as you did with the ID tag. The only difference is that instead of placing the hashtag in front of the div\u2019s class, you\u2019ll place a period in front of it, to indicate that it\u2019s a class.<\/p>\n<\/div>\n<\/div>\n

\n

Get even crazier with floats<\/h3>\n
\"media_1445884244795.png\"<\/div>\n
\n

Floats<\/strong> can be kind of confusing, but the idea is that if you apply a float<\/strong> to an element, it\u2019ll attempt to move in that direction, pushing all of its neighbors to the side. Try it by floating one of your divs left or right.<\/p>\n<\/div>\n<\/div>\n

\n

Taking precedence<\/h3>\n
\"media_1445884580146.png\"<\/div>\n
\n

We\u2019re almost done, but there\u2019s one last thing it\u2019s important for you to know. What happens if you have contradictory styling information on your stylesheet? For example, what if you style your h1<\/strong>s one way at the top and another way toward the bottom? Try it.<\/p>\n

The later style takes precedence.<\/p>\n<\/div>\n<\/div>\n

\n

Your browser can help you out<\/h3>\n
\"media_1445884827025.png\"<\/div>\n
\n

Right-click (or hold down control<\/strong> and click)\u00a0somewhere on your webpage, and select Inspect Element<\/strong>. You\u2019ll see something like the image above, which gives you information about how that element is styled. (In this case, I\u2019ve clicked on my dog image.) You can actually style elements directly on the page by clicking on the style information. It won\u2019t stick, though; the page will \u201creset\u201d as soon as you refresh it.<\/p>\n

Hey, you’re done! Nice work. If you have extra time, take a look at some of the more advanced ways<\/a> you can use CSS (start with “Grouping and Nesting”).<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

We\u2019ve learned how to use CSS styles to format content on our webpage, and the code we\u2019ve used is great for when you want to format all paragraphs, headers, or … Continue reading “CSS Part 2: Divs, Classes, and IDs”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1391,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-1412","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/pages\/1412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/comments?post=1412"}],"version-history":[{"count":0,"href":"https:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/pages\/1412\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/pages\/1391"}],"wp:attachment":[{"href":"https:\/\/miriamposner.com\/classes\/dh101f16\/wp-json\/wp\/v2\/media?parent=1412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}