CharlieMC (charliemc) wrote,

  • Mood:

I Adore CSS -- I Really Do!

What I can't believe is that I didn't realize you could make an actual style sheet that would include things you frequently use. I mean, I knew you could use CSS in the Customize area, I was simply thinking of it as a way to manipulate the layout of my blog -- not for use in entry content.

I love coding HTML and CSS so much that I really don't mind doing spans and divides each time I use them. But it does speed things up to use class versus style (where you have to define the entire thing). So now I'm going to keep adding to my CSS here on a regular basis. (smile)

For example, I've now created .caption that does this:
Makes the background of the text silver. Makes the text black and 80% normal size. It would look like this:

This is a sample caption of a photo.

I can use it either as a divide (<div>) or a span (<span>). The version above is a divide. (For those who don't know, a divide goes from one side of the page to the other. A span will only span the text that it covers.) Here's what it would look like as a span:

This is a sample caption of a photo.

OR (if you only want to do a portion of a sentence)

This is a sample caption of a photo.

(Obviously because this is a reduced size thing, you probably wouldn't be using it with regular size text. But it's just a sample, after all...)

Here's what the code would look like to create it:
.caption {background-color:silver;color:black;font-size:80%;}

So while typing, I'd use the following (for example):
<div class="caption">This is a sample caption of a photo.</div>

Which beats the hell out of typing this:
<div style="background-color:silver;color:black;font-size:80%;">This is a sample caption of a photo.</div>

Cool, isn't it?

By the way, I changed my layout just a tiny bit today! I went from having red links to brown links, which match my blog layout much better, I think. And when you hover, you see the brown on a white background, minus the underlining. It's a nice change, I think.

CSS rocks. There's no doubt about it!
Tags: 2008, css, june-2008

  • Post a new comment


    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.