How are websites made? Try it out.

  • by

CSS or Cascading Style sheets, tell the html code how to present itself for maximum impact and engagement. They’re basically Queer eye for the HTML guy.

So point those toes, and let’s go!

We’re going to open one last tag. It’s the <style> tag and all our CSS is going inside of it.

In CSS we target sections of our html code by the name of their tag, and put all the intsructions for a particular tag inside curly brackets {like this} for the computer to understand where one instruction stops and another begins, we finish each one off with a semi-colon; shall we give it a go?

<style>

body{ <!-- these instructions apply to the whole of the website, everything within the <body> tag -->

background-color: white;
}

A nice simple start. This says that the website background should be white, but it’s going to be difficult to tell if your CSS is working, so pop a </style>tag at the end, save and go ahead: open it in a browser. Now, where it says white in your code put any other colour that you can think of (use American spelling). Save your code and reload your webpage in the browser.

And you can play around like this, at any stage, as you code along. Experiment! You really can’t break it. The worst thing that can happen, is that nothing will happen.

Next let play around with the <h1> heading tag.

h1 {
color: green;
text-align: center;
font-family: courier new; <!-- this is just the name of the font, you could try times new roman or calibri-->
}

Add this CSS to your code, save and refresh that browser to see what happens.

While we’re messing around with fonts, let’s style the fonts in our paragraph sections <p>:

p {
font-family: verdana;
font-size: 20px;
text-align: center;
}

Are you starting to get the hang of it? It’s fun to see it changing, isn’t it.

Let’s make sure that image is central and a reasonable size:

img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

And finally, let’s add a bit of padding (blank space) around the edges of each section to make it all easier to read.

div {
padding:10px;
}

And we’re done – I hope you had fun!

If you enjoyed seeing a webpage come to life, and want to take it further you can learn more over at w3schools. They have full lists of all of the HTML and CSS tags (and more) with great exercises so that you can practise.

Pages: 1 2

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.