START A COURSE

The HTML and CSS Blog:

Introduction to CSS: Embedded Style Sheets

What You’ll Learn in This CSS Lesson

The next section of our tutorial will introduce you to cascading style sheets (CSS), the sister language to HTML that allows you to style your content. CSS is what makes the web beautiful. It’s the design counterpart to the practical nuts and bolts of HTML. Today you will learn to use CSS embedded style sheets to make changes to the visual appearance of web pages (colors, fonts, text formatting, etc.). Embedded styles are placed in the head section of the HTML page and can affect the entire page. You’ll find out the definition of selectors and declarations as well as the syntax rules of CSS.

CSS embedded styles

Why Are Embedded Styles Better than Inline Styles?

In the last lesson you got familiar with CSS inline styling. Although it was cool to alter the appearance of text with CSS properties, it was labor intense. Inline styling is very repetitive because you have to add the properties to every single element you are formatting, creating a lot more work. By putting the CSS in the head section, you can impact more than one paragraph with the same properties. For example, maybe you want to make twenty paragraphs appear in a dark green. Inline styling would require repeating the color property twenty times, on each and every paragraph. Embedded styles makes it much easier because you could make a single CSS rule that looks for all twenty paragraphs and colors them dark green, with a single line of code. Embedded style sheets are much more efficient than inline styling. This lesson will show you how to make your own embedded style sheet.

create embedded styles with the style tag

The Style Tag

There are only a few steps needed to add our CSS style sheet to our HTML page. The first step is to add a pair of open and close style tags (<style> </style>) to the head section. In this example, we’ve added the style tags just before the head section closes:

style tag with the type attribute

The Type Attribute

Note that the HTML is simply:

We add the type attribute to the style tag to inform the browser that this is a cascading style sheet (CSS).

Of course you can type this in as you go, I just want to keep separate the tag and its properties so that you understand everything you’re looking at.

Now we can add CSS style rules inside the style tags to control the appearance of the page content. The style tags are used to help the browser understand we are switching languages in the middle of the HTML file. It’s like a sign in the middle of an English article explaining that we’re switching to Spanish.

Now we’ll create our first CSS rule to format all the paragraphs that have the p tag (<p>) around them. The beauty of the embedded style sheet is that you can have properties affect lots of paragraphs with a single rule. We are going to use the tag name to tell the CSS rule to affect all paragraphs marked up with that tag.

property value surrounded by brackets

Tag Selectors

The first part of the CSS rule, called the selector, will describe the HTML tag we want to format. The selector is followed by a set of curly braces {  } which surround the visual properties. Our first rule looks like this:

CSS syntax

Multiple Properties

You can add as many properties as you want, depending on how many visual characteristics you wish to modify. All of your visual properties (and their values) go inside the curly braces {   }. For example, let’s add another property to our paragraph rule to change its text alignment to become right aligned.

Note that we’ve added two changes to all the paragraphs, with a single line of code:

  • All paragraphs will be blue
  • All paragraphs will be aligned to the right
text formatted with CSS

The text on the right has been formatted with a CSS rule, changing the text to appear in blue and right-aligned.

The number of properties is unlimited. Let’s add one more property, just for fun. The property called “text-transform” can change the case of your text to all uppercase, all lowercase, or initial caps.

The following CSS rule would make paragraphs blue, right aligned, and appear in all uppercase letters:

Here is an image that shows the plain paragraphs before and after CSS styling.

text formatted with multiple CSS properties

You can use as many properties as you wish when formatting text with CSS. The text on the right is now appearing in blue, right-aligned, and in all uppercase letters.

Should You Add Spaces to Your CSS?

Notice that there are spaces around the curly braces {  } to separate them from the tag name.

You can also have a space after the colon and semi-colon, if you wish. Although the web browser doesn’t care if you put the spaces in or not, humans may find it easier to read the properties and values with spaces. Here we have added the optional spaces to make the code more human-readable:

CSS: Selector and Declaration

The collection of visual properties is always enclosed within a set of curly braces {  }, and is called the declaration. The selector determines what is being styled. In this rule, the selector is the tag “p” which indicates all paragraphs in the entire web page that are marked up with the p tag ( <p>  in HTML).

selector { property: value; }

selector and declaration

Embedded Style Sheet Rules

You can have as many rules as needed in your embedded style sheet. Let’s add more rules to format the headings, h1 and h2. The new rules go inside the open and close style tags. Remember? It’s these tags we put in the header of the page:

Organizing Your Code to Make it Easier to Read

It doesn’t matter if you choose to put each property on a separate line or not. You can hit “return” or “enter” or “tab” without any impact on the appearance of the web page. Many people like to write their code so it is easy to read. Placing each property on a separate line is very popular, as it makes the code more human-readable.

Here we have made the style sheet easier to read by adding spaces, tabs, and placing each property on a separate line.

Note that the closing brackets are often put on their own line. This makes it easy to see at a glance that every CSS tag that you have opened has also been closed. If you simply put it on the end of the last line, you may add another line of code beneath it, forgetting to move the closing bracket. Again, this is not a rule, but is best practice for preventing mistakes.

brackets are part of the CSS syntax

Pros of Using Embedded Style Sheets

Putting the CSS inside the head tag was much more efficient than using inline styles. Rather than repeating the same properties over and over again inline, you can make one rule to affect many paragraphs. This lesson used tag selectors in the CSS rule, which meant the rule affected every example of that tag on the entire page. That’s very efficient if you have lots of paragraphs, which means fast-loading, easy-to-search, and accessible pages. It’s also easier now to update the content or design. The content updates will be easier because the HTML is very simple and uncluttered. And updating design will be a snap now because all the visual properties are in one place. It’s a win for everyone!

I'm styling with CSS

Cons of Using Embedded Style Sheets

So what’s the catch? Is there any downside to using embedded CSS style sheets? The big limitation is that embedded styles only affect one page. That might be fine for a one-page website, but isn’t very efficient if you have a hundred pages—or even twenty pages—to maintain.

Most sites use external style sheets, linked to all the pages in the site. External style sheets mean that one set of CSS rules can be shared by multiple pages. Only one set of rules to maintain and download. Now that sounds really powerful!

CSS style sheets

What’s Next: External Style Sheets

Check out the next lesson to learn all about placing our CSS rules into an external style sheet. Start styling your entire web site with one CSS document!

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.