Css Course

 

Inline CSS Codes

Some CSS codes can be used in the of the HTML document without any reference to them in the CSS code. One such code will let you add color to the background of some text.

Let's try this in our sample CSS web page.

<HTML>
<HEAD>
<TITLE>My First CSS Web Page</TITLE>
<STYLE TYPE="text/css">
BODY { background: #000000 url(stars.gif); }
A:LINK { color: #ffffff; }
A:VISITED { color: #ffff00; }
A:ACTIVE { color: #ff0000; }
H1 { font-size: 24pt;
        font-weight: bold;
        color: #66ccff;
        font-style: italic;
        text-align: center; }
H2 { font-size: medium;
       font-weight: 200;
       color: #ffffff;
       font-style: normal;
       text-align: left;
       text-decoration: underline;
       letter-spacing: 2mm;
       font-family: comic sans ms; }
P { font-size: 15pt;
       color: #7fffd4;
       text-align: center;
       margin-top: 100px; }
.par2 { font-size: large;
           color: #000000;
           margin-right: 20px;
           margin-left: 90px;
           background-color: #ff7f50; }
#image1 { background-color: purple;
           margin-left: 170px;
           margin-right: 170px;
           border-color: red green blue orange;
           border-style: ridge;
           border-width: 50px;
           padding: 10px; }
</STYLE>
</HEAD>
<BODY>
<H1>My First CSS Web Page</H1>
<BR><BR>
<H2>Learning With Draac.Com</H2>
<P>This is an example paragraph using CSS<br>
it has it's own text and alignment attributes.<br>
With these attributes you can set how the text<br>
will look and exactly where on the page it will appear.
</P>
<P CLASS="par2">
This is our second paragraph<br>
which is using a CLASS to govern<br>
how it looks and where it appears<br>
on the web page.
</P>
<P ID="image1">
<IMG SRC="toucan2.gif" WIDTH="225" HEIGHT="179" ALT="toucan">
<P STYLE="background-color: #ff0000; color: #ffffff">
Here is some text in a color set by the inline code<br>
and a background color also set by the inline code.
</P>

</BODY>
</HTML>

Click To View Our Page Here