CSS

Image
Screenshot fo how to implement CSS style files.

Next, in the "css" folder create a file called "styles.css".

We have to link this to the HTML page by using the <link> tag in the <head> of the document. In the "href", type in the file path similar to what we did with the images: <link rel="stylesheet" href="css/styles.css">

This is where we will create styling on the web page. Let's start be changing the background colour by selecting the <body> and changing it to red:

body {

background-color: red;

}

Now lets check what it looks like in the browser.

Next, let's change font styles of the heading and paragraph by adding this:

h1 {

    font-family: 'Courier New', serif;

}

p {

    font-family: Arial, sans-serif;

}

Image
Screenshot of the css file in VS Code.

This will change the <title> and <p> tags to different fonts. Let's see what that looks like in the browser.

 

Previous Page | Next Page