Skip to Main Content or Page Contents

CSS Tutorial 1. CSS Code location

In line: within the HTML code
Internal:In the head section of a web page.
External: In a separate CSS document

Results per page:

Match: any search words all search words

Tutorial purpose

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

  • body
  • h1, h2, h3
  • p
  • span

You will learn the basics of applying inline styles so that you Know:

  • How to change background colours
  • How to change text colours and fonts
  • How to style borders
  • How to change sizes
  • How to style basic positioning using margins & padding

Example of using the above

This example is only to demonstrate the use of the some of the styling techniques of CSS rather than producing a result that you would use.

This is a p HTML element styled with inline CSS

Results such as this 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 Inline Code

  • In line - Within the HTML code  (This CSS Tutorial)
  • Inline styling is very good for trying out a style and for learning CSS styling
  • Inline styling is bad because it only styles the element it is placed in leading to a large amount of repeated code.
  • In practice avoid using.

If you want to style for example all <p> tags then use Internal Style Sheets or External Style Sheets

How to Use Inline CSS Style follows shortly

Step 1 - Create some Basic HTML with No Content & No Styling

Open your HTML Editor and create a new HTML document and view the document in the HTML editors Source view window. Different editors have there own name for this window

The source code produced should look like:

Example

<!DOCTYPE>
<html>

	<head>
	 <meta charset="utf-8">
	 <title>Untitled Document</title>
	</head>

 <body>
	 <p>Replace this line with your Page Content</p>
 </body>

</html>

Step 3. Add some Basic HTML Elements to experiment with

With the inline-css-exercise-01.htm still open in the Editors Code View window (Editors may give this window a different name)

Enter the following HTML Code Elements in between between the opening & closing <body>      </body> tags

Copy/Paste or Enter the following

<h1>My Main  Heading h1 only 1 allowed</h1>
<p>Paragraph 1.</p>
<p>Paragraph 2. This is a much longer paragraph so that it continues on more that 1 line. Observe what happens when the browser window is narrowed and widened. The effect changes depending on the settings for this paragraph.</p>
<h2>My h2 Sub Heading. Sub Headings More than 1 allowed</h2>
<p>Paragraph 2</p>
<h3>My h3 Sub Heading</h3>
<p>My third paragraph.Another longer paragraph so that it continues on more that 1 line. Observe what happens when the browser window is narrowed and widened. The effect changes depending on the settings for this paragraph.</p></p>
<p>My third paragraph.</p>

Step 2 - Save

Save it as inline-css-exercises.htm

 

It is important to save a new document as soon as it is created, so that the editor knows the documents location.

 

Regularly save your work

Step 3 - Open in your Web Browser

Open the saved file inline-css-exercises.htm in your browser and check that it is correct

Click here to view my inline-css-exercises.htm

CSS inline Syntax

With a single property:value;

<HTML-tag style ="property:value; ">This is my Content</tag>

With multiple property:value;

<HTML-tag style ="property: value; property: value; property: value;">This is my Content</tag>

How to Style the Background colour.

Exercise 1

Set the

  1. background colour of the body element to lightgray
  2. background colour of the h1 element to yellow
  3. background colour of the Paragraph 1 p element to red

The syntax to use is

property: value;

as follows:

background-color: lightgray;

background-color: yellow;

background-color: red;

Copy/Paste or Enter the following

<body style ="background-color: lightgray; ">
<h1 style ="background-color: yellow; " >My Main  Heading h1 only 1 allowed</h1>
<p style ="background-color: red; " >Paragraph 1.</p>

Because only 1 body element is allowed you MUST replace the current body element with the new body element.

Because of Googles rules The same applies to the h1 heading

You cant add the

<p style ="background-color: red; " >Paragraph 1.</p>

just under the current Paragraph 1. Allowing you to see the original version with the new styled version

Examples of property:value; pairs

color: white;

or

color: #000;
  • Sets the Text Colour to white or #FFF in Hex.
 background-color: black;

or

background-color: #000;
  • Sets the Background Colour of the Element to black or #000 in Hex.
width: 30px
  • Sets the Width of the Element to 30 pixels
width: 50%
  • Sets the Width of the Element to 50 percent of the parent Element, in this case the body element
max-width: 95%
  • Sets the Maximum Width of the Element to 95 percent of its parent Element
min-width: 30px
  • Sets the Minimum Width of the Element to 30 pixels.
 padding: 6px;
  • Sets the padding, ie the space, to 6 pixels on all 4 sides of the content.
padding: 2px 4px;
  • Sets the padding, ie the space, to 2 pixels on the top & bottom & 4 pixels on the right and left sides of the content.
padding: 1px 2px 3px 4px;
  • Sets the padding, ie the space, to 1, 2 3 & 4 starting on the top then going clockwise around the sides of the content.
margin: 6px;
margin: 2px 4px;
margin: 1px 2px 3px 4px;
  • Sets the Margin, ie the space, following the same rules as Padding. Except that the margin is placed on the Outside of the border, even if the border is set to ) pixels
  • Minus Margins
    • If used on Static Elements, ie elements without floats. Floats are used later in this tutorial with div elements
      • Are set using the - minus sign e.g. -10px
      • Top & Left negative margins MOVE the element in that direction.
      • Bottom & Right negative margins MOVES the FOLLOWING elements towards the original element.
      • Depending on the size of the negative numbers OVERLAPS can occur.
    • Slightly more tricky if used with the float value
margin: 0 auto;
  • the auto value in this example affects the right & left margin and sets them to the same value. Thus horizontally centring the element.
border: 3px dashed black;
  • Sets the Border of the Element to a black dashed line with a width (thickness) of 3 pixels, 
font-family: Verdana, Geneva, sans-serif;
  • If the first font you select, Verdana, is not present on the users computer, the browser tries the second font Geneva, if that fails the browsers default sans-serif font will be used.
  • Therefore popular fonts should be used
  • To use unusual fonts it is best either produce a graphic of the text or to embed the font. Not all fonts can be embedded. These are more advanced techniques

HTML element

Any HTML Element. In this Lesson we will use the <body>, <p> paragraph and some of the headings <h1>, <h2> etc.

Curly Brackets { }

Only the curly brackets. They must be used.
Do not use ( ) or [ ]

Property

There are 100s of different properties that style color (CSS uses the American spelling), sizes, fonts, text styles, borders, padding, margins, positioning etc.

Value

Each property has a selection of values

E.g. Color has 140 different color names such as red, green, blue, yellow, cyan, magenta, white, black, lightgray etc. With a total of over 16 million colours using the hex color system e.g. #000000 to #FFFFFF or in shorthand where the hex number pair are the same #000 to #FFF

The Look of an Element

ALL Elements look like a box. In the centre is the content, this can be surrounded by padding, then a border, then on the outside 4 margins which is space between elements

All these sections can be styled with CSS

See a diagram of the Box Model

Step 5 - Adding a colour Declarations


In this step we change the default text colour from black to blue, and change the colour of the background to white.

In the declaration 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:

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

Example


<p style="color: white; background-color: blue;">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:

  • Selectors are always an HTML tag in inline styling in the examples case, the <p> tag
  • 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 actually contains the CSS inline styling is affected by the style code. All other <p> tags on the page are unaffected
style="your styling go here"
  • Lets the browser know that this is a CSS inline style
  • Don't forget the closing quote mark " and the

Declaration, Property & Value

The above sample contains 2 style Declarations, for clarity these are shown below on separate lines

color: #900;
background-color: #ff3;
  • 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

Adding a border

Border require a Width (thickness), a Style, and a colour

Border Widths are usually expressed in pixels

Border Widths are usually expressed in px (pixels), rem, em or as thin, medium, or wide.

The full range of widths are

  • px    (pixels)
  • pt    (points)
  • in    (inches)
  • cm    (centimetres)
  • mm    (millimetres)
  • pc    (picas)
  • em    (em)
  • ex    (x-height)
  • thin
  • medium
  • thick
  • %    (percentages)
  • rem  (root em) This is a new unit

none The shortest method is border: 0 . That's a Zero. Useful to use to remove an automatic blue border round an image used as an hyperlink

solid      style="border-style: solid;

dotted   style="border-style: dotted;

dashed  style="border-style: dashed;

double  style="border-style: double;

The following Border Styles give a 3D effect. Use the same border colour for all 4 sides for the best effect.

groove style="border-style: groove;

ridge    style="border-style: ridge;

inset    style="border-style: inset;

outset  style="border-style: outset;

This is an HTML a <p> tag

tag with inline CSS That styles with red text, yellow background,

<p style="color: #009; background-color: #ff3; padding: 4px 0 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-color: yellow;
       padding: 4px 0 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;">

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 regarded 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 available 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 embedded into your document

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

Search Google for How to embed fonts


© tutorials4u.com
HTML Tutorial by John McGuinn.