FriconiX
Free collection of beautiful vector icons for your web pages.

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:

Online CSS style syntax

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:

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

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:

See also


Last update : 01/25/2020