Technical Documentation Page

HTML Intro

HTML, or HyperText Markup Language, is the standard language used to create and design documents on the World Wide Web.

  • Every webpage is an HTML document.

HTML Basics

  • Elements and attributes are fundamental concepts that define the structure and behavior of a web page.

Elements are the building blocks of HTML pages. An element can consist of a start tag, content, and an end tag. For example,

This is a paragraph.

where

is the start tag, This is a paragraph. is the content, and

is the end tag.

Attributes: HTML elements can have attributes, providing additional information about the elements. Attributes are placed within the start tag and are often in the name/value format, like name="value". For example, Click Here where href is an attribute of the anchor element .

CSS Intro

CSS, or Cascading Style Sheets, is a style sheet language used for describing the presentation of a document written in HTML.

CSS is composed of selectors and declaration blocks. A selector targets the HTML elements you want to style, followed by a declaration block that contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

CSS is "cascading", meaning that when there are two or more conflicting CSS rules that point to the same element, the browser follows a certain set of rules to determine which one is most specific and therefore wins out.

CSS Basics

Selectors:

  • Type Selector: Targets HTML elements directly (e.g., div, p).
  • Class Selector: Targets elements with a specific class attribute (e.g., .classname).
  • ID Selector: Targets an element with a specific ID attribute (e.g., #idname). Attribute Selector: Targets elements based on an attribute or attribute value.
  • Pseudo-class and Pseudo-element Selectors: Target elements in specific states or positions (e.g., :hover, ::first-line).

A common CSS property is used to manage the text color of a website. Proper syntax for changing the font color of a paragraph would look like:

            p {
color:blue;
}

Recap and Additional Info

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are foundational technologies for building and designing web pages and web applications.

HTML and CSS are often the starting point for individuals learning web development due to their relatively gentle learning curve. There is also a vast community of developers and an abundance of resources available for learning and troubleshooting.

If you are interested in learning more, consider checking out the Responsive Web Design certification from freeCodeCamp, here.

Free Code Camp Project 14