HTML STYLE WITH CSS

HTML | CSS STYLE SHEETS

ON THIS PAGE
SECTION 1 | FOLDER STRUCTURE
SECTION 2 | CREATE YOUR CSS FILE
SECTION 3 | LINK THE FILE TO EACH PAGE

ALSO IN THIS TOPIC
HTML HOME
GETTING STARTED
HTML TAGS AND ELEMENTS
PAGE STRUCTURE AND LAYOUT
FORMS AND USER INPUT
YOU ARE HERE | CSS WITH HTML
HTML QUICK REFERENCE

WHAT IS CSS

You can think of a CSS as a way of setting a template for the styles that you want each of your webpages to inherit. You can set the fonts, colour, positioning of items and much more. This saves you time when producing each webpage and ensures all your pages are consistent in design.

Using a CSS is especially useful when big teams of developers are all working on the same website, it ensures they all produce pages with a consistent style.

This section will look at creating an External style sheet and attaching it to HTML pages. Along with giving a quick reference guide for frequently used styles.

SECTION 1 | FOLDER STRUCTURE

To make your life easy further down the line it is a good idea to set up the correct folder structure now, for how you are going to save your work. Having this folder structure will make it easy for various pages and elements of your website to link to each other.

Choose where you are going to save your work.
1: Create a folder to hold you work, call it anything you want - keep it meaningful (myWebsite).
2: Inside the folder you created, create a subfolder called 'templates'
3a: Create another folder inside the first folder your created, call it 'static'
3b: Inside the folder called 'static' create another folder called 'css'
3c: Inside the folder called 'static' create another folder called ' images'
See the example folder structure below.

When you create your css file, save it in the css folder.

SECTION 2 | CREATE YOUR CSS STYLESHEET

In the style sheet we can set up the desired styles for each of the tags we use in the HTML pages. Below we will give an example of setting up a style for the <p> tag and the <h1> tag. Set up these three styles, body for the background, P for a paragraph and H for a heading, then save your file in the css folder you created and ensure you save it as a css file for example myStyleSheet.css.

Copy the sample code above and change some of the values. Next we need to attach the style sheet the the HTML page. If you have not already created a HTML page create one like the one shown below and save it in the main folder your created - not in any of the sub-folders.

SECTION 3 | ATTACH YOUR STYLESHEET

When you have made you HTML page you will notice if you open it in the browser the text will appear the the pre-set fonts and styles. If you attach your style sheet the HTML page will inherit the styles you set. To do this add the following line of code to your HTML page to link to the style sheet.

<link rel="stylesheet" href="static/css/myStyle.css">

Below is an example of where to link the CSS sheet within each of your HTML pages.

Note: If you did not follow the folder structure suggested then give the full file path in the href details. If you did follow the folder structure suggested then your code should look something like this.

<html>
<head>
<title>MY WEBSITE</title>
<link rel="stylesheet" href="static/css/myStyle.css">
</head>
<body>
<p>Hello World</p>
<h1>My first webpage</h1>
</body>
</html>

Once you have saved all your work the website should now inherit the styles you set on the CSS document. If you need more help, watch the video at the top of the page. If you still need more help please feel free to download the example below.

At this stage you might want to copy any of the css you wrote directly into the HTML doc and place it in the CSS doc. Any styles you leave in the HTML doc will overwrite the inherited styles from the CSS doc.

NAVIGATION

GETTING STARTED | Your first webpage
HTML TAGS AND ELEMENTS | An introduction to common tags and elements
PAGE STRUCTURE AND LAYOUT | The concepts of structuring your page
FORMS AND USER INPUT | Various methods of user input such as text box and drop downs
CSS WITH HTML | The relationship between HTML and CSS
HTML QUICK REFERENCE