Photo by KOBU Agency on Unsplash
Introduction to CSS: A Beginner's Guide to Styling a Web Page
Discover the basics of CSS and how to style HTML elements to make them look visually appealing.
Table of contents
Introduction
CSS (Cascading Style Sheets) is a style sheet language used in web development to format HTML documents and control the appearance of a web page to make it look visually appealing.
CSS gives the website a good look. For instance, if you look at what I designed here, you can see it has a layout, but with CSS, you can make it beautiful.
As we proceed, I will show you how I used CSS to make this page shown in the image below look beautiful.
CSS is responsible for styling a webpage's layout, fonts, colors, and other visual elements. Are you new to CSS? This article presents the basics of CSS and guides you through styling a simple webpage.
Why do we need CSS?
CSS is one of the main cornerstones of technologies for the web. Why is it so crucial? Here are some reasons why CSS is necessary:
Separation of concerns: CSS separates the structure/content (HTML) and a web page's presentation/style (CSS). When you separate HTML and CSS, it promotes scalability and modularity while reducing code complexity. A developer can focus on creating the visual presentation with CSS while another developer works on the HTML structure.
Consistent Design: It enables consistent design across multiple websites. When you define styles in a separate CSS file, you can apply the same styles to multiple HTML documents.
Flexibility and Control: CSS allows you to have precise control over the appearance and layout of web elements. You can adjust the properties like colors, fonts, positioning, spacing, etc to your desired style.
Efficiency: It promotes efficiency in web development. When you define styles once and apply them to multiple elements, you can minimize redundancy and the amount of code needed.
Responsive Design: CSS helps create responsive web designs that adjust to various devices and screen sizes. The CSS media queries can allow you to apply different styles based on screen width, orientation, and resolution.
Accessibility: CSS helps in web accessibility. It allows developers to create accessible designs. A developer can use CSS to enhance the usability and readability of web content for users with disabilities. For example, you can adjust a webpage's font sizes, colors, and contrast ratios to improve readability for visually impaired users.
How CSS works with HTML
If HTML were to be a bare or unpainted building, CSS would be the body style and the paint job. In the context of CSS, we can draw a link between an unpainted building and the default styling of HTML elements.
Just like an unpainted building that lacks a specific color or finishes, HTML elements without any CSS styling applied will maintain their default appearance. As a result, the display will be plain and unstyled.
A website can run without CSS, but it won't be pretty. CSS makes the front end of a website shine!
To use CSS, you must understand HTML (Hypertext Markup Language), the markup language used to structure a web page's content. CSS works by selecting HTML elements and then applying styles to them.
There are three primary ways to apply CSS in an HTML document:
1. Inline CSS: The Inline method is when CSS is applied directly on the same line of an HTML element using the "style" attribute. It is used for styling a single element. An example of inline styling is shown in the code below.
<h1 style="color: blue;">This is an inline CSS</h1>
2. Internal CSS: Internal styling of CSS is defined within the "<style>" tag in the "<head>" section of an HTML document. You can apply styling to multiple elements inside the entire HTML document. An example of inline styling is shown in the code below.
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>This is an internal CSS</h1>
</body>
</html>
3. External CSS: With external styling, the CSS code is stored in a separate CSS file, which is named with a ".css" file extension, for example, "style.css," and it is linked to the HTML documents using the <link> tag in the<head> section of the HTML document. This method separates the style from the structure of the HTML document.
<!--This is how you link your css file to html document-->
<head>
<link rel="stylesheet" href="styles.css">
</head>
The internal and external styling of CSS uses the same syntax, except that the external CSS styles are usually stored in a separate file with the ".css" file extension containing all the CSS rules and can be linked to numerous HTML documents, which allows for global styling across an entire website.
CSS Syntax
CSS has a straightforward syntax with several keywords to specify various style property names. It is essential to understand the basics of this syntax when writing CSS code.
To apply styles to an HTML element, you must first identify the element in your HTML document you want to style. Once you have done so, you can add styles using the selector and a variety of built-in CSS properties.
CSS syntax comprises a selector and a declaration block containing the property and value. This syntax follows the format shown in the block of code below.
/* This is a CSS syntax */
selector {
property1: value;
property2: value;
}
The "selector" in the block of code above points to the HTML element to which you want to apply the styles. They are used to target specific HTML elements before applying styles to them.
The "property" sets the attribute of the HTML elements you want to style, like the (color, background, font-size, etc.), and resides within the CSS declaration block. CSS property defines the visual styles applied to the selected elements
The "value" sets the CSS Properties to the new value you want to assign to the property. You can set the color of a text to red ("red" is a value while "color" is the property) or set the background‐color of a webpage to gray, and so on.
For example
h1 {
color: white;
text-align: center;
}
This CSS rule selects the "h1" element "Hello world!" on the HTML document, sets its text color to red, and places the text in the center of the page, as seen below.
Now, let's practice how to style the simple webpage displayed earlier with CSS, and by the end, our webpage will be popping!
First, ensure you have an HTML file created on your computer. If you don't have one, create a file inside a folder on your desktop and name it "index.html." Open the file with the VS code editor and copy the code below inside the editor.
Here is the html code. I utilized semantic HTML tags discussed in our previous article to structure the webpage document.
<!DOCTYPE html>
<html lang="en">
<!-- Here, I used external styling of CSS and linked the css file to the html document-->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>This is my Webpage</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
<main>
<section>
<h2>About</h2>
<p> I'm a front-end developer passionate about creating great user experiences</p>
</section>
<section>
<h2>Contact</h2>
<p>You can reach me at peace@gmail.com</p>
</section>
<section>
<h2>Services</h2>
<ul>
<li>Web Development</li>
<li>HTML5</li>
<li>CSS</li>
</ul>
</section>
</main>
<footer>
<p>©2023 Women Techsters Fellow. All rights reserved.</p>
</footer>
</body>
</html>
Once you have saved this code, create a separate CSS file and name it "style.css." link it to your HTML using the external styling of CSS explained earlier.
Now, open your HTML file on a web browser to see your webpage and the styles you will define with CSS rules.
/* This is the body styles */
body {
margin: 0;
background-color: rgb(252, 250, 247);
font-size: 20px;
}
/* This is the header style */
header {
background-color: rgb(52, 3, 3);
color: #fff;
padding: 1px;
text-align: center;
}
/* This is the navigation style */
nav {
background-color: rgb(150, 103, 17);
padding: 10px;
}
nav ul {
margin: 0;
text-align: center;
}
nav ul li {
display: inline;
padding-right: 15px;
}
/* Link elements styles */
a {
color: #fff;
padding: 5px 10px;
text-decoration: none;
}
/* The main styles */
main {
margin: 20px;
}
/* Footer styles */
footer {
background-color: rgb(150, 103, 17);
color: #fff;
text-align: center;
}
The image below is the result of our page after adding the CSS styles.
As you can see, CSS is critical to the overall presentation of a web page. It provides various choices to make your webpage visually attractive and engaging. It also makes developers' lives a whole lot easier regarding formatting.
You can practice and modify these CSS rules to your desired style. When you master CSS, you become a valuable asset and a solid programmer.