What is CSS?
So I finally get what css is, and also why it's good to use it in an external style sheet.
What is CSS?
CSS is what makes a website pretty. Think of the HTML as the nuts and bolts that are used to build a website. When I refer to HTML, this also includes the content, copy, or the actual text that you see on the page (insert whatever your favorite word is to refer to the actual words you will read on a website). HTML is needed and very neccesary, but it doesn't make the website look pretty. When a webpage doesn't have any CSS, it's quite bland. The CSS is a lot like the covering/paint that goes over the nuts and bolts.
Now if you're thinking that the HTML is like the frame of a building, you're right, but only a little bit. The HTML has some say in the shape and size of the website, but not as much as the CSS can have.
The CSS can tell the HTML where on the page it should be, how big, how small, the width, height, font-size, color, borders, background colors, uppercase, lowercase, and a vast array of other visual cues. This is really what CSS does, it's the visual part of the website. A lot of images that you see on websites are placed there using CSS.
Why Use an External Style Sheet?
The whole reason CSS was created was so that website designers could make changes to websites faster. So if I had a website before CSS, every single visual part of my website had to be hand coded for every single page. So let's say that my boss wanted the color of links to be pink instead of blue. I would have to change this on every single link, on every single page. Horrible!
With CSS, you can have an external style sheet, that the HTML includes, which will set all the visual parts of your website from a single file (or only a handful of files). To change the links from pink back to blue, because my boss' boss want them to be blue again, would only take 5-10 minutes. Awesome!
The Take Away
Now that you're smarter about what is css, you can help explain it to others. Or better yet, just save your breathe and share this post with them.
Comments (2)
Roberto T.:
Nov 22, 2011 at 07:59 AM
Without a doubt CSS is one of the most powerful tools a web designer/developer can learn. With it you can affect the entire mood and tone of a site relative fast and easy.
You might want to also learn about CSS sprites. In a nutshell, CSS sprites provide a neat and easy way to reduce loading times on your page as well as adding rollover effects without the use of JavaScript.
A web page with many images can take a long time to load and generates multiple server requests. Using CSS image sprites will reduce the number of server requests and save bandwidth.
After you learn the basics, I would take a look at this site - http://yostudios.github.com/Spritemapper/
mafokken:
Nov 22, 2011 at 10:02 AM
CSS sprites are wonderful tools! Thanks. (and thanks for sharing that tool, it looks awesome)
You can still use separate images and have a rollover effect without using JavaScript. The main reason to use CSS sprites, in my mind, is to reduce the flicker effect of using separate images for a rollover button.