START A COURSE

The HTML and CSS Blog:

Introduction to Cascading Style Sheets (CSS)

What You Will Learn in This CSS Lesson

You will gain an understanding of what CSS is used for, who developed it, and where to write your CSS code. This is the first of a four-part series of lessons about using CSS for web page design.

CSS Introduction

Cascading Style Sheets (CSS)

CSS is a markup language, just like HTML. Every web page uses CSS to control the appearance of the page content. You can style your HTML content with CSS rules to specify how everything looks. Use CSS to control visual properties such as font, text size, color, text weight and alignment. CSS can style any HTML element, not just text. It is used to style the page. Want a color or image in the background of your page? Use CSS. Want your page positioned in two or three columns? CSS properties can control the size of those columns, their background color, and borders.

When was CSS Developed?

The World Wide Consortium (W3C) initially released Cascading Style Sheets (CSS) in 1996 to increase the presentational sophistication and accessibility of websites. The W3C maintains the CSS specification, and provides a free CSS validation service for CSS documents.

Who Created CSS?

Håkon Wium Lie and Bert Bos worked together with Tim Burners-Lee to write the CSS proposal.

Don't be a dinosaur, use CSS, not HTML, for your styling

Separation of Content from Presentation

Håkon said “Bert Bos and I strongly felt that HTML should not degenerate into a visual language. We wanted HTML to remain a semantic language so the content could be presented on all sorts of devices, not just visual ones. Therefore we developed CSS. So, in a way, you could say CSS was developed to save an even more important language, namely HTML.”

HTML structure plus CSS styling

Why Should We Use CSS?

The quick answer is that using CSS will give you better searching, faster loading, more consistent design, and make design and editorial updates easier.

Better Searching

Google (or any search engine) cares about content, not appearance. Separating the design from the content makes it much easier for Google to focus on searching your content.

Faster Loading

Placing the CSS styling in a separate file than be reused by all your site’s pages increases the efficiency of your site’s loading time. The CSS file only has to download once to style all the pages on your site.

Better, More Consistent Design

Being able to style multiple pages with the same CSS style sheet makes a lot of sense to designers. We care about branding and design consistency, and presenting content in an engaging manner. Having all the pages in your site styled by the same set of CSS rules helps the pages look consistent.

Easier Design Updates

It is easier to update the design of a site by modifying the CSS style sheet, or switching to a new CSS style sheet. It is easier to focus on design changes when it is separated from the content.

Easier Content Updates

It is easier to update the content of a site if it is not buried in lengthy visual attributes in the HTML. Removing the design attributes from HTML makes it much simpler and easier to edit your text, images, and links when updating your site.

Accessibility is Improved

Separation of content from visual presentation makes your site more accessible. It is easier for a screen reader to read your page out loud properly when the content is separate from the visual styling.

Designers, CSS is the language for you

Where Does the CSS Code Go?

Your CSS code can go in three different places: inline or embedded in the HTML file, or external in a separate CSS file.

Inline CSS Styles

  • In the body of the HTML file
  • Affects only one HTML element at a time

Embedded CSS Stylesheets

  • In the Head section of the HTML file
  • Can affect multiple elements on a page

External CSS Stylesheets

  • In a separate file with a CSS extension
  • Can be linked to any number of HTML pages

How do I learn CSS?

Our CSS tutorials will walk you through everything you need to know. In the next three lessons we’ll try out some CSS styling. The First Lesson will be devoted to trying out inline styles. Lesson Two will focus on embedding the CSS styles in the head section of an HTML page. Lesson Three will show the power of creating a separate CSS file and linking it to your HTML pages. We’ll explore the pros and cons of each method.

I'm styling with CSS

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.