Now that we’ve gone through the basic of CSS let’s style up our HTML code from Part 3 of an Introduction to HTML.
Just in case you have lost it, here is a copy of our HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Advanced Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Welcome to my advanced webpage</h1>
<p>This is my first webpage created using HTML.</p>
</section>
<section id="about">
<h2>About Us</h2>
<p>Learn more about our company and what we do.</p>
</section>
</body>
</html>
Now let’s write up some CSS to style it.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #f5f5f5;
padding: 1em;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 1em;
}
nav a {
color: #333;
text-decoration: none;
}
nav a:hover {
color: #ff0000;
}
section {
padding: 2em;
}
section#home {
background-color: #f5f5f5;
}
section#about {
background-color: #e5e5e5;
}
h1, h2 {
margin-bottom: 0.5em;
}
Let me explain the different parts of the CSS code in more detail:
body: this selector targets the <body> element of the HTML document. The font-family property is used to set the default font for the document, in this case Arial. The margin and padding properties are set to 0 to remove any default spacing.header: this selector targets the <header> element. The background-color property is used to set the background color of the element, in this case a light gray color. The padding property is used to add some space around the content inside the header.nav ul: this selector targets the <ul> element inside the <nav> element. The list-style-type property is used to remove the bullet points, and the margin and padding properties are set to 0 to remove any default spacing. The display: flex is used to align the elements horizontally.nav li: this selector targets the <li> element inside the <nav> element. The margin-right property is used to add some space between each list item.nav a: this selector targets the <a> element inside the <nav> element. The color property is used to set the text color of the links, in this case a dark gray color. The `text-decnav a:hover: this selector targets the <a> element inside the <nav> element when the user hovers over it. The color property is used to change the text color of the links when hovered over, in this case to red.section: this selector targets all <section> elements on the webpage. The padding property is used to add some space around the content inside the section.section#home: this selector targets the <section> element with the id of “home” on the webpage. The background-color property is used to set the background color of the element, in this case a light gray color.h1, h2: this selector targets both <h1> and <h2> elements on the webpage. The margin-bottom property is used to add some space below the heading.section#about: this selector targets the <section> element with the id of “about” on the webpage. The background-color property is used to set the background color of the element, in this case a light gray color.This CSS file is used to style the different elements in the HTML document, like adding background-color, padding, margins, and displaying elements in a specific way. It also allows to change the color of links on hover.
This is a basic example of a CSS stylesheet that can be used to style an HTML document, but there are many more properties and techniques that can be used to create more advanced layouts and designs. There are also many different CSS frameworks and libraries available that can be used to quickly create complex designs with pre-built classes and components.
Additionally, CSS can be used to apply animations, responsive design, and media queries to adapt to different screen sizes.
It is also possible to use preprocessors like SASS, LESS, STYLUS, etc.. that extends the capabilities of css and make it more powerful and easier to manage.
Overall, while this is a good starting point, there is much more to learn and explore in the world of CSS.
You must be logged in to post a comment.
