Intro to HTML, CSS and JavaScript Part 2: CSS

 

 

In part 1 we learned how to use html tags to add elements onto a web page. In this tutorial you will see how to set up a style sheet to change the properties of the elements.

Again, for more in-depth information check out the tutorials on www.w3schools.com.

 

 

Background:

As web sites got more complicated developers needed an easy way to control the way html elements look on a web page without having to specify it every time. CSS solves this problem by letting you set the properties for a specific tag for all web pages that use the same style sheet.

 

A style sheet lets you assign properties like colour and size to any html document that includes the CSS page in its head.

 

You can attach a style sheet, called demo.css, that is saved in the same folder as your html document like this:

 

<head>

<link href="demo.css" rel="stylesheet"/>

</head>

Inside a Style Sheet

Simple style sheets list the tags you want to style and the properties you want to set like this:

 

 

body{

background-color:black;

}

 

 

h1{

color:green;

font-size: 300%

 

}

 

 

 

button{

color: grey;

height:100px;

width :100px;

}

 

Sets the page background to black

 

 

 

Sets the h1 elements to green

 

 

 

 

Sets the size and colour of the buttons

 

For a complete list of properties that can be changed check out http://www.w3schools.com/cssref/default.asp.

Try This:

 

Make a style sheet to modify the demo.html document from part 1 (the alligator one). Make the style sheet in note pad and call it demo.css. Make sure it is saved in the same folder as demo.html.

 

        Make the background blue

        Make the h1 text yellow

        Make the buttons Orange

        Make the paragraph text white, 150% and change the font to chiller like this:

        Set the size of the buttons to 200px

 

font: 15px Chiller, sans-serif;

 

Next Up: JavaScript