Lesson 8 - Inline Style

Cascading Style Sheets are currently the preferred method of formatting anything that goes on a web page. CSS has deprecated many HTML tags, several of which you already studied, including the Font tag.

Style is complex. It uses a new language in addition to HTML. Although inserted within HTML, when the browser sees it, it assumes everything within the Style attribute is not HTML, but written in Style.

The syntax for the Style attribute is style="property:value", where property is what is being formatted (for instance, background-color) and value is the format value (for instance, yellow). (try it)

To change the font-family of one paragraph, add the following attribute:

. . .
<p style="font-family:arial"> . . . </p>
. . .

Now, the text in that paragraph will be "arial".

The combination of property:value is called the Style Declaration. If you are adding one or more Style declarations on the fly, be sure to end each one with a semicolon.

. . .
<p style="font-family:arial; font-size:10pt; font-weight:bold; color:red"> . . . </p>
. . .

Keep sample.htm for future use. Open a new blank HTML file and save it as sample2.htm. Cut the following and paste it in sample2.htm.

<p style="font-family:arial">
  Arial font.  Crov miquides tipont, fe ecrop unuspore dasiquid. 
  Pamibreus in napl favic. Istobreus ele debacrum est.</p>
<p style="color:red">
  Font color red.  Crov miquides tipont, fe ecrop unuspore dasiquid. 
  Pamibreus in napl favic. Istobreus bresomes ele debacrum est.</p>
<p style="background-color:yellow">
  Background color yellow.  Crov miquides tipont, fe dasiquid. Pamibreus in 
  napl favic. Istobreus dub ito bresomes ele debacrum est.</p>
<p style="border:1px solid black">
  Black border.  Crov miquides tipont, fe ecrop unuspore dasiquid. Pamibreus 
  in napl favic. Istobreus dub ito bresomes ele debacrum est.</p>
<p style="text-align:right">
  Text align right.  Crov miquides tipont, fe ecrop unuspore dasiquid. 
  Pamibreus in napl favic. Istobreus dub ito bresomes ele debacrum est.</p>
<p style="font-family:arial; font-size:10pt; font-weight:bold; color:red">
  Small, red, bold Arial font.  Crov miquides tipont, fe ecrop unuspore dasiquid. 
  Pamibreus in napl favic. Istobreus ito bresomes ele debacrum est.</p>

sample2.htm will be saved for your future reference. Meanwhile, open yet another blank HTML file for experimenting. Call it experiment.htm. Now, paste the same thing in experiment.htm.

In the next several lessons, you will learn many Style declarations. Don't worry too much about remembering what each can do in this lesson, but play with some of the declarations in the Style attributes in experiment.htm, and see what happens. Try adding some paragraph tags, div tags, span tags and H1-H6 tags with text. Add inline Style to each.


In this lesson, we learned about Inline Style declarations
By now, your sample2.htm file should look like this.

Lesson 7 Colors   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 9 CSS/Fonts

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2017, by Bill Sanders, all rights reserved.
This domain had 4,015 different visits in the last 30 days.
435,581 hits on this domain since 24 Nov 2006.
http://www.sandersongs.com/HTMLcourse/Lesson08.php
This page was last modified on our server on 26 Sep 2013
and last refreshed on our server at 3:57 am, MST
This file took 0.00905 seconds to process.