X

Get in Tutch

Applying CSS to HTML

Last week we learned how simple it was to output content via HTML. Hopefully you would have played around with some different attributes as we recommended.

This week we will be learning the basics of CSS. CSS stands for Cascading Style Sheets, these are called into your webpage, as you will soon learn, so you can apply styling to your content. You can declare colours, backgrounds, images, height/width values, fonts, create animations & more.

 

Starting from where we left off last week, we had set up our basic HTML page with a heading and a paragraph. You are going to need to create a new folder inside of your website folder and name it “css”. Inside of that folder you are going to want to create a file named style.css

Notice the extension of the file is .css (if you are using notepad you will need to save as “all files” under file type). Now you are going to want to make your HTML document communicate with your CSS file by doing the following:

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="/css/style.css ">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

 

<head> amongst other things, ensures that the stylesheet is always called into the top of the webpage. <link rel=”stylesheet” href=”/css/style.css”> Tells the webpage where to look for your stylesheet. Now that you have a stylesheet that communicates with your HTML page you can go ahead and start changing the visual appearance of the webpage.

In the following code snippet we have a heading, a basic paragraph and a paragraph with the class of “green-large”. By applying a class to the HTML attribute we can tell the stylesheet to call the call and apply styles.

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="/css/style.css ">
</head>
<body>
<h1>My First Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Tempor.<p>
<p class=”green-large”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Tempor.<p>
</body>
</html>

 

Now you are going to want to open your CSS file and input the following:

h1{ color:#993333; }
.green-large { color:#; font-size:50px; }

 

Explained: h1 { xx } : h1 declares the HTML attribute within the file you are calling the stylesheet into. Then within the brackets we are declaring a colour, you can find a list of colours here & a list of CSS attributes here.

.green-large: Notice the period before the class name, this tells our CSS file that we are calling a class and not a standard attribute. again we are declaring a colour but this time we have changed the size of the font used for the paragraph that has the class of green-large. Px stands for pixels, this is what the font size is calculated in within the web-browser.

From here you should be able to edit your webpage and make it look pretty. Next week we will cover some more advanced css and animations.