This comprehensive tutorial explains CSS Cascading Style Sheet coding in an easy to understand way with the novice user at mind. An easy to follow tutorial with step by step instructions using a working example of a small web site we bulit in the Basic HTML Tutorials Part 1 to 3. Using full color screen shots will enable you to write and apply CSS to your web site by only using the MS Notepad editor. This tutorial will explain how to create a full functional web page for the world wide web using Cascading Style Sheets and HTML . It does require prior knowledge of basic web editing (web coding) learned in the HTML Tutorial Part 1, 2 & 3.
Updated version September 2015
An Introduction to CSS:
1. CSS Selectors
2. How CSS is written
3. Locations to place your CSS code
4. Creating a style rule for the headline <h1> tag
5. Adding to our ID style rule
6. Trouble shooting
Updating your Photo Page to show CSS formatting
1. Insert style sheet link into the photopage.html
2. Applying class and ID selectors to photopage.html
Other useful CSS Style Rule Properties and Values
Cascading Style Sheet CSS Tutorial:
Cascading Style Sheets (CSS) is a style sheet language describing the appearance (formatting) of an html document like background images, font styles and sizes. It is used; to decrease the amount of source code on a page allowing faster download speeds; to improve different web browser compatibility; to enable multiple pages to share the same formatting; an increased range of formatting options and quicker synchronized updating of multiple web pages. For this reasons html formatting has been phased out (depreciated) and is being replaced by CSS. This tutorial uses the MS notepad editor to create an external Cascading Style Sheet file (.css).
To follow these instructions you need a basic knowledge of HTML (Hyper Text Mark-up Language) or have completed the 3 Basic HTML Tutorials, which you can download from our web site. (See links under the Tutorials Menu)
Download instructions in Adobe Reader .pdf format 1.8 MB
If you have prior html knowledge you can download images and web pages used in this tutorial below:
Click to download html pages and images used in this tutorial
Extract ZIP file into a folder in your Documents.
All Creative Designs provide a Web Site Design and Development service with a difference and produce professional and innovative designs to your requirements. Every web site is unique and created without the use of pre-generated templates. We are developing interactive and informative web solutions for non-profit organisations by constructing dynamic member data bases with full administration functions. All Creative Designs services the Nambucca / Coffs Harbour area and NSW.
Tutorials, web designs and all images copyright ©2017 by www.allcreativedesigns.com.au world wide rights reserved.