The Beginner’s Guide to CSS

Update: This post was updated October 2013 to reflect current statistics and tools.
Congratulations! All that time you’ve spent coaxing your HTML to transform your blank, white and Times New Roman font-filled web page to something that vaguely represents a design-worthy website is about to become completely and totally moot. Delete all those tags peppered at the beginning of each of your paragraphs and prepare to get excited: all of your design elements will be in a tidy and simple document.

The beauty of Cascading Style Sheets, or CSS, is that it makes implementing design-work onto a website super-simple. Where traditional style manipulations with HTML would lead to sifting through the code of multiple web pages to keep everything consistent, CSS makes sweeping transformations across every corner of a website.

Say that you want your navigation bar to highlight green when you hover over it. In HTML, that would be a complete and total pain, and cause hours of hair-tearing frustration for a programming beginner. But, in CSS, just two simple lines of code need to be in place for your website to have all the green hovers it needs. Sounds like some sort of wizardry, but trust me: CSS is one of the most versatile and important languages to know — and with it, you’ll be able to personalize your website to your picky specifications.

Here’s the foundation you’ll need to be well on your way with this new language. Have any questions or tips about CSS? Let us know in the comments.

What is CSS … Really?

A little CSS edit transformed Mashable into Conashable in April

Style sheet languages have existed since the 1980s, but the standardization and implementation of CSS in 1996 solidified it as one of the go-to languages for web development. The purpose of the language is to separate the content of a page (think paragraphs, links and other bits of information) from its display (font size, color, and details that have to do with how a page looks). Think of CSS as the companion language to HTML: while it cannot function on its own, it streamlines and completes what HTML lacks. But, it is important to note that CSS is fairly restrictive on the layout of a website; if you’re looking to develop a fluid layout that conforms to a browser window, then be prepared to spend a lot of time futzing with the language.

In practical use, there’s no special magic or finagling needed in order to get your CSS style page to interact with your HTML — as long as it is connected, HTML will defer to the style guidelines set forth by the style sheet across all code that it governs. This means, as previously mentioned, your website will change in bulk once a CSS is properly implemented — and it can be changed just as easily.

It’s also important to note that you can write CSS in many ways. One is using CSS as an in-line change, which utilizes HTML to change a specific piece of code in a special case (for example, My apple was green). Another method is using an internal style sheet, a piece of CSS inserted directly into an HTML file that will specifically control that page, but not the style of the other pages in the website. The final way is an external style sheet which will control the style sheet of as many pages as you would like. Because of CSS’s flexibility, you can use all three methods to create a unique web page style without conflicting designs. This is because a web page will take a standardized priority, beginning with the least important and ending with the most:

1. External style sheet
2. Internal style sheet (in the head section)
3. Inline style (inside an HTML element)

CSS also has multiple variations, the most popular being CSS3, although CSS4 is slowly starting to make its way onto the web. While those versions have plenty of bells and whistles that will take your styling to the next level, we’ll keep it simple and just stick to the original code protocol.

The Basics

[youtube https://www.youtube.com/watch?v=5xhxsw_Yw6g?enablejsapi=1&&w=640&h=360]
The inventor of CSS, Håkon Wium Lie, spoke to Mashable last year about the future of the language

Now that we understand what CSS does, let’s discuss more about how it works. The syntax and structure of CSS is very simple, so let’s run through some of the basics to get a better handle of how it all works.

The first step is to create an external style sheet: Just open up the text editor you use for HTML and save it as a .css with an easy name (style.css is a pretty standard one). You must directly link your style sheet to HTML in order to see any changes, but that can be resolved with a simple line using the tag (for example: ) in the header of your HTML document.

Now that you’re squared away, it’s time to code. Like all languages, CSS requires a specific sort of syntax — let’s break down a command for a style, otherwise known as a “class,” for a paragraph.

p {font:12px Georgia;}

In short, any time the tag is employed, the CSS has specified that the font should be Georgia rendered in 12 pixels in size. So, how does that work? Generally, the way to write a class in CSS is broken down into core fundamentals:

1. Name the tag that you want to style, without brackets.
2. Utilize the { symbol to begin styling.
3. List the styles.
4. Close with a semi-colon and a second } symbol.

CSS can also stylize multiple states of the same tag, which will all be incorporated in the website. For example, take the stylizing of a link in a web page.

a:link {color:red;}
a:visited {color:purple;}

The above code means that while a regular unvisited link will appear red, a link that has already been visited will turn purple. The terms “:link” and “:visited” are specified classifications within CSS that will apply to a single tag that can express multiple states. While certain tags already have these states built-in, users can also develop special states for different tags.

p {color:red}
p.italic {font-style:italic; color:yellow;}

In this example, while normal paragraphs will turn red, any paragraphs marked with in HTML will not only be italic but also yellow. Users are allowed to use any descriptor they would like to create their own classes — and a number of different classes can be applied to different tags.

From here, you’ve already got a working style sheet. If you’re interested in even more specific measures, you can move to an internal style sheet, which utilizes the same syntax inserted between tags in the header of an HTML document. There are plenty of different things to adjust within a webpage, and CSS does almost all of them fairly effectively.

Moving Forward

Now that you have the core concept of CSS, it’s time to spread your wings and get to tinkering. My recommendation is to start with colors, then move to fonts and layout — all of these styles can build on each other to create a cohesive web page. Advanced users can begin to explore more boundaries of class tags, which will help you style many tags or states at once, and id tags, a special kind of function that singles out a style of a specific and singular item. Of course, the best way to be familiar with CSS, or any code language, is to spend time with it. So, get going!

Image courtesy of iStockphoto, Creativeye99

Read more: http://mashable.com/2012/10/24/css-for-dummies/

Click here for reuse options!
Copyright 2018 Social Zazz