HTML & CSS¶

OVERVIEW¶

Overview¶

The Purpose Of HTML & CSS
Intro To HTML
Intro To CSS

The Purpose Of HTML & CSS¶

Introduction¶

In this lecture we introduce HTML and CSS. HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are two of the building block languages of web applications, and they are considered “front-end” technologies. HTML gives content structure and meaning by defining the “elements” that the web page is made up of. CSS is a presentational language that is used for only for the layout and styling of a webpage. JavaScript, together with HTML and CSS, is responsible for bringing our websites to life.

Check out this visual analogy for what HTML, CSS, and JavaScript do respectively:

Intro To HTML¶

What is HTML?¶

HTML stands for Hyper Text Markup Language. HTML is used to create the infrastructure of a webpage. HTML is NOT a programming language; HTML is considered a “markup” language. HTML does not contain logic, and HTML elements contain very little, if any, native styling. HTML is simply used to specify the structure and basic parts of a page.

Set Up and Basics¶

Making an HTML File HTML files are created by ending the name of a file with an .html extension. This extension tells browsers and code editors to read the file as HTML.

HTML Syntax Overview HTML is based around filling “tags” with “content” in order to create HTML “elements”.

<thisisatag>This is the content</thisisatag>

Above is the basic syntax of an HTML element.

First is the tag itself. HTML tags are declared using angle brackets <>, with the name for the tag contained within the <> brackets.
Most HTML tags come in pairs of opening and closing tags. The closing tag begins with a / immediately after the first angle bracket to indicate that it is corresponding closing pair of the HTML tag.
Between the angle brackets is where developers specify the type of tag they are using. There are various types of tags native to HTML, which will be covered shortly.
Tags are wrapped around the content that is stored inside that HTML tag. The content together with the tag creates an HTML element.

Self-Closing Tags

Note: Some elements are called “self-closing” or “void” elements because their tags should not be written in pairs. This is because they are not designed to contain content. See the example below:

<input />

Notice that there is only one tag, and it uses a forward slash at the ending of the tag.

Comments in HTML¶

Comments can be written in HTML code to help clarify what’s going on in the development environment. Comments will not appear in the browser, so they’re not necessarily intended to be viewed by the users of a site. Comments are instead an excellent way to communicate with other developers, and even ourselves, about what’s supposed to be going on in the code.

Comments begin with .

<body>
  <!-- This is a comment that will not be displayed on the web page -->
</body>

Basic HTML Page Structure¶

Here’s an example of a basic HTML page structure:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <!-- Meta tags and other external links go here, and the link and title tags below can be used to change the icon/title of your webpage -->
      <link rel="shortcut icon" href="some-URL-or-path-goes-here" />
      <title>The Title</title>
    </head>
    <body>
      <!-- Content of page goes inside the body tag -->
    </body>
  </html>

Broken Down¶

<!DOCTYPE html> - This tag is pretty unique, and it’s actually not an HTML element; it’s an instruction to a web browser that lets it know to expect html.

<html> - The html tag tells the browser that everything contained inside the tag should be read as html. The lang “attribute” can be used to specify the human language that the contents are written in. This element will act as the root tag for the file, which means that everything will be contained inside of this tag.

<head> - The head tag is a container used to contain “metadata” (data about data). Metadata is what is used to define the title of the document, character set, and other details that are relevant for accessibility and SEO. Metadata is not displayed on the web page for the user.

<title> - This is a metadata tag that will contain the title of the document.

<body> - The body tag is the container for all the elements that will make up a web page. Everything inside of the body tag will be displayed on the web page. This is where developers will store elements such as divs, spans, hyperlinks, text, etc.

Meta Tags¶

Meta tags are used to provide information about a site that can be used by search engines and other software. Web crawlers and search engines use the metadata contained within meta tags to evaluate, rank, and sort through websites. Good usage of metatags can help optimize a site’s ranking in search results.

Meta Tags Examples:¶

<head>
  <meta charset="UTF-8" />
  <!-- charset stands for character set, and this information is used so the web browser knows which characters, or alphabets, are being used. UTF-8 (Unicode) covers almost all of the characters and symbols used in the world. -->
  <meta name="description" content="best website ever made" />
  <!-- the description tag has a content attribute that dictates the primary description of your site as it appears in search engines -->
  <meta
      name="keywords"
      content="greatest, best, ultimate, GOAT, website, of all time"
  />
  <!-- keywords are used to help search engines recognize what search words can be used to point users toward a site-->
  <meta name="author" content="matias perez-ferrero" />
  <!-- the author tag serves to credit the creator of a website -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- a browser viewport is the area of web page in which the content is visible to the user. The width attribute can be used to set a specific width in pixels of the intended display. Here it is set to a special value (“width= device-width”) which is the width of the device in terms of CSS pixels at a scale of 100%. The initial-scale property governs the zoom level when the page is loaded for the first time. -->
</head>

Semantic HTML¶

Semantic HTML is HTML that introduces context or meaning to the structure of a webpage, instead of using elements simply for display. Appropriate usage of semantic HTML is critical for accessibility issues and Search Engine Optimization (SEO).

Non-semantic Examples: <div>, <span>

Semantic Examples: <footer>, <header>, <nav>, <form>, <table>, <article>, <section>

Notice how semantic tag names imply some significant meaning about their contents. Appropriate usage of semantic HTML can boost a site’s SEO, and also enable screen reading softwares to work more effectively for people with disabilities.

When it comes to making your sites more accessible, here are three easy tips to follow:

Always use the semantic tag alternative if it’s an option
Attach labels to each of your <input /> elements
Use a <button> tag whenever you use an onclick event handler

Accessibility Laws

As of Oct. 2019, the Supreme Court has cleared the way for discrimination law suits against websites that are not accessible to people with disabilities. The Supreme Court let stand a ruling that the Americans With Disabilities act requires web pages to be equally accessible as any other utility to those with disabilities. This means that creating accessible websites will be legally mandatory in the near future. In light of this, be aware that chrome has developer tools that can help audit accessibility issues, and you can also add this extension that provides more advanced features for discovering accessibility issues: https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US

Intro TO CSS¶

What is CSS?¶

CSS, which stands for Cascading Style Sheets, is another building block language of the web. CSS is a presentational language that is used only for the styling and layout of a page. CSS files are files that have the .css extension.

How to Write CSS - The 3 Main Ways¶

1. Inline CSS¶

Inline CSS is created per element by using the style attribute on the element. Inline CSS is not considered best-practice as it bloats files, it makes it difficult to make broad styling changes, and it can become difficult to pin point where the styling of a page is coming from.

<button style="color:blue;font-size:12px">Button Text</button>

2. Internal CSS¶

Internal CSS is when CSS written inside of the <style> tag of an HTML document. This <style> tag should be written inside of the <head> tag of the html. Internal CSS can bloat a file and make it more difficult to comprehend, and is consequently not considered best-practice.

Internal CSS Example:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <style>
        h1 {
          background-color: blue;
        }
      </style>
      <title>Document</title>
    </head>
    <body>
      <h1>I'm a header</h1>
    </body>
  </html>

3. External CSS¶

External CSS is when CSS is brought in via an external stylesheet separate to the HTML file, and then brought in using a <link> tag in the <head> of an HTML document. The href attribute of the <link> should point to the stylesheet, and the type attribute should specify that the file is a stylesheet. External CSS is is considered good practice, as it enables isolation and clarity of code.

External CSS Example:

<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

Reset CSS¶

By default, browsers apply their own set of styling rules to the elements inside of an HTML file. For example, buttons, headings, paragraphs, and other elements come by default with some margin, padding, borders, and other CSS styling. This can often lead to headaches when attempting to replicate styling across browsers. Fortunately, developers can use a reset css file to remove all default styling from a browser, and essentially start from scratch with total control over the styling of a page.

For a link to a premade reset css file, see here: https://meyerweb.com/eric/tools/css/reset/

CSS Selectors¶

Selectors are patterns used to select the elements to be styled. Selectors are followed by a set of curly braces called “declaration blocks”, which contain individual semi-colon separated style declarations. The individual style declarations are comprised of two main parts, a property and a value for that property.

Multiple Styles

Each declaration block can contain multiple style declarations.

The general syntax for a declaration block and style declarations looks like this:

selector {
  property1: value;
  property2: value;
}

Common Selectors¶

tagname - Ex. nav. This applies to all nav tags in your html document.

nav {
  color: red;
}

#some-id - Ex. #my-main-section. This applies to an element you gave this ID Selector to.

#my-main-section {
  color: red;
}

.classname: Ex. .action-button. This applies to any element that has been assigned this class.

.action-button {
  color: red;
}

Pseudo-classes¶

Pseudo-classes are keywords that can be added to a selector to specify a special state of the selected elements. For example, :hover can be used to change an element’s color when a user’s pointer hovers over the element.

Example:

button:hover {
  color: blue;
}

There are a number of pseudo-class selectors, and they can be chained together. Some of the more commonly used pseudo-classes are :hover, :active, and :focus. For a list of all pseudo-classes and more information about them, see here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

CSS Specificity¶

CSS Specificity refers to a set of rules that browsers use to determine which styles are applied when there is a conflict. The built in rules work on a point evaluation system. Each type of selector has a different point value given to it. The style that is ultimately applied comes from whichever selector has the highest point value. See below for specific point values per selector.

CSS Top to Bottom

Keep in mind that CSS executes top-to-bottom, and this can affect your styling too.

Inline Styling - 1000 pts. Inline styles always override styles declared in an external stylesheet.
Id Selector - 100 pts.
Class Selector - 10 pts.
Element selector - 1pt.

!important - Can be used to override all other denoted styles. You should avoid using !important at all costs, as it can make debugging CSS considerably more difficult. It is better to sort out where styling is coming from rather than resort to !important when dealing with undesirable effects.

CSS Specificity

Universal selectors, combinators (>, +, etc.) have no effect on CSS specificity.

Finally, for a more comprehensive breakdown of CSS Specificity, see here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Box Model¶

All HTML elements can be thought of as boxes. In CSS, the “box model” is used when talking about the design and layout of elements, and it can be thought of essentially as a 4 part box that wraps around every element.

Here’s a visual representation:

Box Model Described¶

Margin - The white space that separates one element from another
Border - The border of the box that separates the padding from the margin.
Padding - The “padding” or buffer space between the content of an element and its border.
Content - The space allocated to the actual content of an element, which may be text, images, etc.

Box-sizing Property¶

The box-sizing CSS property determines how the total width and height of an element is calculated. This property accepts two values, content-box or border-box. Their behavior is as follows:

box-sizing: content-box - This is the initial and default value as specified by the CSS standard. The width and height properties include the content, but does not include the padding, border, or margin.
box-sizing: border-box - The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box.

Example CSS:¶

#border-box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: solid blue 10px;
  padding: 5px;
  background-color: yellow;
}

#content-box {
  box-sizing: content-box;
  width: 100px;
  height: 100px;
  border: solid blue 10px;
  padding: 5px;
  background-color: yellow;
}

Colors¶

Appropriate use of colors on a webpage can help set a website apart, and make the site more engaging and appealing to users.

See this blog post for examples of well designed color schemes: https://visme.co/blog/website-color-schemes/ (Links to an external site.)

For useful tools in creating your own color schemes and gradients, visit the following sites: https://coolors.co/ (Links to an external site.) https://cssgradient.io/

Text Properties and Fonts¶

Text on a web page can be manipulated through various properties in CSS. Here are a few:

font-size - changes the size of a font
font-weight - controls how bold the font appears
color - changes the color of the text inside of an element
line-height - determines the space between two inline elements
text-align - defines the horizontal alignment of text within the content box of an element
font-family - determines the font family of the text on the page
letter-spacing - determines how much white space should be between each character

Text Properties and Fonts continued…¶

We can also bring in fonts that are not native to a browser through <link> tags in our HTML. Here’s an example of what that looks like:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <link
          href="https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao&display=swap"
          rel="stylesheet"
      />
    </head>
    <body>
      <!-- Content of page-->
    </body>
  </html>

Background Properties¶

These can be used to modify the background appearance of an element. Colors as well as images can be used as backgrounds for elements. Examples include:

background-color - can be used to assign a background color to an element.
background-image - can be used to assign an image as a background for an element.
background-size - determines the size of a background image. The image can be left to its natural size or adjusted.
background-position - can be used to adjust the alignment of the background image. Some of the possible values include center, top, bottom, right, left, and x/y - coordinates.
background-repeat - can be used to set if/how a background image will be repeated.

Example:

div {
  background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

Units¶

CSS has a number of units for expressing length, and they fall into two main categories, “absolute” and “relative” units.

Absolute Units:

cm - centimeters
mm - millimeters
in - inches (1in = 96px = 2.54cm)
px - pixels (1px = 1/96th of 1in)
pt - points (1pt = 1/72 of 1in)
pc - picas (1pc = 12 pt)

# Note: px is the most commonly used of the absolute units.

Relative Units:

em - Relative to the font-size of the element (2em means 2 times the size of the current font)
rem - Relative to font-size of the root element
vw - Relative to 1% of the width of the viewport*
vh - Relative to 1% of the height of the viewport*
% - Relative to the parent element