Beginner’s Guide to Frontend Web Development — Part 2
Tags: css, webdev, beginners, programming
Published: 2023-10-03 08:05:10

*Exploring the role of Cascading Style Sheets (CSS) in creating stunning webpages*

![Image by Stefan Vitasovic on [Toptal](https://www.toptal.com/css/full-page-slider-css-and-javascript)](https://cdn-images-1.medium.com/max/4400/0*Hkstu7Uy3oLAKXA7.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

 1. CSS: The Styling and Layout Tool

 2. History of CSS

 3. Adding CSS to HTML pages

 4. CSS Syntax

 5. CSS in practical application

---

## CSS: The Styling and Layout Tool

Take a look at the webpage below.

![Webpage built with HTML only](https://cdn-images-1.medium.com/max/2562/1*Y0uQZ-N5QVTgfkfXJ-_cXQ.png)

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.

```HTML
    <!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.

![CSS selector-declaration syntax](https://cdn-images-1.medium.com/max/2000/1*oHusgDCCllrhg2zKVutdjg.png)

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.

![Order of text headings from the biggest (h1) to the smallest (h6). h1 has been given a red colour.](https://cdn-images-1.medium.com/max/2000/1*UnB-d0vHCYyJG_8V7WXArg.png)

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.

```HTML
    <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.

```CSS
    div {
      background-color: gray;
    }
    
    p {
      color: blue;
    }
```

The result in the browser is shown below:

![Paragraph tags nested inside div tags and styled with CSS.](https://cdn-images-1.medium.com/max/2604/1*a2GlhtdB4Ef-hGpfyZRBUw.png)

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.

```CSS
    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:

![Paragraph tags nested inside div tags and styled with CSS.](https://cdn-images-1.medium.com/max/2454/1*OmLF4T2WwFH7W_IlDTvgmQ.png)

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.

![Visualization of the box model. Image by writer](https://cdn-images-1.medium.com/max/2000/1*GSt_4qEUxSw3JMHFPvnjPw.png)

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:

```CSS
        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.

![Elements arranged in CSS box model](https://cdn-images-1.medium.com/max/2556/1*geTpKnKVw4GedwVb3x7X6g.png)

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.

[https://developer.mozilla.org/en-US/docs/Web/CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)

[https://www.w3schools.com/css/default.asp](https://www.w3schools.com/css/default.asp)