Getting Started with HTML and CSS

HTML and CSS Logo

What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS is a language for specifying how documents are presented to users — how they are styled, laid out, etc.
  • CSS can be used for very basic document text styling — for example, for changing the color and size of headings and links. It can be used to create a layout — for example, turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation.
  • CSS is a rule-based language — you define the rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page.
  • CSS properties have different allowable values, depending on which property is being specified.

General Structure of HTML

The!DOCTYPE html declaration defines that this document is an HTML5 document.

The html element is the root element of an HTML page.

The head element contains meta information about the HTML page.

The title element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab).

The bodyelement defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

The h1element defines a large heading.

The p element defines a paragraph

Here's an example of a simple HTML document:

Basic HTML Structure

General Structure of CSS

The href attribute of the link element needs to reference a file on your file system. An internal stylesheet resides within an HTML document. To create an internal stylesheet, you place CSS inside aelement is the root element of an HTML page.

The style element contained inside the HTMLhead element.

Inline styles are CSS declarations that affect a single HTML element, contained within a styleattribute.

When you find CSS that you want to experiment with, replace the HTML bodycontents with some HTML to style, and then add your test CSS code to your CSS file.

Properties are human-readable identifiers that indicate which stylistic features you want to modify.Each property is assigned a value. This value indicates how to style the property.For example: color: is a property, and blue; is a value.

Here's a snippet of code in a CSS document:

Basic HTML Structure

History of HTML and CSS

Since the early days of the World Wide Web, there have been many versions of HTML:

  • 1989: Tim Berners-Lee invented www
  • 1991: Tim Berners-Lee invented HTML
  • 1993 Dave Raggett drafted HTML+
  • 1995 HTML Working Group defined HTML 2.0
  • 1997 W3C Recommendation: HTML 3.2
  • 1999 W3C Recommendation: HTML 4.01
  • 2000 W3C Recommendation: XHTML 1.0
  • 2008 WHATWG HTML5 First Public Draft
  • 2012 WHATWG HTML5 Living Standard
  • 2014 W3C Recommendation: HTML5
  • 2016 W3C Candidate Recommendation: HTML 5.1
  • 2017 W3C Recommendation: HTML5.1 2nd Edition
  • 2017 W3C Recommendation: HTML5.2

HTML and CSS Timeline

Sources