Welcome back to my blog for another lesson in HTML. Today we will learn how to stylize our website with all sorts of different colors made from a combination of RGB. Without further ado, lets get going!
Step 1: Add some styling with CSS While HTML is used to define the structure of a web page, Cascading Style Sheets (CSS) are used to define the visual style of the page. Let’s add some CSS to our HTML page to make it look more visually appealing.
This may sound difficult but it just requires a bit of code that I have laid out below, if you need help feel free to email me or contact me via the comments under this post!
First, create a new file called “style.css” in the same directory as your HTML file. Add the following code to the file:
cssCopy codebody {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-around;
background-color: #333;
color: #fff;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
section h2 {
font-size: 36px;
margin-top: 0;
}
section p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
section img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
form label {
display: block;
margin-bottom: 5px;
font-size: 18px;
}
form input,
form textarea {
display: block;
width: 100%;
padding: 10px;
font-size: 18px;
margin-bottom: 20px;
border: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
form input[type="submit"] {
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
This new feature adds quite a lot of customization possibilities to our website so feel free to play around with the values to get them just right. nextly the sizes and specifications of multiple things such as any images we include are changed, and finally
I’ll also explain the code. The first few lines set the background color and text color of our body text, after which a margin between sections is added, we create a label and add details to its background, border, and text.
Thank you all for reading this blog post and I hope to see you next time