INTROduction TO HTML & CSS
COMP 126: Practical Web Design & Development for Everyone
SETUP
Download & install
a text editor: I recommend Visual Studio Code, but if you already use something else and prefer to continue doing so, that's fine (details here)
Chrome and Firefox (if you don't have them), and find/turn on (if needed) their developer tools
Codepen
There are lots of online platforms that allow you to quickly get your code up in a browser for testing. In this class, I'll use Codepen for lecture demos and code sharing. Please create an account at https://codepen.io/ and follow my account by searching for username
tkjn.
Anatomy of a website
your content in a .html file,
+ HTML tags for structure,
+ CSS declarations for styling,
+ JavaScript or other scripting language/s for behavior & interactivity,
+ a browser to display it in
= website
HTML
HyperText Markup Language: used to describe and differentiate the content and structure of a web page
Elements & Tags
Attributes
HTML Comments
<!-- the browser/parser ignores any HTML
you place between these symbols -->Get in the habit of commenting your code frequently and often
The HTML DOM
HTML5 elements you'll use a lot
<h1>top level header</h1>
<h2>header level 2</h2>
<h3>header level 3</h3>
<h4>header level 4</h4>
<h5>header level 5</h5>
<h6>header level 6</h6>
<p>paragraph text</p>
<a href="some url">link</a>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
<div>generic blockcontent container</div>
<span>generic inline text container</span>
<img src="path to image"
alt="text describing image">
<header>the content of
your header</header>
<nav>your navbar</nav>
<main>the main content
of the page</main>
<section>a group of
related content</section>
<aside>a sidebar</aside>
<article>a textual article
</article>
<footer>the conten of
your footer</footer><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale-1, shrink-to-fit=no">
<title>This appears in the browser tab</title>
</head>
<body>
All your content goes here
</body>
</html>HTML Starter Code
Let's set up a file structure & add our starter code
Types of paths/links/LOCATIONS
ABSOLUTE URL
<a href="https://www.google.com/">Link to Google</a>
RELATIVE URL
<a href="contact.html">Link to another page
in your website</a>
<a href="pages/contact.html">Link to another page
in your website inside a folder called "pages"</a>
Note that this approach also applies to linking to images,
CSS stylesheets, script files, and other stuff. For example:
<link rel="stylesheet" href="css/styles.css">
<img src="img/elephant.png" alt="graphic of elephant">
Absolute paths/URLs...
point to specific locations on the Internet but outside your project and usually start with http:// or https://. In web dev, relative paths are more flexible (and thus more stable), so we use them whenever possible. But we use absolute paths when we need to link to, for example...
-
external web sites
-
CDNs (content delivery networks): stylesheets, fonts, icons, and other assets hosted publicly by trusted sources (e.g., Google, Bootstrap)
-
Media hosted elsewhere, not in your project's file structure
Relative paths/URLs...
point to documents or locations within your project's file structure, relative to the location of the html page you are viewing. We usually use relative paths to link to
-
stylesheets located within your project's file structure (inside the same root directory)
-
images and media files located within your project's file structure (inside the same root directory)
-
other html documents in your file structure--i.e., between pages in your website
-
/ : up to root directory & start there
-
../ : up one level & start there (../../ etc)
for images...
| Path | Description |
| <img src="pic.jpg"> | "pic.jpg" is located in the same folder as the page you're working on |
| <img src="img/pic.jpg"> | "pic.jpg" is located in the "img" folder that is in the same folder as the file that you're working on |
| <img src="/img/pic.jpg"> | "pic.jpg" is located in the "img" folder at the root directory level |
| <img src="../pic.jpg"> | "pic.jpg" is located in the folder one level up from the current folder |
for CSS...
| Path | Description |
| <link rel="stylesheet" href="styles.css"> | "styles.css" is located in the same folder as the page you're working on |
| <link rel="stylesheet" href="css/styles.css"> | "styles.css" is located in the "img" folder that is in the same folder as the file that you're working on |
| <link rel="stylesheet" href="/css/styles.css"> | "styles.css" is located in the "css" folder at the root directory level |
| <img src="../styles.css"> | "styles.css" is located in the folder one level up from the current folder |
click on the image to explore some absolute & relative links/paths
CSS
"Cascading Style Sheet". CSS handles the presentation and styling of a website, allowing us to separate a site's styling from its structure and content (which are handled by HTML)
A CSS rule (or rule set) is made up of one or more HTML element selectors plus a declaration block.
A declaration block is made up of one or more declarations wrapped in curly brackets.
Each declaration is made up of a property and a value.
h1 {
background: pink;
font-size: 1.5em;
}CSS Syntax
selector
property
value
A CSS Rule Set
{
background: pink;
font-size: 1.5em;
}A CSS Declaration Block
font-size: 1.5em;
A CSS Declaration
declaration block
declarations
/* h1 {
color: green;
background: pink;
font-size: 1.5em;
}
*/
CSS Comment Syntax
COMMENT YOUR CSS! YOU WILL BE GLAD YOU DID!
p {
color: purple !important;
}THE !important rule
...more on this in a moment...
adding CSS to HTML
-
Uses the HTML <selector style=""> attribute
-
Only applies to one element at a time
-
Old school; NOT a preferred method
Adding CSS to HTML: inline (do not do)
Adding CSS to HTML: in the <head> (do sparingly)
-
Declarations placed between <style></style> tags within the <head> element
-
Best used only with demos or single-page sites that require very few declarations
-
This is the preferred method! Add a .css stylesheet to the project's file structure and link your .html documents to it via a <link rel> element in the <head>. (In a multi-page site, you must do this in the <head> of every single .html document.)
-
You can (and frequently do) link more than one stylesheet to a single html document to help organize styles.
Adding CSS to HTML: External stylesheet! Do this!
p {
property: value;
}img {
property: value;
}selects all <p> elements
selects all <img> elements
When you want to make sure that every single instance of a standard HTML element on a page receives a certain style, use its standard HTML element/tag name as your selector.
Types of CSS Selectors:
the Standard HTML Element
ID Selectors
IDs are for styled that you only need to apply once. We use them sparingly, often as a one-time override of an existing style.
ID names should be meaningful.
An id name is preceded by a # in the CSS.
Class Selectors
We use classes A LOT.
Use each class as many times as you want on any element you want.
Class names should be meaningful.
A class name is preceded by a . in the CSS.
<div class="info-card"></div>
<p class="article-txt"></p><div id="red-info-card"></div>
<p id="warning-txt"></p>-
Select elements by DOM position when you want to specify styling for an element according to its relationship with another element
-
Elements selected this way are more specific and will override elements selected with single HTML element selectors
p em {
color: red;
}This declaration selects all <em> elements nested inside <p> elements.
This <em> element will be
selected by the above declaration:
<p>This is <em>important.</em></p>This <em> element will not:
<h1>This is <em>important.</em></h1>DOM Position Selectors
Here's an example:
List elements in descending order, with a space between each.
...combine DOM position with specific element attributes (qualities)
DOM Position & Attribute Selectors...
all h1 elements with a footer parent element
footer > h1 {
color: red;
}all elements with a .frame class that appear immediately after an h1 element
h1 + .frame {
color: red;
}all p elements anywhere after a h3 element
h3 ~ p {
color: red;
}all a elements with href starting "https"
a[href^="https"] {
color: red;
}all a elements that link to PDFs
a[href$=".pdf"] {
color: red;
}all elements with .call class that are descendents of the element with id #contact
#contact .call {
color: red;
}...combine classes and IDs to create very specific selectors.
#call.first.contact {
background-color: aqua;
}
elements with a mix of ids & classes
Multiple Class/ID Selectors...
elements with both an id and a class
#contact.call {
color: blue;
}elements with two classes
.first.second {
color: yellow;
}<div id="contact" class="call"></div><div class="first second"></div><div id="call" class="first contact"></div>...style elements based on their current states
a:link {
color: purple;
}links that haven't been clicked
Pseudo-class selectors...
links that are active
a:active {
color: red;
}element being hovered over
a:hover {
color: yellow;
}elements that are the "first child" of a parent element--there are variations for other child statuses
p:first-child {
color: red;
}links that have been clicked before
a:visited {
color: orange;
}selected via keyboard or switch, not cursor
a:focus {
color: blue;
}...style part of an element or insert content before or after an element
p::before {
content: url(bird.jpg);
}
inserts something before element
Pseudo-element selectors...
first line of text of element
p::first-line {
color: red;
}first letter of element
p::first-letter {
color: yellow;
}first letter of elements of a specific class
p.warning::first-letter {
color: red;
}changes part of element selected by user
::selection {
color: orange;
}inserts something after element
h1::after {
content: "hi!";
color: red;
}more about pseudo-elements here
SPECIFICITY
-
inline styles (styles directly in the HTML; e.g., <h1 style="color:blue;">): highest specificity, highest priority
-
id selectors
-
class selectors, attribute selectors, pseudo-class selectors
-
normal element and pseudo-element selectors
-
the * selector (all elements): lowest specificity, lowest priority
PRIORITY within stylesheets
When rules conflict, who wins?
Cascading/priority between stylesheets
-
!important declarations in user's style sheet: highest priority
-
!important declarations in site author's (your) style sheet
-
normal declarations in site author's (your) style sheet
-
non-!important declarations in user's style sheet
-
browser (user agent) default styles: lowest priority
1. Importance
Priority factors
2. Specificity
3. Source order
.style1 {
background-color: aqua;
color: black;
border: none !important;
}p {
background-color: black;
color: white;
padding: 10px;
}
.style1 {
background-color: aqua;
color: black;
border: none !important;
}
#style2 {
background-color: pink;
border: 2px solid black;
}p {
background-color: green;
color: white;
padding: 10px;
}
p {
background-color: gray;
}More selectors, and more about selectors
the display property
-
in CSS, there are two primary types of default element: inline and block
-
each has different default behaviors
-
inline and block are values of the display property: e.g., {display: inline;}
-
inline elements: img, a, br, em, strong, span
-
block elements: p, h1-h6, ul, li, div, HTML5 structural-semantic elements, almost everything else
inline vs. block elements
inline vs. block:
default behaviors
using the display property
-
{display: inline;} turns element into an inline element: can't assign width & height
-
{display: block;} turns element into a block element
-
{display: inline-block;} makes element a block element (can assign width & height) that behaves like an inline element (runs L to R, no line break)
-
{display: contents;} makes the element's container disappear; contents become the child of the element the next level up in the DOM
-
there are lots more display values, (including {display: flex;} and {display: grid;} which we'll get to later); full list here
the CSS Box Model
EVERYTHING IS BOXES
THE CSS BOX MODEL
BOX MODEL PROPERTIES
The box that contains the content. Usually block-level. Width must be set by you; height is determined by the content unless you set it.
Can be set to any width. The border adds to the overall width & height of the content unless you use {box-sizing: border-box;}.
The space between the content itself and the border/outer edge of the box.
The space between the outer edge/border of an element and the outer edge/border of the next closest element/box. Btw, {margin: 0 auto;} applied to a block element is a nice trick to center it in the browser.
BOX MODEL DEMO
BOX-SIZING DEMO
create...
FONT MEASUREMENT UNITS
fixed
pixels and points: set units that never change
relative
fluid
em & rem: set units, but determined by values set on the parent or root element
%, vh & vw: scales upon viewport resizing based on various factors
MEASUREMENT UNITS
-
1px: fixed; size in pixels
-
1pt: fixed; 1/72 of an inch, used in print media, but not much online anymore
-
1em: relative; 1x text size of the parent element
-
1rem: relative; 1x text size of root element (i.e., <html> or the user's browser preferences; often 16px)
-
1%: fluid; if used on a font, it's 1% of the element's text size; if on width/height, it's 1% of the parent element's width/height
-
1vh & 1vw: fluid: 1/100th of the viewport's height or width
-
SO WHICH ONE DO I USE? Think fluid for containers and element widths, relative for fonts, fixed for small details. But there's room for exceptions and your preferences.
COLOR BASICS
HSL/HSLA
.color-rgb {
color: rgb(128, 80, 200);
}
.color-rgba {
color: rgb(128, 80, 200, 0.1);
}RGB/RGBA
.color-hsl {
color: 187, 73%, 39%;
}
.color-hsla {
color: 187, 73%, 39%, 0.1
}HTML keywords
.color-hex {
color: #1B9AAA;
} HEX
Let's experiment with Coolors...
TYPOGRAPHY BASICS
font-family
.text {
font-family: "Nunito Sans", sans-serif;
} font-size
.text {
font-size: 16px;
}
or: em, rem, %, vh, vw...Let's add a Google Font...
adding on...
126-HTML5 & CSS3 Foundations
By tkjn
