How to code with HTML and CSS

Table of Contents

Introduction

We all browse and surf the web with our mobile or our computers. When browsing and visiting sites, we see the layout of the sites, the words on the pages you browse and arrangement of pictures and so on. This is made possible by HTML and CSS.

What is HTML?

Html in full means, hypertext markup language.

This is the language which your browser in your laptop or mobile devices understands when surfing the web. Html is just the frame of the web, the skeletal system of the web. For example, we have the human body. The human body is made up of various part. The skeleton is the part of the human body that gives it its shape. That is what HTML is on the website. Html gives the website its shape.

What is CSS?

CSS is an acronym that stands for means Cascading Style Sheets.

This has to do with the styling, colours and display of the website. CSS gives colour and beauty to the website. Without CSS a website will just be plain text scattered everywhere and pictures in straight lines or placed anyhow. With CSS we have what we see presently when you log into a site. CSS give beauty to a website.

How to code with html and CSS -How to code HTML

When coding HTML, we use tags meant for HTML. Tags like head, title, body, div etc. Before you do this you will need a code editor. Are various kinds of code editors for download.

After installation, open the code editor and create a new file then save the file name ending it with .html this will enable the editor to read this file as an HTML file.

Example

<head>

<\head>

<title>

<\title>

<> this is known as the opening tag. When you see this, it is always used to indicate opening tags

Example

<div>

That indicates an opening, text and whatever is placed in it and it ends with a closing tag <\div>

Example

<div> this is my first website and i want to be able to code more websites. <\div>

How to code with html and CSS -Different tags we have in HTML

Paragraph tag

<p><\p>

What so ever is in this tag starts a new paragraph completely, separating it from the old paragraph.

Header tag

This tag, when words are placed inside it, it increases the size and boldness of the text making it look like a header or title of a paragraph. The header tag ranges from different sizes.

H1 h2 h3 h4 h5 h6

H1 is the largest size while h6 is the smallest size. You can try out the sizes so you could know which suits your context.

Div

This tag acts like a container which holds many things. In this tag, more tags can be in it. It acts as a separation from other things on the site. Elements in this tag are always separated on the screen from other tags.

The body

This is always at the beginning. What so ever is to be displayed on your site should be found in this tag. When you open the body tag, after coding you have to close the body tag.

They are so many tags in HTML you just have to know which one works for what you want to do.

Coding CSS

When coding CSS, you also need a code editor just like HTML. The same editor works for both. CSS is just picking elements on your HTML and modifying it. Adding colours and beautifying it.

When you create a new file on your editor, safe the file as .css so the editor recognises this as a CSS file.

Before you begin coding, you have to link your CSS file to your HTML file.

How to code with html and CSS -How to link CSS to HTML

When linking your CSS to your HTML, you use the code below.

This goes in the head tag.

How to use CSS

Before you can use CSS, you have to give elements in your HTML classes or id, to make it possible to identify what you are editing. This classes and id are always added to the opening tags in your HTML.

Calling a class in CSS, you use a dot(.)

While you use a # symbol to call an id.

Example

If you gave an element a class called a picture, you go to your CSS and call the class like this

.picture{

}

Then the codes and commands will be inside the curly brackets.

Example of HTML

<html>

<head>

</head>

<body>

<\body>

</html>

Example of css

<style>

#container {

padding-left: 200px;

padding-right: 190px;

}

#container .column {

position: relative;

float: left;

}

#center {

padding: 10px 20px;

width: 100%;

}

#left {

width: 180px;

padding: 0 10px;

right: 240px;

margin-left: -100%;

}

#right {

width: 130px;

padding: 0 10px;

margin-right: -100%;

}

#footer {

clear: both;

}

/* IE hack */

* html #left {

left: 150px;

}

/* Make the columns the same height as each other */

#container {

overflow: hidden;

}

#container .column {

padding-bottom: 1001em;

margin-bottom: -1000em;

}

/* Fix for the footer */

* html body {

overflow: hidden;

}

* html #footer-wrapper {

float: left;

position: relative;

width: 100%;

padding-bottom: 10010px;

margin-bottom: -10000px;

background: #fff;

}

/* Aesthetics */

body {

margin: 0;

padding: 0;

font-family:Sans-serif;

line-height: 1.5em;

}

p {

color: #555;

}

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

}

nav ul a {

color: darkgreen;

text-decoration: none;

}

#header, #footer {

font-size: large;

padding: 0.3em;

background: #BCCE98;

}

#left {

background: #DAE9BC;

}

#right {

background: #F7FDEB;

}

#center {

background: #fff;

}

#container .column {

padding-top: 1em;

}

</style>

In conclusion, HTML and CSS are the basics of a website. You need to understand and learn how to use them before you can learn other programming languages.

Do you have a question or an input on How to code with html and CSS? Kindly use the comment box below.