DEV Community

Bernard Opiyo
Bernard Opiyo

Posted on

HTML & CSS Guide

HTML
HTML stands for Hyper Text markup Language,which is the most used language on web to develop web pages.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1999, followed by HTML 4.01 in late 1999.The current version is HTML-5 which is an extension of HTML 4.0 and its version was published in 2012.

Hypertext Refers to the way in which web pages (HTML docs) are linked together. As the name suggests HTML is a Markup Language which implies that you use HTML to simply "mark-up" a text document with tags that tell web browser how to structure it to display.
Initially HTML was developed with the aim of defining the structure of documents like, heading, paragraphs , list, and so forth to enable the sharing of scientific information between researchers.
Currently HTML is being used widely to format web pages with the help of different tags available in HTML language.

Contents of a basic HTML Doc
!DOCTYPE html
html-start
head start
title-start This doc title end-title
head-end
body-start
h1-start This is a heading end-h1
p-start Document content goes here....end-p
body-end
html-end

HTML Document structure in Details

  1. The !DOCTYPE Declaration the declaration tag is used by the web browser to understand the version of the HTML used in the document.The current version commonly used is HTML5. 2._ Heading tags_ Any document starts with a heading, in HTML you can have six levels of headings, which use the elements; h1,h2,h3,h4,h5,and h6.While displaying any heading the browser adds one line before and after that heading.
  2. Paragraph tag It offers a way to structure your text into different paragraphs.Each paragraph of the text should go in between an opening "p"tag and a closing one. 4.Line Break tag When using a "" element, anything following it starts from the next line.The line break tag is an example of element where you don't need an opening or closing tag.The break has a space between the characters "br" and the forward slash which when omitted it will be difficult for the web to render the line-break.
  3. You can center your content using "
    ".
  4. Horizontal lines They are used to visually break-up sections of adocument. The "
    " creates a line from the current position in the document to the right margin and breaks the line accordingly.

CSS
Cascading Style Sheet is a stylesheet language used to describe the presentation of a document written in HTML or XML.
CSS describes how elements should be rendered on screen , on paper, in speech or even other media.

Steps in CSS
CSS is used to style and layout web pages such as to alter the font, color, size, and spacing of your content. splitting content into multiple columns, or even adding animations and other decorative features.

CSS is built on cascade and inheritance, all the selector types, units, sizing background and borders, debugging.

In CSS you also look at text styling fundamentals including setting font, boldness,italics, line and letter spacing, drop shadows and other text features.

You can go father and look into modern layout tools like flexbox, CSS grid, and positioning and also add legacy techniques.

Discussion (0)