Styling your documents using CSS

Vinayak Tekade

Published in

Coder’s Capsule

7 min readMar 10, 2021

This article is the fifth part of Week of Web(#WOW). If you don’t know what #WOW is here’s a card to it.

Week of Web: A hands-on tutorial to become a full stack web developer in a week

This is the first article of the series Week of Web (or in short #WOW), where we will start from absolute beginner to…

medium.com

This article is a hands-on tutorial on styling your HTML documents using CSS and in the end, we will style our Todo list application.

You don't have to be good to start, you have to start to be good, so let’s get started ;)

What is CSS?

Cascading Style Sheets (CSS) as the name suggests is used for styling your HTML documents. It is also a scripting language that can describe the looks of an HTML document on a screen.

Inserting CSS to an HTML document

External CSS

CSS could be created as a separate file and then be referenced to an HTML document using the following HTML tag

<link rel="stylesheet" href="styles.css">

Internal CSS

CSS could be written inside an HTML document directly by using this tag

<style>p {
color: red
}</style>

Inline CSS

CSS can also be defined for each HTML element using the style attribute

<p style="color:red;">This is a paragraph.</p>

Syntax of a CSS Rule

A CSS rule contains a selector and a block of declarations.

selector { 
declaration1-property: declaration1-value;
declaration2-property: declaration2-value;
}

For example

h2 {
color: red;
font-size:14px;
}

Here all the h2 elements in an HTML document are selected and their colour is defined red and font size is defined as 14 pixels.

CSS Selectors

A CSS selector can be used to select an HTML element, an id or a class like this.

h2 {
color: red;
font-size:14px;
}#idName {
color: red;
font-size:14px;
}.className {
color: red;
font-size:14px;
}

CSS Properties

There are many properties in CSS and they could be discovered using VS Code’s IntelliSense. These are a few important ones.

CSS Colors

CSS colours can take the values as their names, RGB values or even Hex values.

<h1 style="color:red;">This is a Heading</h1>
<h1 style="color:rgb(255,99,71);">This is a Heading</h1>
<h1 style="color:#ff0000;">This is a Heading</h1>

CSS Background

CSS Background can take the values of an element’s background colour, image, repetition and position as follows

.container{
  background: #ffffff url("img_tree.png") no-repeat right top;
}

CSS Text

An HTML document with text as its content can take the following properties.

p {
  text-align: center;
  color: red;
  text-decoration: underline;
  text-transform: uppercase;
}

CSS Box Model

Any element in an HTML document can be considered as a box. These boxes can have their own margin, border and padding

CSS Borders

Borders are the lines on the box itself. CSS Borders can take the values of an element’s border width, style and colour.

#box{
  border: 5px solid red;
}

CSS Margins

Margin is the space outside a box. CSS margin takes the values of top, right, bottom and left margin respectively.

#box {
  margin: 25px 50px 75px 100px;
}

CSS Padding

Padding is the space between the box and the content. CSS padding takes the values of top, right, bottom and left padding respectively.

#box{
  padding: 25px 50px 75px 100px;
}

CSS can only be learned by exploring properties and trying them out go to w3schools to discover all the properties and their possible values.

Now let’s work on our ToDo list application.

Styling our Todo list HTML document

In the last article, we created an HTML document for our ToDo list application. And it looked like this

Now let's define its look using CSS.

Create a new file in the public folder called styles.css

Now open index.html and add a reference to this CSS file inside the head element.

<link rel="stylesheet" href="styles.css">

The head element should look like this.

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-          scale=1.0" />
    <title>ToDo List</title>
    <link rel="stylesheet" href="styles.css">
  </head>

Now that we have linked our CSS with our HTML document, let’s get all the elements in the center. (Yes, I had been waiting for this moment 👀)

.container {
  width: 600px;
  margin: 0 auto;
  text-align: center;
}

You will notice all the text is now in the center of the screen.

But the list still looks weird. Let's fix it.

ul {
  padding: 0;
  margin: 20px;
  list-style-type: none;
}

The list bullets are gone and the list is aligned properly.

Now let's style the individual list items to make to look better.

ul {
  padding: 0;
  margin: 20px;
  list-style-type: none;
}li {
  margin: 5px 0px;
  padding: 5px 20px;
}.task-text {
  display: inline-block;
  width: 90%;
  text-align: left;
}.task-delete {
  display: inline-block;
  width: 5%;
}

Notice we have used display: inline-block, this lets us set width and height of the span element by changing it from inline to inline-block

And this is how it looks now

Now let's change the looks of the form now.

.task-adder {
  height: 30px;
  margin: 5px 0px;
  padding: 5px 40px;
}#input-task {
  height: 100%;
  width: 80%;
  margin-right: 1%;
  background: none;
  border: none;
  border-bottom: 1px solid grey;
}#submit {
  width: 15%;
  background: none;
  border: none;
  color: grey;
}

Alright now that looks better, isn't it?

The basic CSS is done and now all the elements are aligned properly

But it’s no fun here. So lets up our game.

Advanced CSS for ToDo list

Now let’s add a background image to the whole page and change the colour of the text such that everything is visible.

body {
  background: url(./background.jpg) no-repeat center center fixed;
  background-size: cover;
  color: white;
  font-family: cursive;
}

#input-task {
  height: 100%;
  width: 80%;
  margin-right: 1%;
  background: none;
  border: none;
  color: white;
  font-family: cursive;
  border-bottom: 1px solid white;
}#submit {
  width: 15%;
  background: none;
  border: none;
  color: white;
  font-family: cursive;
}

This is how it looks now

But there's a problem, the input text field placeholder is not visible and on clicking it a border around it appears

This is due to the default properties of a form input text field. Let’s use Pseudo-elements to fix this.

Pseudo-elements are selected by using :: (double colon) after the main selector. Here we need to remove the outline when an element is in focus(when typing or clicking on the input field)

*:focus {
  outline: none;
}

Now let's fix the text colour of the input text field similarly

#input-task::-webkit-input-placeholder {
  color: white;
}

That looks good but let’s take it a step further. Let’s make our container visible with a blurred background and slightly darker compared to the background to increase the readability of the text.

.container {
  width: 600px;
  margin: 20px auto;
  padding: 20px;
  text-align: center;
  backdrop-filter: blur(10px) brightness(0.7);
  border: 1px solid grey;
  border-radius: 25px;
}

Now that's perfect isn't it?
Remember we started from here? xD

Alright that was fun!

The final code is available on my GitHub Profile. The link to the repository is here.

VinayakTekade/Week-of-Web: This repository stores all the code discussed during the sessions of Week of Web (github.com)

With this, we are done with CSS. Our application looks great but users can not interact with it. And a ToDo list is of no use without the ability to make changes to the list.

In the next article, we will learn programming in JavaScript. It will help us enable interactivity in our ToDo list application as well it will be helpful for us to learn backend scripting in Node.js.