customCSS

Getting Started – Divs, Spans and Classes Oh My!

Ok, so if you’ve got this far you should have an idea what is required to override basic HTML tag css, and how to make/override classes, ids and inline styles and even how to associate those new classes and ids with existing HTML tags.

Now – what if you don’t have a tag to associate with?

It’s time to talk a bit about the types of elements you can use. HTML has two “classifications” of elements. “Block” and “Inline”.

Block elements are elements that end by creating a “new line”. In other words when you have a <\tag> – anything that comes after it will appear on the next line down.

Headers (h1-h6), paragraphs (p), lists (ul-ol), tables – these are all block elements. They all take up “blocks” of space.

Inline elements, as you can probably guess, are elements that can appear in a line with other elements because they do not cause a new line when they end.

There are two special tags in HTML – div and span. Div is a block element. Span is an inline element. Both of these elements can contain other elements, and have id, class and style attributes.

Div is, in and of itself, “nothing special”. It has no specially defined purpose. It’s not a table, it’s not a list. It’s a “generic” block element that can be used when a pre-defined block element won’t do (maybe you don’t want a table, maybe you want a side menu that “floats” over your content and always appears in the top right of the screen – this would use divs).

Spans are also “general” inline elements – however they serve a very simple purpose. They allow you to separate particular sections of TEXT and restyle them.

Let’s take our red text on a black background example from the Getting Started – Cascade what?! tutorial. But let’s say we DON’T want our text to be bold. We just want one word in a sentence to be red with a black background (again, why you’d want to do this I have no idea, but it’s a very visual example). You’d use a span.

So first let’s take some text. You will see the following text (or similar) to it throughout. It’s a standard in web design (see: Lorem Ipsum).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor tellus, ultricies eget nisl sit amet, volutpat tempus diam. In vitae blandit lectus, vitae pharetra ligula. Aenean at arcu lorem. Integer ac viverra purus.

Now – let’s say we want to make the word “vitae” red with the black background. Using our class from before and a span we would have:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor tellus, ultricies eget 
nisl sit amet, volutpat tempus diam. In vitae blandit lectus, <span class="weird-coloration">
vitae</span> pharetra ligula. Aenean at arcu lorem. Integer ac viverra purus.

And we get this(minus the italics):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor tellus, ultricies eget nisl sit amet, volutpat tempus diam. In vitae blandit lectus, vitae pharetra ligula. Aenean at arcu lorem. Integer ac viverra purus.

Now let’s say we want to put our text in a section with it’s own background on a wiki page so that it looks like our text is on a piece of paper. We want to make a “block” for the paper to exist in. So…we need a div!


.paper-background{
  background-image:url(http://4.bp.blogspot.com/-geDbGonsQOQ/T3dMzp9X7qI
  /AAAAAAAAA14/-RjGY1F8_I4/s320/Foolscap.jpg);
  background-repeat:repeat;
}

<div class="paper-background">

</div>

Wrapping that code around our previous code gives us this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor tellus, ultricies eget
nisl sit amet, volutpat tempus diam. In vitae blandit lectus, vitae pharetra ligula. Aenean at arcu lorem. Integer ac
viverra purus.

customCSS

Post Reforge CSS dawnhawk dawnhawk