X

Get in Tutch

Advanced CSS

Last week We learned how to apply simple CSS to our basic HTML page. You should have then progressed into playing with your webpage and making it look pretty.

Now that you’ve learnt to change color’s, font sizes etc, We can dive a little deeper into the world of CSS. CSS can really make a web page come to life. Lets start by creating a simple HTML page with just an image on. Remember to create & make your CSS file as we will need it in just a moment. If you do not have an image you can use you can use this one Here. Remember to place your image inside a folder within your website directory and called in as shown below.

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="/css/style.css ">
</head>
<body>
<img src="/images/500x500.gif" alt="Our Image" />
</body>
</html>

Now that we have a webpage with only an image on it, we can play with some css and make the image come to life with some css. We will start off simple by adding a border radius to the image to manipulate the shape of it. Head on over to your css file and input the following.

Img {
border-radius: 100px;
}

You should notice the shape image has changed, it now has curved corners, the higher the value in pixels the more the shape bends so to speak. Setting the value at 250px would make the image completely circular in this case. Lets make the image circular by changing the value in the css file to 250px.

Img {
border-radius: 250px;
}

Now that we have manipulated the shape of the image it has become a lot smaller, This is where some slightly more advanced CSS can help. Write the following into your CSS file below what you already have:

img:hover {
border-radius: 0px;
}

Now when you move your mouse over your image, it will become full size again. Again we encourage you to do some research into the different things you can achieve with CSS and attempt to play around with them yourself. A CSS reference can be found Here.