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 or have reached lesson 3 in 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  (This CSS Tutorial)
    Good for trying out a style and learnin CSS styles but in practice avoid using.
  • Internal Style Sheets sometimes called In page Style sheets - In the head section of a web page.   (Internal Style Sheets CSS Tutorial 2)
    Best method for a page that needs its own styles different from the rest of the site.
  • In a seperate CSS document.  (External Style Sheets CSS Tutorial 3) The best & most popular method for Multi page sites

 

Inline - within the HTML code

  • Inline Styles are located within the HTML tag similar the the older HTML methods of styling
  • Only the individual tag with the embedded styling is affected by the style.
  • used mainly for
  • If you want to style for example all <p> tags then use Internal Style Sheets or External Style Sheets

Internal Style Sheets

  • are located within the <head> section of the page

External Style Sheets

  • Located In a seperate CSS document(file) These are called "External Style Sheets" and have a .css extention to the filename
  • 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) within the headsection of the page

 

 

How to Use 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

<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, that acctually contains the CSS inline styling is affected by the style code. All other <p> tags on the page are unaffected

 

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 an HTML a

tag with inline CSS That styles the

with red text, yellow background,

<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: red;
       background: yellow;
       padding: 4px 0px 12px 14px;
       width: 300px; 
       font: 14px Arial, Helvetica, sans-serif;
       border-top: 3px solid #C90;
       border-right: 6px double #FC3;
       border-bottom: 12px groove #C60;
       border-left: 24px ridge #960;">
       This is  an HTML a  <p> tag with inline CSS That styles the </p> with red text, yellow background, 

How to use fonts Fonts

Fonts are the styles of typeface

In CSS you can select the fonts that you would like the browser to display. But and it's a big but those fonts must be available in the computer, tablet or phone for it to be displayed.

If it is not on the device then the device or browser default will be displayed

Remember that users can delete fonts from there device.

The following fonts are reguarded as Web Safe Fonts but are not 100% safe

Web Safe Fonts

  • Arial - Sans Serif
  • "Arial Black" - Sans Serif **
  • Courier - Serif & monospace
  • "Courier New" - Serif & monospace
  • Georgia - Serif  **
  • Helvetica - Sans Serif ##
  • Tahoma - Sans Serif
  • Trebuchet - Sans Serif **
  • Times - Serif
  • "Times New Roman" - Serif
  • "Verdana" - Sans Serif ** Designed to be very readable on screen

Followed by less safe ones

  • "Century Gothic" - Sans Serif
  • Geneva - Sans Serif
  • Lucida - Sans Serif
  • "Lucida Sans" - Sans Serif
  • "Lucida Grande" - Sans Serif
  • "MS Serif" - Serif
  • "New York" - Serif
  • "Palatino" - Serif
  • "Palatino Linotype" - Serif

"" Place double barrel font names in double quotes as above

** Not avaliable on Unix Systems

## Windows uses the very similar font Arial & not Helvetica

Why use Font Families with CSS

To  attempt to minimise this problem then it is best to use a font family, a prioritized list of font family names and/or generic family names

where you state the font you would like to be displayed, a backup font or fonts, then as a final backup state wether you prefer a serif font or a sans serif (without serif).  cursive, fantasy or monospace.    A serif is the small curved bit at a numbers or letters tips.

<p style="font-family: times, serif; "> Sample text formatted with inline CSS. </p>

Unusual or custom Fonts Can be embeded into your document

This technique is rather cumbersome and not covered in this tutorial.

Search Google for How to embed fonts