How to get started with CSS

Our getting-started guide tells you everything you need to know to understand CSS.

By David Daw, PC World |  Networking, css

I've already discussed how you can learn to code for free using languages such as Ruby and JavaScript, but this time we'll explore an even more basic language that can help to make your websites pop. Cascading Style Sheets is like HTML's cooler, more artistic sibling: While HTML handles the structure and content of your website, CSS allows you to add cutting-edge design to it. This guide tells you everything you need to know to get started making better-looking websites fast.

What Is CSS?

Many people just getting to know CSS think of it as a fancy way of handling HTML properties such as text formatting and background images--and for small-scale examples on simple pages, that's largely true. You can manipulate many of the properties that CSS affects through pure HTML instead (though not as well), and if you're just looking to change the font size on your page, CSS is actually more difficult to use than HTML.

What makes CSS worthwhile is the number of design options it opens up for you that are difficult--or impossible--to accomplish with HTML alone. HTML gives you just a handful of text properties to manipulate; CSS gives you properties such as color, direction, letter-spacing, line-height, text-align, text-decoration, text-indent, text-shadow, text-transform, vertical-align, white-space, and word-spacing. And I haven't even gotten to the nontext options.

For a full list of CSS properties, you can check out a handy glossary on Dochub, but for now let's look at just two of the more interesting ones. Since we couldn't actually write HTML and CSS code in a Web page without causing trouble for the PCWorld CMS, we've taken the liberty of providing images of some example code and what it looks like on a live page.

For starters, CSS allows you to add and modify a border for any element on a page. The following code produces a solid, 5-pixel-wide red border around the whole paragraph.

CSS experts will note that there is a much shorter way to write this code (they'll also frown on writing the code inline at all), but it provides a good example of CSS formatting.

You write inline CSS in the tag itself, using the style attribute. Basically you write your HTML tags as usual, and then add CSS in the format "css-property: property-value;" right inside. Any arbitrary CSS can go inside the style attribute. For instance, if we wanted to add a drop shadow to that paragraph in addition to the border, we'd change the code to the following line.

Originally published on PC World |  Click here to read the original story.
Join us:






Answers - Powered by ITworld

ITworld Answers helps you solve problems and share expertise. Ask a question or take a crack at answering the new questions below.

Ask a Question