START A COURSE

The HTML and CSS Blog:

Introduction to CSS: Inline Styling

What You Will Learn in This CSS Lesson

This lesson is a great introduction to designing web pages and email newsletters using the Cascading Style Sheet (CSS) language. Learning the basic syntax of CSS properties and values will allow you to control the appearance of objects on web pages and email newsletters. You will become familiar with some of the most commonly used CSS properties used to change the appearance of text in just one short lesson. This first lesson focuses on designing fancy email newsletters, using inline styling. The next two lessons show you how to design multiple web pages by placing your CSS properties and values in an embedded or external style sheet.

CSS inline styles

Where Does The CSS Code Go?

The CSS language is devoted to controlling the appearance of everything on your web page and formatted emails. You can style your HTML elements with CSS to affect color, font, text size, and lots of other visual properties.

You might wonder where in your code the CSS will be written. Will it be a separate file? Will it be inside the HTML file? How does that work? Well, it depends. You can put CSS in three different locations. It can go in a separate file (with a .css extension) or in the HTML page itself, embedded in the head section, or inline in the body section. We’ve written three lessons to help you understand the pros and cons of each method. You can try out each method to learn their differences.

Inline CSS is actually the least-recommended way to insert your CSS styles for web page design. So why the heck are we starting with it? Because inline styling allows you to design email newsletters, and it’s a good introduction for those already comfortable working with HTML, perfect for someone ready to dab their toe into the waters of CSS. By learning about CSS properties and values you can design anything. The problem with inline styling is that it is not very efficient when you have many pages to style. In the next two lessons we’ll take the full plunge, and show you how to place those properties and values into a style sheet to format your entire web site with CSS. Those lessons will be a snap because you’ll already know about properties and values, the heart of the CSS language.

property and values

Let’s Try Some Inline CSS Styling

In this first lesson, you’ll try inline styling, with the CSS code affecting individual HTML elements within your web page. Inline styles go in the body section of the HTML page, where your content lives.

Choose a paragraph you’d like to style. For our example, we’ll style the main heading in this breaking news article:

We’ll add the style attribute to the tag we wish to format. You can add the style attribute to any HTML tag to alter its appearance.

The magic word here is style. That’s how you signal to the browser (or whatever is reading your code) that what follows is not HTML but CSS. Since all style elements of your site should be in cascading style sheets (CSS) rather than HTML, hopefully this is intuitive to you. (Likewise, if you see the word style in some HTML, you can bet that what is within is some CSS.)

style attribute

Inside the quotes we will begin writing in the CSS stylesheet language, almost like inserting Spanish inside an English sentence.

<hello Spanish=”Hola”>

Here we add the color property to make the heading purple.

CSS Properties and Values

The CSS language uses a series of properties and values to affect the appearance of HTML elements. The syntax looks like this:

If you study this pattern carefully, you can master the entire CSS language in one lesson. Notice that the property is followed by a colon (:) then its value. The semi-colon (;) is placed after the value and is especially important when you use multiple properties. It’s almost like the period at the end of the sentence; it finishes the value.

CSS property and value

You can add as many properties as you wish, like this:

property:value;property:value;property:value;

In this post I’m going to throw a lot of CSS at you, so you can see a tiny sample of what it can do and how it looks in a variety of circumstances. Before you get overwhelmed, know that we’ll have a lessons devoted to better understanding these CSS properties later in the tutorial.

P.S. this box was made with inline CSS

Let’s put this all together and alter the appearance of the heading in that article. We’ll make the heading appear in purple using the CSS color property.

If you want to change the alignment of text, add another property. Here is the CSS inline style to change the heading to purple and center it. Notice that you can insert more properties within the quotes.

Now we will add the CSS property to give the heading a background color, as if it had been highlighted with a yellow marker. That’s a total of three properties.

These examples have not included any spaces. Although using no spaces is perfectly correct, you also have an option to add a space after the colon, and after the semi-colon. Some find the code to be more human readable by adding spaces. I always worry about putting the space in wrong place and messing it up, so I find it safer and less typing to skip the optional spaces. Here is an example of that same headline written with the optional spaces included.

Let’s try another example. We’ll add the style attribute to the <h2> heading tag, and then insert within quotes our CSS properties and values.

We chose to make the second level heading grey, and all uppercase. What kind of properties will you use? You can modify many characteristics of text, such as text color, size, font, and alignment. There is a list of properties at the end of this lesson that summarizes many popular CSS properties for text formatting.

Style the Whole Page with the Body Tag

The body tag surrounds all of the page content on your HTML Page. Therefore you can style the body tag with CSS properties to affect the overall page. Let’s add a background color to the page. Note again the use of the word style followed by CSS inside quotation marks.

I include this example of changing the page color with CSS to show you that CSS styling is not limited to text formatting. It’s bigger than that. CSS is used to control every aspect of the appearance of web pages, including text formatting and the layout itself. We’ll show you what you can do with CSS in the upcoming CSS lessons.

The Downside of CSS Inline Styling

If you need to format a lot of text with inline styling you will notice a lot of repetition. Styling twenty paragraphs with inline styles requires repeating the properties twenty times. This also means the lengthy repetitive styling slows download time, and leads to weaker search engine optimization (SEO) as Google wades through all those visual properties looking for your page content. Changing the design is challenging with inline styling because you have to change repetitive values. Essentially, inline styling has many of the same problems as styling with HTML.

I'm styling. CSS is my kind of language.

When Should You Use Inline CSS Styling?

CSS inline styling has two big uses: formatted email newsletters and content management systems like WordPress. Formatted emails use inline styling heavily because some email readers like Outlook strip information out of the head section. All those fancy newsletters I receive are designed with inline styling. Inline styling can be handy when using content management systems (CMS) because they can override the CMS’s theme, allowing you to make small local design tweaks without affecting the global CSS stylesheet. You would use inline style if you want to style a single tidbit differently from the rest of the site.

Demonstrated in This CSS Lesson

However, we’ll go over these properties in further detail later in our tutorial. For now, I’ll leave you with this…

Try to Remember: property:value;

I’ll say it one more time!

property and values

What’s Next in Our CSS Tutorial

The next two lessons will give you the ability to style page content more efficiently by using embedded or external stylesheets. You’ll really feel the power of CSS when you separate the styling from the content.

You already learned a lot about CSS in this lesson because the pattern of properties and values is the same in all CSS styling, no matter whether it is inline, embedded, or external stylesheets.

Not feeling a bit overwhelmed? Want to see a bunch of examples of CSS? Here’s a handy chart of many CSS Properties for text formatting.

CSS Text Formatting Properties

 

 

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.