Login
Copyright

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
 Replay
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

Timeline
Autoplay
Autoplay
Create an account to start this course today
Try it free for 5 days!
Create An Account

Recommended Lessons and Courses for You

Lesson Transcript
Instructor: Lonny Meinecke

Lonny is a PhD student, a part-time teaching assistant/Sennseis for positive psychology, and has a bachelor's degree in IT and a master's degree 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
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

In the sample file, the top line is a comment and doesn't do anything. The next part (called body) tells the web page what background color to use for the body section. Right after that, the h1 part says we want our largest heading (h1) to be the color red and its font size to be 24 units high.

Now, to include this external CSS file ('stylish.css'), we have to include a link for it within the <head> section of our blank web page, as shown on screen:

How to Include External CSS
how to include external CSS

Internal CSS

We don't need to include an external CSS file just to decorate one web page. We can just define our styles at the top of the page, in the <head> section. Here's a quick example in which we're making our heading (h1) blue at a font size of 28 px:

Internal CSS Example
internal css example

Inline CSS

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

Register for a free trial

Are you a student or a teacher?
I am a teacher
What is your educational goal?
 Back

Unlock Your Education

See for yourself why 10 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back

Earning College Credit

Did you know… We have over 95 college courses that prepare you to earn credit by exam that is accepted by over 2,000 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? Study.com 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 free for 5 days!
Create An Account
Support