Exploring the role of Cascading Style Sheets (CSS) in creating stunning webpages
](https://res.cloudinary.com/practicaldev/image/fetch/s--QVxxp8PS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://cdn-images-1.medium.com/max/4400/0%2AHkstu7Uy3oLAKXA7.png)
In the previous section of this guide, we talked about what frontend web development is all about and the tools to get you started in your web development journey. In this article, we will talk about the second tool you need, CSS.
What is CSS? Why do I need it? You may ask. Well, this is precisely what we will discuss in this article. Prepare your mind for an exciting journey. Whoohoo!
Table of contents
CSS: The Styling and Layout Tool
History of CSS
Adding CSS to HTML pages
CSS Syntax
CSS in practical application
CSS: The Styling and Layout Tool
Take a look at the webpage below.
Beautiful, right? Negative! This is the result of building our webpage with HTML only. Just imagine if all websites were designed with HTML only; then, we'd have a bunch of unattractive, clustered pieces of elements lumped together. This shows the need for CSS.
CSS is used to define how a webpage’s layout should look. It is used to add styling to an HTML document, instructing the web browser how to display HTML elements. CSS makes websites appealing to the eye, well-organized, and have a solid structure.
History of CSS
CSS is the abbreviation for Cascading Style Sheets. It was first introduced by Håkon Wium Lie in 1994. CSS 3, the current version, was released in 2005 with several updates.
There are different methods of styling web pages. They include:
Using the style tag in the head or body tag
Using an external stylesheet
Using inline styles.
The recommended method for styling is using an external stylesheet. It guarantees better code and leaner, uncluttered files.
Adding CSS to an HTML Document
To link a CSS file to HTML, the CSS file must first be saved in the .css format, e.g. style.css. A link to the CSS file is provided using the link element, which is a component of the metadata inside the head tag, and the href attribute, as shown below, to link to the file name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Now the HTML document can be styled. Hurray!
CSS Syntax
The format of writing CSS code is very different from that of HTML. CSS code is written in a selector-declaration format. The declaration comprises two parts: a property and a value. This is demonstrated below.
The background-color and text-color properties of the body selector are both set to a grey value in the example above. The biggest heading is set to red. As the stylesheet has been linked to the HTML file containing the heading examples, the changes will be reflected on the webpage, as seen below.
Easy.
Selectors are very powerful. A selector can be used to target all instances of a particular tag in HTML and give it the same formatting. For example in the code snippet below, there are three paragraph and div tags.
<div>
<p>This is the first paragraph</p>
</div>
<div>
<p>This is the second paragraph</p>
</div>
<div>
<p>This is the third paragraph</p>
</div>
The reason for styling with CSS is to change the background colour of the div tags to gray and the text colour of the paragraph tag to blue.
div {
background-color: gray;
}
p {
color: blue;
}
The result in the browser is shown below:
These styles will be used for all div and p tags in the document until a higher hierarchy of specificity overrides them.
Specificity is likened to a kind of hierarchy for which style will be applied to an element when multiple rules target it.
CSS supports shorthand forms of properties. A shorthand form of a property allows for the application of different properties under that property at the same time.
CSS in Practice
In this section, some examples of CSS styling will be shown
CSS Font and Typography
Font deals with the specific styling and appropriate sizing of text. There are several properties for styling text with font. They are font-family, font-weight, font-stretch, font-style, font-size
An example of these in use is shown below.
p {
color: blue;
font-family: 'Courier New', Courier, monospace;
font-weight: 500;
font-stretch: extra-condensed;
font-style: italic;
font-size: 24px;
}
Applying these styles to the p tag from the previous example will give the result below:
Apart from fonts, several properties can be used to style text. Some of them include text-decoration, text-align, text-transform,letter-spacing, text-shadow.
CSS Box Model
In CSS, every element is in a box form. The box model deals with sizing elements based on CSS properties. A visualization of the box model as shown by Chrome is shown below.
There are four parts to the box model, moving from the outside to the inner part.
The area of the content: The area outside and around the margin
Margin: This is a CSS property used to create space around an element
Border: This is a CSS property used to draw a defined perimeter around elements.
Padding: This is a CSS property used to create space in the inner part of an element
Using the paragraph example from above, the way these properties work will be shown below:
div {
background-color: gray;
padding: 4px;
margin: 10px;
width: 500px;
border: 2px solid yellow;
}
p {
color: blue;
padding: 4px;
margin: 10px;
border: 2px solid red;
}
Note: The px short form of pixel, is a unit used in measurement in CSS and is the most commonly used. It works based on some convention that makes it consistent across several devices. There are some other units of measurement, such as percentage, relative units such as em, rem, and viewport units such as vh, vw, among others.
The above code will give this result in the browser.
In the snippet that contains the CSS code above,
The padding of 4px for both elements is used to create space between the element and the border.
The margin of 10px for both elements is used to create space around the outer part of the border.
The border with a thick, solid line of 2px is used to separate the padding and the margin.
For more information on CSS and an in-depth study, The following links will be of tremendous assistance in teaching more about the basic and advanced components of CSS.
Top comments (0)