What is CSS?

Cascading Style Sheets are text files with a .css extension containing style sheets. CSS and Hypertext Markup Language are the core technologies for building web pages. The former is the aural and visual layout for different devices. While HTML allows display of texts and words on web pages, CSS gives those texts and words, colors, fonts, styles and layout.

Understanding CSS

CSS is a simple language for design to simplify the creation of presentable web pages, handling the feel and appearance of the content. It allows control of the text displayed, specifies spacing between the paragraphs, how letters and words are sized, what background images they would have, and a lot more.

Norwegian software engineer and web pioneer Hakon Wium Lie invented CSS on October 10, 1994. The language is maintained by the CSS Working Group in the World Wide Web Consortium or W3C that creates specifications which, when approved by the W3C members, become recommendations. W3C is the group that gives recommendations on how the internet works and should evolve.

What’s Good About CSS

CSS is easy to learn and is mostly combined with markup languages XHTML and HTML. Knowing CSS saves you time as you can write it once, then reuse the sheet in other pages since you can define a style of one HTML element and apply that same style to other pages.

Mark up languages and CSS are light so web pages can load faster. They are easy to maintain as well. For instance, you want to change some size of all your fonts, you just need to do just that in the style sheet and all the elements in your web pages will be automatically updated to the new style.

Compared to HTML, CSS has more attributes so you can give your page a far better look. Furthermore, it enjoys compatibility with multiple devices and support from most browsers.

As an example, check out the following HTML document:

<!DOCTYPE html>

<html>

<head>

<title>CSS Sample</title>

<link rel=”stylesheet” href=”mystyle.css”>

</head>

<body>

<h1>Hello World!</h1>

<p>This is a sample paragraph</p>

</body>

</html>

Here is the CSS file, mystyle.css:

h1 {

color: blue;

background-color: yellow;

border: 1px solid black;

}

p {

color: red;

}

The HTML document above specified through the link tag on the 5th line, the CSS file associated with it.  Then, inside the CSS file are two rules – on how the h1 and p elements should appear.

Mystyle.css says the words embedded with h1 in the HTML document, which is “Hello World!” should be colored blue, with a yellow background and a 1pixel solid black border. The paragraph “This is a sample paragraph” in between <p> and </p> should be displayed in red.

Though the example above gives a very simple appearance to the HTML document, it shows how CSS basically works. In advanced applications, CSS makes really beautiful and attractive websites.

The web itself contains ample information about HTML and CSS.  Anyone can learn these simple languages through online tutorials, free classes and forums even without a formal background in computer programming.