{"id":193,"date":"2017-09-27T03:55:57","date_gmt":"2017-09-27T03:55:57","guid":{"rendered":"http:\/\/miriamposner.com\/classes\/dh101f17\/?page_id=193"},"modified":"2017-09-27T03:55:57","modified_gmt":"2017-09-27T03:55:57","slug":"css-part-2-divs-classes-and-ids","status":"publish","type":"page","link":"http:\/\/miriamposner.com\/classes\/dh101f17\/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

We’ve learned how to use CSS styles to format content on our webpage, and the code we’ve used is great for when you want to format\u00a0all<\/i>\u00a0paragraphs, 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’s 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\u00a0ID tag<\/strong>\u00a0to 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>\u00a0and entering styling information, just as I would for any element. The hashtag in front of “highlight” 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’t labeled it “highlight.” 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?\u00a0Div<\/strong>\u00a0tags come in handy for that. A\u00a0div\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\u00a0class<\/strong>, which is just a way of naming an element. It’s 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’s the idea.)<\/p>\n

Create a new\u00a0div<\/strong>\u00a0around part of your page and give it a\u00a0class<\/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’s class, you’ll place a period in front of it, to indicate that it’s a class.<\/p>\n<\/div>\n<\/div>\n

\n

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

Floats<\/strong>\u00a0can be kind of confusing, but the idea is that if you apply a\u00a0float<\/strong>\u00a0to an element, it’ll 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’re almost done, but there’s one last thing it’s important for you to know. What happens if you have contradictory styling information on your stylesheet? For example, what if you style your\u00a0h1<\/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\u00a0control<\/strong>\u00a0and click)\u00a0somewhere on your webpage, and select\u00a0Inspect Element<\/strong>. You’ll see something like the image above, which gives you information about how that element is styled. (In this case, I’ve clicked on my dog image.) You can actually style elements directly on the page by clicking on the style information. It won’t stick, though; the page will “reset” as soon as you refresh it.<\/p>\n

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

We’ve learned how to use CSS styles to format content on our webpage, and the code we’ve used is great<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":43,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-193","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":0,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages\/193\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/pages\/43"}],"wp:attachment":[{"href":"http:\/\/miriamposner.com\/classes\/dh101f17\/wp-json\/wp\/v2\/media?parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}