HTML and CSS

​What are HTML Tags?

HTML tags are simple instructions that tell a web browser how to format text. You can use tags to format italics, line breaks, objects, bullet points, and more. 

These tags live in the HTML (or the Hypertext Markup Language) of every webpage. Put, HTML is the language of web pages.

​What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag.

The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.

<!DOCTYPE> 

​<!--...-->

Defines a comment.

The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.

<!--This is a comment. Comments are not displayed in the browser-->

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Note: There can only be one <body> element in an HTML document.

<body> 

​<a>

The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. <h6> defines the least important heading.

Note: Only use one <h1> per page - this should represent the main heading/subject for the whole page.

<h1> - <h6>

​<br>

The <br> tag inserts a single line break.

The <br> tag is useful for writing addresses or poems.

The <br> tag is an empty tag which means that it has no end tag.

<title> (required in every HTML document)

<style>

<base>

<link>

<meta>

<script>

<noscript>

What goes inside the head element?

​<head>

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

Metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

​Metadata

Data about Data

The <html> tag represents the root of an HTML document.

The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

<html>

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

<hr>

<li>

The <li> tag defines a list item.

The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).

In <ul> and <menu>, the list items will usually be displayed with bullet points.

In <ol>, the list items will usually be displayed with numbers or letters.

The <ul> tag defines an unordered (bulleted) list.

Use the <ul> tag together with the <li> tag to create unordered lists.

<ul>

The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

The <li> tag is used to define each list item.

<ol>

<link>

The <link> tag defines the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets or to add a favicon to your website.

The <link> element is an empty element, it contains attributes only.

What are HTML Attributes?

HTML attributes are special words used inside the opening tag to control the element's behavior. HTML attributes are a modifier of a HTML element type.

https://www.w3schools.com/tags/ref_attributes.asp

<p>

The <p> tag defines a paragraph.

Browsers automatically add a single blank line before and after each <p> element.

<script>

The <script> tag is used to embed a client-side script (JavaScript).

The <script> element either contains scripting statements, or it points to an external script file through the src attribute.

​What is CSS?

• CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are to be displayed on screen, paper, or in other media

• CSS saves a lot of work. It can control the layout of multiple web pages all at once

• External stylesheets are stored in CSS files

A CSS rule consists of a selector and a declaration block.

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

​

​What is a CSS Selector?

A CSS selector selects the HTML element(s) you want to style.

CSS selectors are used to "find" (or select) the HTML elements you want to style.

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

​Class

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Id

​#para1 {
  text-align: center;
  color: red;
}

​​Id

​.center {
  text-align: center;
  color: red;
}

​​Class