Are you a print designer, photographer, fine-artist, or general creative person? Do you have a shitty website that you slapped together yourself in Dreamweaver in that ONE web design class that you took in college? Do you not have a site at all because you’ve been waiting two years for your cousin to put it together for you? Well, we’re here to help. We know that you have little to no desire to do web design professionally, but that doesn’t mean that you want an ugly cookie-cutter site or to settle for one that hasn't been updated since Hackers was in theaters. Through short tutorial videos, you’ll learn how to take a basic wordpress blog and manipulate the css, html (and even some php!) to match your aesthetic. You’ll feel empowered rather than crippled by the internet and worst case scenario you’ll at least end up having a better idea of how professional web designers turn your design dreams into a reality on screen.
Do the fonts look kind of weird? Switch to Safari or Chrome as your browser. You’ll thank me later.
We’ll give you the low-down on Classes and IDs and hone your CSS skills at the same time.
In this episode, Russ introduces you to classes and IDs, explains the levels of specificity with HTML markup and CSS, and get you psyched to use your hypothetical label maker all over the internet.
For further reading, check out this article by on
Smashing Mag as well as this article on
HTML Dog and definitely do a lot of poking around on your favorite sites to see how elements are targeted on them!
Thanks to @BenoitWimart for pointing out this great rebuff to using camel casing in your CSS names. It’s valid, but is it best?
http://csswizardry.com/2010/12/css-camel-case-seriously-sucks/
Thanks so much Russ! Being that the first CLASS demonstration targeted the generic menu pricing, I’m a bit confused about class = price. I’m sorry to be such a literalist, but I’m trying to wrap my brain around something … here goes:
In the second Class demonstration, the word “price” was used to recolor “Northeast Kingdom.” Had it been the other way around — northeast kingdom instead used to demonstrate changing the color to the cool red — would the term still be “price” used to recolor the menu pricing? In other words, as # just means “ID of”, does . (dot alone) just mean “Class of”? Or must the . (dot) always have “price” after it?
Hey Kat,
The “.” just means “Class of” and you can put any string of letters after it you like! There’s nothing magical about the word “price” it’s just what I personally decided to call that particular class because it had meaning for me (since I was using it on the prices in the menu). In other words, I could have also used the words “cost”, “chunk-of-change” or “sjfelijenfieijf” if I wanted to. Using “price” helps me remember what piece of content the class was for.
I applied the class “price” to the title of the page just to demonstrate that any element with the class of “price” will have the CSS rules associated with the class “price” applied to it. You’re essentially naming a set of CSS rules (“price”) and then applying that name wherever you want those rules to be applied.
Hope that helps!