Lesson 1-1: Basic HTML Tags and CSS Styles

What is HTML?

HTML stands for HyperText Markup Language and it is used to structure content on a webpage. Every web application is essentially a tree of HTML elements. Elements consist of opening and closing tags.

HTML syntax

We can put elements inside of each other, or put them adjacent to one another. We refer to elements as part of a parent-child relationship, where the outer element is the parent, and the inner element is the child.

All HTML files include basic starter code, necessary to be ready for the web. The

<head>
element contains meta information about the html document, such as the document title, character sets, styles, and links to Google fonts. The
<body>
element contains actual content that will be displayed on the webpage, such as text, images, etc.

For the

<head>
element, the
<head>
tag is the parent and the
<meta>
and
<title>
tag are the children. Notice how the children are indented inside the parent's opening and closing tag. Indentation should be used when there are tags within a pair of opening and closing tags. This will make your HTML code more readable.

Adding content in the
<body>
tag

Using HTML elements: you can write an element in three steps...

  1. Create the opening tag: ex.
    <p>
  2. Create the closing tag: ex.
    </p>
  3. Put content inside: ex.
    <p>Hello there!</p>

<h1>
-
<h6>
are header elements.
<h1>
represents the most important heading and
<h6>
represents the least important heading. Do not skip heading levels, start with
<h1>
, then
<h2>
, and so on. You can always resize the font size using CSS.

<p>
is a paragraph of text in HTML.

Not all elements have an opening and closing tag, some are self-closing tags, where the tag doesn't have a seperate closing tag.

<img>
is an image element, displaying the image referred to by either a file path or a URL in its src attribute. Setting an alt attribute is also necessary as it is text displayed when an image does not load properly, or if someone with a visual impairment wants to know the content of an image.

Notice how the

<img />
tag doesn't have a seperate closing tag.

Attributes

All HTML elements can have attributes as they provide additional information about the element. Attributes must always be written in the opening tag and as name and value pairs:

name="value"
. For example, the
<img>
tag has two attributes,
src
and
alt
.

What is CSS?

CSS stands for Cascading StyleSheet and it is used to style the content of an HTML document and describes how HTML elements are to be displayed on screen.

In CSS, we target different HTML elements using selectors, and then define properties for that element.

A CSS rule-set consists of a selector and a declaration block:

CSS syntax

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

Properties are unique CSS rules within declarations that have a set of possible values. We define them within a declaration block, and add semicolons after each one.

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

Common CSS properties and their value

Three different areas to add CSS There are three different areas we can place our CSS styles.

  1. Inline CSS (Not Recommended) We can directly place CSS in the opening tag of HTML elements using the style attribute.

Inline CSS has highest precedence, meaning if you were to change the CSS value for that property in a different area, then that change would not display. Inline CSS is not recommended because content and design are mixed up, making your content hard to read and it lacks CSS reusability.

  1. Internal Stylesheets (Use sparingly, if at all) We could also place all of our CSS in a
    <style>
    element in HTML, which should be placed within the
    <head>
    element of the HTML starter code.

Internal stylesheets should be used sparingly because it is effective for styling a single HTML page, but if you have multiple pages, it is time-consuming and repetitive to paste the CSS on every single document.

  1. External Style Sheets (Highly Recommended) We can create separate CSS stylesheets and import them into our HTML using the
    <link>
    element, which should be placed within the
    <head>
    tag.

index.html

styles.css

External style sheets is highly recommended because it keeps the HTML and CSS code seperate and it is simple to link the same stylesheet into other web pages if they share the same styles.