Results per page:

Match: any search words all search words

Tutorial purpose

This first tutorial will show you how to style with CSS the following

This is a p HTML tag styled with inline CSS

this will be achieved in easy steps and full explanation of the code.

It is assumed that you have a basic knowledge of HTML. If not see our HTML tutorial

Starting with inline coding the tutorial will progress to the other places your code can be placed, as mentioned below.

Where to place CSS Code

CSS code can be placed in 3 different places

  • In line - within the HTML code  (Ths Tutorial)
  • In the head section of a web page.   (Tutorial 2)
  • In a seperate CSS document.  (Tutorial 3) 

 

In a seperate CSS document(file)

  • These are called "External Style Sheets"
  • The best method for muti page web sites which require a consistant look is to place the Cascading Style Sheets code is in a seperate CSS document(file)
  • Normally every page on the web site links to this file
  • To use the "External Style Sheet(s)" Every page you wish to style with The "External Style Sheet(s) styles is linked to the "External Style Sheet(s)

 

In the head section of a web page

  • Internal Style Sheets are located within the <head> section of the page

Inline Styles External Style Sheets

 

Inline - within the HTML code

  • Inline Styles are located within the HTML tag similar the the older HTML methods of styling

 

Inline CSS Style

Step 1 - Basic HTML with No styling

Start a new HTML page and save it as css-exercise-01.htm

You need to work with an HTML editor that allows you access to the code rather than a 'What you see is what you get '(WYSIWYG) editor.

Depending on your editor the code similar to the following may already be included in a New document

  HTML Code
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

 

    <html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html> 

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body

 

 

 

 

Enter the following code

  HTML Code
<p>This is an p HTML tag without style./p>

Save then view in a browser. You should see:

This is a p HTML tag without style.

Step 2 - Adding colour Declarations

In this step we change the default text colour from black to a dark red and add a colour to the background. In the code the American spelling color is used.

This step will produce the following.

This is a p HTML tag styled with inline CSS

Copy The code you entered in Step 1 and add additional code within the <p> tag only & add some additional text as follows:

  HTML including inline CSS Code
<p style="color: #900; background: #ff3;">
This is a  p HTML tag styled with inline CSS </p>

Save and check in a browser

 

 

Step 3. Examine CSS Inline Style Code

The above code can also be written with additional optional white space as follows

  HTML including inline CSS Code
<p style="
color: #900; 
background: #ff3;
">
This is a  p HTML tag styled with inline CSS </p>

This layout allows easier code explanation

Code Explanation, Style Rules

A CSS style rule consists of a a selector, and one or more declarations:

<p

  • Selectors are always an HTML tag in inline styling
  • Inline CSS code is placed within the HTML tag, e.g. after the <p and before the >
  • In CSS inline styling only the HTML tag, p in this case, containing the CSS inline styling is affected by the style code

 

style=" "

  • Lets the browser know that this is a CSS inline style
  • Dont forget the closing quote mark " and the

 

Declaration, Property & Value

color: #900;

background: #ff3;

  • This sample contains 2 style Declarations, for clarity these on seperate lines
  • Each of these Declarations consists of a Property & a Value
    • Properties end in a Colon :
    • Values end in a Semi Colon ;

 

>

Closes the HTML tag

HTML including inline CSS Code called rules

This is a p HTML tag styled with inline CSS

 

This is a p HTML tag styled with inline CSS

<p style= "color: #009; background: #ff3; padding: 4px 0px 12px 14px; width: 300px; font: 14px Arial, Helvetica, sans-serif; border-top: 3px solid #C90; border-right: 6px solid #FC3; border-bottom: 12px solid #C60; border-left: 24px solid #960; ">This is a &lt;p&gt; HTML tag with inline CSS </p>

 

<p style=
"color: #009;
background: #ff3;
padding: 4px 0px 12px 14px;
width: 300px; font: 14px Arial, Helvetica, sans-serif;
border-top: 3px solid #C90;
border-right: 6px solid #FC3;
border-bottom: 12px solid #C60;
border-left: 24px solid #960;">
This is a &lt;p&gt; HTML tag with inline CSS </p>