Life as Rose

I get pretty caught up in trying to write cool and flashy tutorials, but there’s probably a lot of toned down stuff I could write about that some people would find useful – even though I mostly assume you guys are all pretty clever already when it comes to webdesigny stuff

BUT, maybe some of these CSS tricks and hints will be new to you. Hopefully.

The *, and other interesting select-y things

The * is called the universal selector. I usually use it at the beginning of CSS documents to strip all default padding and margins, like this:

* {
  padding:0;
  margin:0;
}
What that does is: “I don’t care what the tag is called. This is going to effect every single freaking tag.”

You can also use it a little more selectively, like this:

div.sidebar * {
  color:#FF0000;
}
Which would be – “Every single tag in the div with a class name of ‘sidebar’ will be red.”

---

There’s also this neat thing called ‘Adjacent Sibling Selectors’, which means, ” If these two tags are side by side, then do this!”
h1 + h2 {
  color:#0000FF;
}

So if you had a h2 tag immediately after a h1 tag, that h2 tag would be an obnoxious shade of blue. BUT, if you had a h1 tag, then a p tag and THEN a h2 tag, the h2 would be whatever the default is for h2 tags.

Ew, my sentences are confusing.

---

Then there’s that whole thing with children…

I’m sure you already know about stuff like this:
div.sidebar p {
  color:#FF0000;
}
This is called a descendant, which means that every single p tag inside the sidebar div, no matter how deep it goes, will be red, like this:
<div class="sidebar">
<p>I am red</p>
<div class="innerSidebar>
<p>I am ALSO red</p>
</div>
</div>

HOWEVER, if you only select the CHILD of the sidebar:
div.sidebar>p {
  color:#FF0000;
}
Then for the p tag to be red, it has to be the sidebar’s baby, not its grandchild, for example So in this case:
<div class="sidebar">
<p>I am red</p>
<div class="innerSidebar>
<p>I don't get to be red </p>
</div>
</div>

---

Yes, this is a really long list of selectors. Too bad I’m not done yet!

You can do first-child and last-child, so that only the FIRST paragraph is red (or last.) This is especially useful in lists. Say if you want a list that is a bunch of text separated by commas. Well, you don’t want the LAST item in the list to have a comma, because that would be nonsense!

I used this piece of code for my examples of how to display links when using my Link Manager Script:
ul#thirdExample li {
display:inline;
margin:0;
padding:0;
}

/* Two lessons in one! :after means that you can do something AFTER a tag. Usually insert text of some kind. In this case: A comma! */
ul#thirdExample li:after {
content: ", ";
}
/* BUT...If it's the very last <li> tag, then we don't want it to have a comma.... */
ul#thirdExample li:last-child:after {
content: "";
}


Note how I can combine those two: li:last-child:after
…I could also just do li:last-child if I wasn’t dealing with the whole comma-afterwards thing.

---

There’s also :active and :hover (which you probably already know about) and :focus, for when you’re focused on an element… usually used for customizing forms.

As well as :before, :after, :first-line, and :first-letter, all of which kind of have names that make sense without me having to explain them, right?

---

OK, so what if you have a bunch of <div> tags and they all have slightly different ID’s, but also kinda similar, like this:
<div id="comment-1"> A blog comment! </div>
<div id="comment-2"> A blog comment! </div>
<div id="comment-3"> A blog comment! </div>


And you want to affect ALL of them, but because their ID’s aren’t exactly the same, you’re worried you’ll have to do a lot of annoying CSS? Well, there’s a shortcut!
div[id|=comment] {
color:#FF0000;
}
“Any DIV with an ID that starts with ‘comment’ and ends however the hell you want it to end will be bright red!” (warning: there has to be a hyphen before ‘whatever the hell else’)

You could also get creative and decide that whenever there’s a link to lifeasrose.ca, you want it to be bold! Because you love me!

a[href="http://lifeasrose.ca"] {
font-weight:bold;
}

I think that’s probably enough on selectors. Let me just link away now to much much more: w3.org’s list of CSS3 Selectors and also their page for CSS2 Selectors.

Custom Fonts…

So you want to use this super awesome font but you know that not everyone will have it installed. And obviously it’s a jerk move to force everyone to download this font just for you.

There’s another way!
You have to upload the .ttf or .otf file to your website, of course, and then you ‘define’ it with CSS:
@font-face { font-family: Playtime; src: url('playtime.ttf'); }

So then if I say:
span { font-family:Playtime,Arial,sans-serif; }
If their browser isn’t a freaking dinosaur, it should work!

Animation…

This next bit is CSS3 and isn’t going to work for all of you, but it’s coming! Say if you want a link to change colour on hover but you don’t want it to just CHANGE… you want it to FADE into another colour….

Like this:
Move your mouse over me

You can use a thing called transition:

a {
color: #000;
font-weight: bold;
}

a:hover {
color: #9999FF;
-webkit-transition: color 1s linear; /* It should be just transition: but because it's still pretty new, there's some browser hacking going on....*/
}

Tthe first value in transition is: What CSS property are we changing? Color? Opacity? font-weight? width? You pick!

The second is: How long do we want this animation to drag on for?

The third: What KIND of animation do we want? Mostly I just go with linear because they’re all kinda similar anyway, but you can read more about this On the W3C site. As usual.

Yes, there is more. Maybe I’ll write about it some other time, though.

Hopefully some of the stuff I rambled on about will be useful to you. Let me know if you notice any typos or stupid comments by yours truly, because I usually make one every time I write one of these.

Happy end of August!

( )