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 */
Thanks for the great starter on CSS – it would have been useful to linger some more on two aspects:
The code in the HTML file that identifies the CSS file (there was was code that was unexplained). Is it always the same, what else do we look out for?
Also, the background tile image. Is there a repository of such images on the net? If we find a pattern, what dimensions or properties should we save the tile as in photoshop for the best affect?
Thanks,
Rayhan
Good questions, Rayhan. The code in the HTML that identifies the CSS file is always the same in that it’s always the same template: . But your CSS file can be named anything (myCool.css, stylesheet.css, i-am-awesome.css, clown-fart.css, etc.). One more thing: the CSS stylesheet link needs to go between the
tags of your document.There are plenty of websites which have tiling background patterns free and for sale. You can also make your own with an image editing program like Photoshop.
I can’t add images using your tutorial in part 2 CSS. You are assuming everyone uses photoshop. I don’t have photoshop. I am using a pc laptop that has Windows 7. How do I add a background image with what I have.
Bethany, There are a number of free (with fewer features) options out there for creating and saving images for use in web design. GIMP is one that comes to mind (http://www.gimp.org). Whatever program you choose, it’s only important that you’re able to save out images in .jpg, .png, or .gif formats. Just do a google search for image editing programs for your particular configuration and read up on whether they’re capable of exporting images in those formats.