Lesson 2.2. Inline CSS

Syntax

When the style of a tag has to be modifyed promptly, the online syntax allows you to insert CSS into the style = "" attribute of this tag. CSS style properties are separated by semicolons. The following diagram illustrates the general syntax of the online style:

In this illustration, heading 1 titles and their descendants will be blue and formatted in italic.

Example

The following code presents some example of CSS formatting:

<span style="color:red">Change the color to red</span><br>
<span style="background-color:#add8e6">Blue background</span><br>
<span style="font-style: italic;">Italic text</span><br>
<span style="font-weight: bold;">Bold text</span><br>
<span style="font-size: 200%;">Big size text</span><br>
<span style="text-decoration: underline">Underlined text</span><br>
<span style="text-decoration: line-through;">Strikethrough text</span><br>

Here is the result in the browser:

Try it online

Cascading styles

Let's considere the following example:

<div style="color:red; font-size: 200%;">
    A big red text<br>
    <span>Another big res text</span>
</div>

The previous code displays the following page in the brower

Try it online

We see that the style applies to the tag in which it is defined, but also to all his descendants. It is from this concept that the concept of cascading style sheets.

Online CSS is handy for one-time editing, but it weighs down the content of pages. This solution is rarely used, and developers usualy prefer placing the CSS in the header or in external files.

Exercice

Add inline CSS to colorize the following rows in a rainbow table:

<table>
    <tr><td>Purple (#8F00FF)</td></tr>
    <tr><td>Blue (#0000FF)</td></tr>
    <tr><td>Green (#00FF00)</td></tr>
    <tr><td>Yellow (#FFFF00)</td></tr>
    <tr><td>Orange (#FF7F00)</td></tr>
    <tr><td>Red (#FF0000)</td></tr>
</table>

Here is the expected result:

Try online

Solution

Lesson 2.1 Summary Lesson 2.3

Lesson 2.2. Inline CSS

Syntax

Example

Cascading styles

Exercice

See also