HTML and CSS: Basics for Web Design

Say you are creating content to be on the web. How can a browser tell where breaks should be between paragraphs? How does it know that the background of the page should be this color and the navigation bar another color? CSS and HTML, that’s how.

HTML, which is short for Hypertext Markup Language is what is read by browsers in order to determine what content will be where on a web page. CSS or Cascading Style Sheets, on the other hand, is what is responsible for determining the appearance of content in the website as a whole e.g. HTML lets the browser know that a string of text should be a header, while CSS will tell the browser all headers within the website should be this color. Also you can check top reviews here

HTML and CSS: Basics for Web Design

How Pages are Built Using HTML:

HTML is different from programming languages in that the latter gives commands (e.g. show this box when users click this button) while the former provides descriptions of layouts and appearance. Take this example:

<b> This is bold. </b>

The <b>… </b> inform the browser that you want the text in between to be boldfaced i.e. This is bold.

Tags, Elements and Attributes:

These are the main components of HTML. The previous example (<b>…</b>) is one example of a tag. Tags are written between angel brackets and they come in pairs – the opening tag (sans the /) signals that a certain action should be taken and the closing tag (with the /) signals that said action should no longer be taken by the browser.

Now, the opening and closing tags together are called an element. The beauty of HTML is that it uses elements that are easy to decipher e.g.

  • (<b>…</b>) for bold
  • (<p>…</p>) for paragraph
  • (<em>…</em>) for italics or emphasis

Some tags however do not come in pairs. They are still elements, but these are referred to as empty HTML elements. An example is the <img> tag used to describe images.

After elements come attributes, which are to elements like adjectives are to nouns: they provide further information. An attribute only appears within an opening tag, and it is enclosed in speech marks (“”).

Lastly, there are files which are distinct HTML pages for each website. It is used to save the HTML information pertaining to each page, and there are as many files as there are web pages in a website.

Importance of CSS:

Given that you can use HTML to define the layout for each webpage in a site, why is CSS important? A style sheet provides a simple way to establish a consistent pattern throughout a website for expert reviews. For instance, rather than manually coding for each header on each page to be bold, green, 26point, serif font, you can use CSS to describe the block of code to do that, so that the browser will follow that block each time it encounters the <h1> tag, which is the header tag.

Where Does it Go?

There are three places to apply CSS within a HTML file:

  • In the header, making CSS applicable to the whole page
  • In a tag, making it applicable to that tag alone
  • As an external CSS file to control the entire site. These are saved as .css files and it is the most common application of CSS.

Initially, CSS may seem to be less glam than HTML, but it does make what would otherwise be a tedious process very simple – especially where complex websites are being designed.

Select your Language please »
Scroll to Top