Cascading Style Sheets (CSS): Definition, Types & Examples

An error occurred trying to load this video.

Try refreshing the page, or contact customer support.

Coming up next: Computer Platforms: Definition, Types & Examples

You're on a roll. Keep up the good work!

Take Quiz Watch Next Lesson
Your next lesson will play in 10 seconds
  • 0:01 What Is CSS?
  • 1:34 Three Types of CSS
  • 2:47 CSS Instructions
  • 5:40 Lesson Summary
Add to Add to Add to

Want to watch this again later?

Log in or sign up to add this lesson to a Custom Course.

Login or Sign up


Recommended Lessons and Courses for You

Lesson Transcript
Instructor: Lonny Meinecke

Lonny teaches psychology classes at King University, and has a bachelor's degree in IT and a doctorate in psychology.

In this lesson, we introduce you to cascading style sheets (CSS), which are really common on the World Wide Web. We'll briefly go over what they are and what kinds are out there as well as show you some common examples.

What Is CSS?

Most web pages are made from HTML, or hypertext markup language. This is the standard way to decorate plain web text with fonts, colors, graphic doodads, and hyperlinks (clickable text that magically transports the user somewhere else). But websites can get really big. When that happens, HTML is a very hard way to do a very easy thing. CSS (cascading style sheets) can make decorating web sites easy again!

Think of CSS as a kind of computer dress code. CSS mainly does just one thing: it describes how web pages should look. Even better, CSS can be easily separated from HTML, so that the dress code is easy to find, easy to modify, and can rapidly change the entire look of your web site. Like a dress code at school, you can change your CSS and the look of your students will change with it. Style sheets allow you to rapidly alter entire websites as you please, just like a fashion craze allows people to change with the times yet remain the same people.

A really neat thing about CSS, is that it cascades. Each style you define adds to the overall theme, yet you can make the most recent style override earlier styles. For example, with CSS we can start by saying we want all of our text 12px (12 units) high. Later we can say we want it to be red, too. Still later, we can tell it we want one phrase to be in bold or italics, or blue rather than red.

Three Types of CSS

CSS comes in three types:

  • In a separate file (external)
  • At the top of a web page document (internal)
  • Right next to the text it decorates (inline)

External style sheets are separate files full of CSS instructions (with the file extension .css). When any web page includes an external stylesheet, its look and feel will be controlled by this CSS file (unless you decide to override a style using one of these next two types). This is how you change a whole website at once. And that's perfect if you want to keep up with the latest fashion in web pages without rewriting every page!

Internal styles are placed at the top of each web page document, before any of the content is listed. This is the next best thing to external, because they're easy to find, yet allow you to 'override' an external style sheet -- for that special page that wants to be a nonconformist!

Inline styles are placed right where you need them, next to the text or graphic you wish to decorate. You can insert inline styles anywhere in the middle of your HTML code, giving you real freedom to specify each web page element. On the other hand, this can make maintaining web pages a real chore!

CSS Instructions

Before we introduce CSS, let's briefly review HTML. A simple web page is made of tags. Everything must go between the opening and closing <html> tags. The <head> section contains invisible directions called meta information. The <body> section is where we put all the visible stuff. Here's a super simple HTML example:

simple html example

External CSS

Now here is a short, simple example of CSS using an external file (we'll call it 'stylish.css'). We're going to tell our web page to be white and to make our h1 heading, noted in our simple HTML example as 'John Adams', appear in red at 24 units high:

CSS Code as a Separate, External File
external css code

To unlock this lesson you must be a Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use

Become a member and start learning now.
Become a Member  Back
What teachers are saying about
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account