CSS Lesson 3: Adding a Header

Hi Everyone!

In our last CSS lesson we learnt how to add background colors and containers. Today we will be learning how to make a header. To make a header (similar to containers) we need to link our CSS code back to our HTML code. For this we will need two files, an ‘index.html’ file and a ‘stylesheet.css’.

Firstly let’s write our CSS code. Using CSS we can customize our header like so.

h1 {
font-family: Courier;
font-size: 20px;
color: blue;
}

Next we’ll write our HTML code. Through this code we’ll link our two files together and we’ll also write what we want our header to display.

<link href”stylesheet.css” rel=“stylesheet” type=“text/css”>
<h1>Yay! You made a heading.</h1>

That’s it! If you have any questions about this code feel free to leave a comment below. Happy coding! 🙂

Advertisements

CSS Lesson 2: Background Colour and Containers

Hi Everyone,

As you may have noticed my previous post about CSS was written on an HTML document. Although today we will be using a CSS document!

Today we will be learning how to change the background colour and create containers in a CSS document.  When creating containers we will need to also need to create some code in an HTML document.

Let’s start off with some simple code to change our background colour.

body {
background-color:#FF9999
}     

Now  let’s get started on our containers. Containers can be used for organising your web page into different sections, or just for show.

body {
background-color:#FF9999
}     

.container {
width:860px;
min-height:400px; 
background-color:white;
margin:0 auto;
padding:20px;
}

Now we need to write some code into an HTML document so that the container will actually show up on our web page.

<body>

<div class="container"> 
</div>

</body>

Next time we will work on creating a header in our code.

CSS Lesson 1: Basic CSS

Hi Everyone,

Previously we have been working with HTML, which is basically used for creating the content on your website. But, we haven’t yet talked about CSS. CSS stands for Cascading Styles Sheets, in other words you can use CSS to  your website!

If you would like some more information about how CSS works click here. 

Here is an example of how to use CSS through a HTML document to change your background colour.

<!DOCTYPE >
<html>
<head>
<style>
body { 
       background-color: yellow;
}
</style>
</head>