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.
In the conclusion of this two-part series, we’ll show you how to apply and write your own CSS.
Time to release that long-held breath, here comes part 2 of
Starting From Scratch where you'll learn how to add CSS to that hum-drum HTML. Of course, we'll be using our
example site as we continue to take it from basic HTML, to a beautiful, well-marked-up website. By the end of this video, you should be able to go forth and start CSS-ing your own website project. What are you waiting for? Press “Play” already!
I thought I should point out that :active should come after :hover to be effective, as per: http://www.w3schools.com/css/css_pseudo_classes.asp
The order doesn’t matter, but generally you want to try to have the tags be in alphabetical order:
a:active {color:#0000FF;} /* selected link */
a:hover {color:#FF00FF;} /* mouse over link */
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
Also beware that w3schools doesn’t follow the standards all the time, and they misinform sometimes.
A clarification about getting link styling to look correct: Alphabetical order isn’t necessarily the best way; by using the order :link, :visited, :hover, and :active, everything should work properly.
It all has to do with the “cascading” nature of style sheets. “LoVe-HAte,” a cute name to remember the order, works the same way you interact with a link. First, you see (whether it’s new or visited), then hover, then click (or make it “active”).
Eric Meyer, a good authority on CSS matters, explains in greater detail here: http://meyerweb.com/eric/css/link-specificity.html
OReilly’s book Head First HTML says :The order determines the color used as the link changes from one status to another , but generally you want to try to have the tags be in this order:
a:link /* unvisited link */
a:visited /* visited link */
a:focus
a:hover /* mouse over link */
a:active /* selected link */