Lesson 1: Inline Styles

Overview

Inline styles are the simplest type of styling in CSS, and only allow us to style one element at a time. However, they provide a good introduction to styling and give us a convenient means to clearly define the terms used in CSS styles.

An Example of an Inline Style

Inline styles are applied via the style attribute. The style attribute is universal in that it can be applied to any element and uses a specified format for its values that requires some terminology. The basic designation used on a style attribute is called a declaration and consists of a property and a value separated by a colon. To complete the declaration, a semicolon is added at the end of it.

In our first example, we have applied a single style to a paragraph element. The declaration is made up of the property color and the value red. These are separated by a colon with a semicolon placed at the end of the declaration. This declaration sets the color of the text inside the paragraph to red.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body>
    <p style="color:red;">Our Father, who art in heaven,<br />
    hallowed be thy name; thy kingdom come,<br />
    thy will be done, on earth as it is in heaven.<br />
    Give us this day our daily bread<br />
    and forgive us our trespasses,<br />
    as we forgive those who trespass against us<br />
    and lead us not into temptation,<br />
    but deliver us from evil. Amen.<br /></p>
  </body>
</html>

With Ordinary HTML Styling and with CSS Styling

Using Multiple Styles on One Element

Within a style attribute, we can put multiple declarations to apply multiple styles to an element. In this example, we use two style declarations on a paragraph to change both the foreground and background colors. We use the declaration, color:darkolivegreen;, to set the text color to dark green and the declaration, background-color:mistyrose;, to set the background color to a light red. Notice that a semicolon is used in each declaration to indicate the end of the declaration.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body>
    <p style="color:darkolivegreen;background-color:mistyrose;">
    Hail Mary, full of grace, the Lord is with thee.<br />
    Blessed art thou among women<br />
    and blessed is the fruit of thy womb, Jesus.<br />
    Holy Mary, mother of God, pray for us sinners<br />
    now and at the hour of our death. Amen.<br /></p>
  </body>
</html>

With Ordinary HTML Styling and with CSS Styling

Placing Elements

Styling Multiple Elements

We can use inline styles to style multiple elements at the same time. In this example, we have two paragraphs inside a div element. We use an inline style to set the background color of the div to beige and two inline styles to the set the colors of the text in the paragraphs to orange and indigo. Since the div contains the paragraph elements it sets the background color of both paragraphs to beige.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body>
    <div style="background-color:beige;">
      <p style="color:orange;">
        Glory be to the Father,<br />
        and to the Son,<br />
        and to the Holy Spirit.</p>
      <p style="color:indigo;">
        As it was in the beginning,<br />
        is now, and ever shall be,<br />
        world without end. Amen.</p>
    </div>
  </body>
</html>