How to design a website using HTML and CSS?

  • 18th April 2017
  • 0

We live in the world of the internet. This has of course been one of the revolutionary developments in recent times. No longer is vital information just restricted to books or printed materials. With the World Wide Web, you can web brows  to any information you want. Search engines are of great help. When it comes to website development then the 2 most dominant languages are HTML and CSS. Let us first understand what they are.

What are HTML and CSS?

Hyper Text Markup Language or more popularly is known as HTML. This  is what  gives content structure and meaning. This is done in HTML by defining the content as. For example, headings, paragraphs, or images. Cascading Style Sheets or CSS on the other hand, is a presentation language created to style the appearance of content. Use of  fonts or colors are done here.

Both the languages HTML and CSS are independent of one another. It must remain that way. CSS should not be written inside of an HTML document and vice versa. As a rule, HTML will always represent content. The CSS on the other hand should always represent the appearance of that content.

Understanding some common HTML terms


These are designators. These define the structure and content of objects within a page. Some elements are more frequently used. These include multiple levels of headings, usually identified by <h1> through to <h6> elements) and paragraphs (identified as the <p>element);


Elements in HTML are usually surrounded by the greater than and less than brackets. Everything put together is s known as a tag. Tags usually are in pairs ,like the opening tag and the closing tag.


The properties which are used to provide additional information about an element are known as the attributes. The most common attributes include the id attribute. This identifies an element;

Setting Up the HTML Document Structure

HTML documents are plain text documents .These have to be saved with an .html file extension instead of a .txt file extension. To begin writing HTML, you first need a plain text editor that you are comfortable using. .2 of the popular plain text editors for writing HTML and CSS include  Dreamweaver and Sublime Text. There are also some free alternatives. These are the Notepad++ for Windows and Text Wrangler for Mac.

Inside the <html> element, the <head> element identifies the top of the document. This includes the Meta data at the top of the document. The content inside the head element is not displayed on the web page. The visible content is inside the body element of the web page.

A typical HTML document structure looks as follows:

Basics of CSS 

Some common terms used in the CSS are as follows.


A selector determines the elements within our HTML to target and apply styles. This may be in terms of color, size , position, etc.


The property designates the styles that would  be applied to that element. Property names fall after a selector. These are to be written within the curly brackets, {}, and immediately preceding a colon, :. We can use properties to set  background, color, font-size, height, and width.


After we have selected an element with a selector and determined the style we have  to apply with a property. Thereafter we can determine the behavior of that property with a value. Values can be identified as the text between the colon, :, and semicolon, ;.

In conclusion we hope that we have been able to give you a fair amount of idea of the basics of HTML and CSS.