Basic Introduction to CSS

Photo by Kobu Agency on Unsplash

Occasionally, I hear complaints from most of my fellow developers about how troublesome CSS is. They keep stressing that it takes a lot of their time and it needs a designer, not a developer or computer scientist. They do not view it as something fun to do, but rather a necessity.

Look, I do not know what you have heard about CSS, or how you feel about it(you can let me know in the comments section below). This is what I know. Playing with CSS is one of the things I do for fun. It brings out the creativity in me. Think about this. The software is developed for the end-user. What this means is on top of having a killer backend that handles all edge cases, a user needs an interface to interact with the application and not just any wack interface with no sense of style. This is where CSS comes in. Simply put, frontend and backend complement each other. You just can‘t [read kent] afford to have a user interface disaster.

We are saving lives here, people

What is CSS?

CSS stands for Cascading Style Sheets. It describes how HTML objects are displayed on the browser.

CSS is not only used to define styles for your web pages but also the layout and variations for different screen size devices e.g laptops, mobile phones etc which is normally referred to as responsiveness.

Why I believe you should make CSS your friend

• It makes your pages presentable.
• It allows content to be optimised for more than one type of device

CSS syntax

selector {property: value}

• The selector points to the HTML element to be styled. In this example, let’s use a div as our selector
• The property is simply an attribute of the HTML element. It could be the background-colour, width or height.
• Values are assigned to the properties.

The code block below represents the CSS style for the div

div { background-color: red }

The real stuff

This tutorial assumes that you have a basic understanding of HTML. Below is how our web page will look like at the end of this tutorial. Forgive my colour choices. I am a designer by conviction, and in my world, colour is trending 💁. But feel free to use colours that fit your preferences.

Getting started

You will need the following to make things happen.

• A text editor to write code. Preferably vscode
• A web browser to display the webpage
• The will to learn. Like that is not obvious 💁

Making things happen

Open your text editor and add 2 files i.e index.html and index.css. The .html file to define the content on our page and the .css file to hold the styles for the page. Make sure both files are saved in the same directory/folder as the image you will use.

Import the CSS file by adding this line of code below in the head section of your HTML file.

<link rel=”stylesheet” href=”index.css”>

Inside the body section of the .html file, add a div. This div contains an image tag, 2 input fields and a button. Assign each element a selector by adding a class attribute to each tag. Your file should look like this 👇

Style the page background colour

Give the body tag a background-color property in the .css file and assign it a value.

body{background-color: coral}

Style the div

• Add the div class to the CSS file and give it a white background, width and height.

.card { background-color: white; width: 450px; height: 550px; } 

• Position the card in the centre of the page by adding the following property and value pairs in the body. Flexbox is an easy alternative to achieve this. You can read more about it here.

display: flex; align-items: center; justify-content: center; height: 100vh;

vh is a CSS unit that stands for view height.

Style the image

• Give the card-image class a height, width and border-radius to make it curved.

.card-image {width: 250px; height: 250px; border-radius: 150px } 

Style the input fields

Notice how both input fields have the same class? This is because they have the same attributes i.e width and height.

• Give the .card-input a width and a height

The 95% width value represents 95% of the overall parent div i.e 95 per cent of 430px

.card-input { width: 95%; height: 50px }

• Add a margin-top property to give each input field some space at the top

.card-input { width: 95%; height: 50px; margin-top: 30px }

Style the button

Give the button a width, height, background colour and a colour for the fonts.

.card-button { width: 450px; height: 50px; background-color: coral; color: white }

Give the card content some spacing from the card border by adding a padding property to the .card class

Below is how your CSS file should look like.

I hope this tutorial has been helpful. And hopefully, it has changed how you feel about CSS 😅