Updated date:

Cascading Style Sheet: Focus on the Inline Style

Author:

Ms. Millar has been an online writer for over eight years. She is well-versed in website development and has created several websites.

Inline Styles

With the various methods of adding styles to your web document knowing the details of each method can be confusing.

Here we will go over the inline style of using CSS. We'll also create a document, style it and view it as a web page.

When To Use It

The inline style method is reserved for small, isolated, styling of text. Inline styling would not be employed to style a page of text. For a full page you would employ the internal style sheet or an external for multiple pages. Them, if you want to alter one word or attribute on that page, you would enter the change with an inline style at the item you wish to change.

We will create two documents. The first document we create will be a plain text HTML5 document that can be observed on a web browser page. Next, we will place an inline element in the documents and view it.

The second document we create we will write in the document an internal style and also, an inline style. You will observe how the hierarchy of styles work in this document.

If you have been following the other CSS articles and already have done the following exercise you can follow along for practice or skip down to inserting the inline elements.

Let's get started with the plain text document!

  1. Open a blank page in notepad or wordpad (Any document writer will work).
  2. Copy the code I created below into your page...

Plain HTML5

<!doctype html>
<html>
<body>

<h1>Plain Text Web Document!</h1>

<p>This is an HTML5 document, or page, which is plain as can be. Boring, dull, words. Let's change all that!</p>

</body>
</html>

Save Your HTML Document

Now save it as an HTML document by clicking File -->Save As-->in the pop up window change the file type to ALL FILES-->Name your document and save it with .html . Example: mycss.html or myblankcode.html . Make not of where you saved it.

Locate the document you just saved and double click on it so it will open in your browser. It should appear like the image below...

Plain HTML

Plain HTML

Inserting The Inline Elements

Now, let's add some inline elements to make this document stand out! And outstanding!

The code in the box below the quiz looks very much like what you've already written in you notepad document, but is it? Look closely at the code to see if anything has changed.

Recommended for You

What You Know

For each question, choose the best answer. The answer key is below.

  1. The code below adds an inline style element. Can you identify the difference between the first code, plain text document
    • There is no difference in this code and the previous plain text code.
    • Yes, the inline element beginning with has been altered.
    • The difference is the html> has been added.

Answer Key

  1. Yes, the inline element beginning with has been altered.

Again, copy the below exactly into your notepad document, save it as an .html .

Inline Style Added Code

<!doctype html>
<html>
<body>

<h1 style="color:orange;text-align:center;">Inline Styled Web Document!</h1>

<p>This is an HTML5 document, or page, in which you have entered and inline style.  You have told the browser, "I want this h1 line to be colored orange and it obeys your command!</p>

</body>
</html>

Display It!

Locate the file you just saved to your computer and double click on it. Below is what you should see on your browser.

HTML5 Styled With Inline Code

Document styled with inline code.

Document styled with inline code.

Further Work With Inline CSS

Let's take this inline work a little further. What if you have an internal (or external) CSS code on this document, but you decide the you would like the background to be orange instead of the h1 element orange, but the h1 will still be centered.

How do you write the code so an inline style will override an internal (or external) code while leaving the rest of the article as written by the other code?

Copy the code below into your notepad document, save it as .html . Locate it on your computer and open it.

<!doctype html>
<html>

<head>
<style>
body {background-color: orange;}
</style>
</head>

<body>

<h1 style="text-align:center;">Inline Styled Web Document!</h1>

<p>This is an HTML5 document, or page, in which you have entered and inline style.  You have told the browser, "I want this h1 line to be colored orange and it obeys your command!</p>

</body>
</html>

Inline And Internal Styles Working Together!

Inline style sheet working with an internal style sheet and an inline style code.

Inline style sheet working with an internal style sheet and an inline style code.

Everything In Order

Now that is an eye catching, exciting, webpage! And the two styles work together perfectly!

When using two CSS code styles in one document the inline style must be written after the internal style code. Otherwise the inline element will not work

What Do You Know?

For each question, choose the best answer. The answer key is below.

  1. What does the h1 element represent?
    • highest 1 . The highest part of a document.
    • It doesn't mean anything its just a place holder.
    • The h1 stands for header 1, the first and largest HTML heading type
  2. The various methods of using CSS code in documents can be used in the same document.
    • Yes, they can be used in a heirarchy method where internal comes after external and inline comes after internal.
    • No. They can not be used in the same document.

Answer Key

  1. The h1 stands for header 1, the first and largest HTML heading type
  2. Yes, they can be used in a heirarchy method where internal comes after external and inline comes after internal.

Related Articles