Intro to HTML + CSS
Welcome!
Some "rules"
- We are here for you!
- Every question is important
- Help each other
- Have fun
Get Started: Tools
We'll be using the following tools in class today:
-
Browser
-
Text Editor (your preference)
- Mac: Atom, SublimeText, TextWrangler, jEdit
- Windows: Atom, SublimeText, Notepad++
- Linux: Atom, SublimeText, jEdit, gedit
What is HTML?
- HTML is the code that allows us to build websites
- It adds structure to a webpage's content
HTML: Hyper Text Markup Language
What's a Markup Language?
A markup language is a set of markup tags:
<tagname>content</tagname>
Each HTML tag describes its content:
<p>This sentence goes in a paragraph (p) tag.</p>
HTML in Action
If you 'View Page Source', you see this:
Anatomy of a Website
Your Content
+ HTML: Structure
+ CSS: Presentation
= Your Website
A website is a way to present your content to the world, using HTML to structure that content, and CSS to make it look good.
Anatomy of a Website
- Content:
A paragraph is your content -
+ HTML: Putting your content into an HTML tag to make it look like a paragraph is structure
<p>A paragraph is your content</p> -
+ CSS: Making the paragraph's text red with an 18px font size is presentation
-
= Website: In the browser, the paragraph looks like:
A paragraph is your content
Tag Breakdown
HTML Coding Tip #1
Whenever you type an opening tag, immediately type the closing tag, then fill in your content.
-
<strong> -
<strong></strong> -
<strong>Now I can add content!</strong>
Anatomy of an HTML element
Attributes
-
Attribute Name: class, ID, style, href, etc.
- Placed inside an opening tag, before the right angle bracket.
-
Attribute Value
- Value is the value assigned to a given attribute
- Values must be contained inside quotation marks:
<a href="https://www.hubspot.com" class="fancy-link">HubSpot</a> <img src="my_picture.jpg" /> <div id="intro">Lorem ipsum</div>
The Fundamental Structure of an HTML File
Doctype
The first thing in an HTML file is the doctype, which tells the browser which language the page is using:
<!DOCTYPE html>
The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid.
The Fundamental Structure of an HTML File
HTML Element
After <!DOCTYPE html>, the page content must be contained between <html></html> tags.
<!DOCTYPE html>
<html>
</html>
The Fundamental Structure of an HTML File
Head Element
The head contains information about the page, but does not contain page content. It contains elements that let the browser know:
- The page's title
- Meta information about the page for search engines: Search results title and description
- Where to find the CSS file (which styles the page)
<!DOCTYPE html>
<html>
<head>
</head>
</html>The Fundamental Structure of an HTML File
Body Element
The body contains the actual content of the page. Everything that is contained in the body is visible to the user.
Most of your work will be done within the <body></body> tags!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Head and Body Tags: Example
The Fundamental Structure of an HTML File
Memorize this ☺
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
All of your page content goes here
</body>
</html>Nesting
All elements "nest" inside one another
Nesting is what happens when you put other containing tags inside other containing tags. For example, you would put the <p></p> inside of the <body></body> tags. The <p></p> is now nested inside the <body></body>, and is one of its descendants
Nesting: Example
All your page's content is 'nested' inside the body element:
<body>
<p>
A paragraph inside the body element
</p>
</body>
And other elements can be nested inside of that:
<body>
<p>
A paragraph inside the body element
<em>which has some italic text</em>
and
<strong>some bold text</strong>
</p>
</body>⇒ A paragraph inside the body element which has some italic text and some bold text
Nesting
HTML elements are often looked at as a family tree. Developers will often refer to elements as "siblings", "immediate children", and "descendants".
Can you name any siblings?
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
All of your page content goes here
</body>
</html>How about immediate children?
HTML Coding Tip #2
- Whenever you add a 'child' element:
<body> </body> - ... indent it on a new line!
<body> <p>I'm indented!</p> <p>I'm also indented!</p> </body>
This will make your life much easier down the road, as you add more content and style your pages.
Get Started: Folder Structure
All the files for your site should be stored within the same folder.
This includes:
- HTML Files
- CSS Files
- Images
- JavaScript files
- Anything else that will appear on your site
Note: File names should not include spaces or special characters. File names ARE case sensitive.
Activity: Project Setup
- Create a master-class folder that contains a css folder and an images folder.
- Open your text editor and create a new file. Save it as index.html in the master-class folder.
- Add the fundamental structure (a doctype, head, title and body) to index.html.
Ignore the styles.css file for now.
Common HTML Tags
Paragraph
HTML:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>White space outside of any tags won't render (that's just for us humans!):
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
Result:
Paragraph 1
Paragraph 2
Paragraph 3
Common HTML Tags
Paragraphs in Action
Paragraphs allow you to format your content in a readable fashion.
You can edit how paragraphs are displayed with CSS
Common HTML Tags
Headings
HTML:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Result:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading number indicates hierarchy, not size. Think: Outlines from high school papers
Common HTML Tags
Headings in Action
Common HTML Tags
Formatted Text
HTML:
<p>Here is a paragraph with <em>Emphasized</em> text and <strong>Important</strong> text.</p>
Result:
Here is a paragraph with Emphasized text and Important text.
Note: em and strong are meant to indicate meaning through style. If you want italicized or bold text for appearance and not to communicate meaning, you should use CSS.
Common HTML Tags
Links
Standard links have three components:
- The tag:
<a></a>
- The content (the clickable portion within the a element):
HubSpot's Homepage
- The href attribute (the destination of the link):
href="http://www.hubspot.com"
<a href="http://www.hubspot.com">HubSpot's Homepage</a>Common HTML Tags
Additional Link Options
- The title attribute for descriptive 'hover' text:
title="View HubSpot's homepage"
- The target attribute:
target="_blank" (opens link in a new tab)
<a href="http://www.hubspot.com" title="View HubSpot's homepage" target="_blank>HubSpot's Homepage</a>Common HTML Tags
Additional Link Options
- Surround another element, such as a heading or images, within <a></a> tags to link it
HTML:
<a href="http://petsmart.com">
<img src="http://lorempixel.com/150/200/animals/" />
</a>
Result:
Common HTML Tags
Additional Link Options
- Make an email link, which launches a user's mail program, by inserting mailto: directly before the email address
<a href="mailto:liz@hubspot.com">Email me!</a>
Common HTML Tags
Images
Images have three components:
- The tag:
<img />
- The src attribute:
src="http://lorempixel.com/100/100/city/"
- The alt attribute:
alt="Picture of a city"
<img src="http://lorempixel.com/200/200/city/" alt="Picture of a city" />* Notice: This tag is our first example of a stand-alone or "self-closing" element.
File Paths
Relative vs. absolute paths for links, images, etc.
-
Relative
- Relative paths change depending upon the page the link is on.
- Links within the same directory need no path information.
"filename.gif" - Subdirectories are listed without preceding slashes.
"images/filename.gif"
- Links within the same directory need no path information.
- Relative paths change depending upon the page the link is on.
-
Absolute
- Absolute paths refer to a specific location of a file, including the domain.
"http://www.hubspot.com/images/filename.gif" - Typically used when pointing to a link that is not within your own domain.
- Absolute paths refer to a specific location of a file, including the domain.
Common HTML Tags
Line Break
<p>
You spin me right round, baby<br />
Right round like a record, baby<br />
Right round round round
</p>
You spin me right round, baby
Right round like a record, baby
Right round round round
Common HTML Tags
Unordered and ordered lists
HTML:
<ul>
<li>Unordered List Item</li>
<li>Another List Item</li>
</ul>
<ol>
<li>Ordered List Item</li>
<li>Another List Item</li>
</ol>
Result:
- Unordered List Item
- Another List Item
- Ordered List Item
- Another List Item
Unordered lists (ul) are bulleted by default, while ordered lists (ol) are numbered by default.
Common HTML Tags
Lists in Action
Lists can be used to organize any list of items.
You'd be surprised how often lists are used in web development.
Common HTML Tags
Layout Dividers
- <div>
- <section>
- <nav>
- <main>
- <aside>
- <article>
- <header>
- <footer>
Activity: Add HTML
- Open index.html in your text editor
- Add a <h1> containing your name
- Add two <section>s, one with a class attribute of main and another with a class attribute of footer
- Go wild — add paragraphs, bold and italicized text, lists, links, and images
CSS: What can it do?
All colored text, positioning, sizes
CSS: What is it?
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed when:
- on a screen
- on devices (tablets, phones, etc.) — Example »
- on printed paper
- when animated
See the Pen Completely Unnecessary Bender by Liz Shaw (@anythingcodes) on CodePen.
HTML + CSS
- HTML structures the content:
<p>This paragraph should have red text.</p> - Since CSS is a different language, it is kept in a different file (.css instead of .html). CSS says how your structured content should look:
p { color: red; } - On your Website, the result is:
This paragraph should have red text.
Without CSS, your HTML pages would look boring ☺
How does it work?
- You make an HTML file
- You make a CSS file that describes how specific HTML elements should look
- Within the <head></head> of your HTML file, you link to your CSS file
- The CSS searches through and selects specific elements that you've said should be styled, and applies that styling
CSS Syntax
selector {
property: values;
}
- A block of CSS code is a rule
- The rule starts with a selector
- It has sets of properties and values
CSS Syntax
You can add multiple property-value pairs to a rule, each ending with a semicolon:
body {
color: lightblue;
background-color: black;
text-transform: uppercase;
}
CSS Coding Tip #1
Just like HTML, CSS ignores whitespace. All you need is for each rule to be in the correct format.
Best: ✔
p {
font-size: 22px;
text-align: center;
color: red;
}
Decent:
p{font-size:22px;text-align:center;color:red;}
Not-so-great:
p {
font-size:22px;
text-align : center;
color: red;
}
The base format of a rule is selector{property:value;}
It doesn't matter where whitespace goes, as long as the format is correct
Connecting CSS to HTML
3 ways
- Inline
- Embedded
- External ✔
Connecting CSS to HTML
1. Inline
<p style="color:red;font-size:12px;">Some text.</p>- Not preferred ✗
- Uses the HTML attribute called style
- Difficult to use in large projects
Connecting CSS to HTML
2. Embedded
<head>
<style type="text/css">
p {
color: red;
font-size: 12px;
}
</style>
</head>- Not preferred ✗
- Inside head element
- Uses style tag
- Needs to be placed in each HTML file
Connecting CSS to HTML
3. External
<head>
<link rel="stylesheet" href="css/styles.css" />
</head>- Preferred by developers everywhere! ✔
- External CSS saves a lot of work by controlling the look and feel of multiple pages at once
- Easy to maintain
- Useful when working with a team
- Reduced bandwidth
- Easier for search engines to crawl your site's content
Connecting CSS to HTML
3. External
What We'll Be Coding Today
Activity
- Go to tiny.cc/hubspothtml2 and download the file
- Unzip the file and move the master-class-2 folder to your Desktop or another convenient area
- Create a new file in your text editor and save it as styles.css within the master-class-2/css folder
- Add a <link> to css/styles.css in the <head> of the index.html file
<link rel="stylesheet" href="css/styles.css" />
Now we can begin styling!
Selector: Element
Enter the element's tag name to target those elements:
p {
color: aqua;
}
p { } in CSS corresponds to <p></p> in HTML
The following selects all image elements:
img {
width: 600px;
}
img { } in CSS corresponds to <img /> in HTML
Selector: Descendant
To target elements that are descended from another element, use a selector for the ancestor, then a space, then a selector for the descendant:
HTML:
<div>
Buy one get one
<strong>free</strong>
<p>
Offer valid
<strong>today</strong>
only
</p>
</div>CSS:
div strong {
background-color: yellow;
color: blue;
}
Result:
Offer valid today only
Selector: Class
Enter a period (.)
followed directly by the class attribute's value
to target all elements with that class:
HTML:
<p class="warning">Lorem ipsum</p>
<span class="warning">Dolor sit amet</p>
CSS:
.warning {
color: red;
}
Result:
Lorem ipsum
Dolor sit amet
.red { } in CSS corresponds to <tagname class="red"></tagname> in HTML
Property: color
The color property changes the color of the text.
p {
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.7);
}
Options:
- Color name (e.g. white)
- Hexadecimal value (e.g. #FFFFFF or #FFF)
- RGB value (e.g. rgb(255, 255, 255) )
- RGBA value for opacity (e.g. rgba(255, 255, 255, 0.5) )
There are 140 reserved color names, including: black, blue, aqua, fuchsia, grey, green, lime, maroon, navy, olive, purple, red, and teal
See a full list »
Property: text-align
The text-align property aligns text to the left, right, or center
p {
text-align: left;
text-align: right;
text-align: center;
}
Property: font-family
The font-family property defines which font is used
body {
font-family: Arial;
}
If a font name is more than one word, it goes in quotation marks (like "Helvetica Neue").
Preferred ✔: Use a prioritized list. The page will load whichever font it recognizes first in the list:
body {
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}
Helpful site: CSSFontStack.com »
Properties:
font-style and font-weight
The font-style property sets italic styling for text
The font-weight property sets text boldness
h4 {
font-style: normal;
font-style: italic;
font-style: oblique;
font-weight: normal;
font-weight: bold;
}
Property: background-color
The background-color property changes the color of the background
body {
background-color: black;
background-color: #000000;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.7);
}
Property: background-image
The background-image property changes the background image of an element
body {
background-image: url('images/bg.jpg');
background-image: url('http://lorempixel.com/1800/700');
}
Just like images and links, the path to your background image can be relative or absolute
Property: padding
- Space between the border and the content
- Adds to the total width of the box
- Same background color as the content
Padding
15 pixels on all sides:
selector {
padding: 15px;
}25 pixels on top only:
selector {
padding-top: 25px;
}Property: padding
See the Pen Padding by Liz Shaw (@anythingcodes) on CodePen.
Property: float
selector {
float: left;
float: right;
}
The float property shifts an element to the left or right on the current line, taking it out of normal flow
When an element is floated, subsequent elements wrap around it
Property: float
An Example
See the Pen Float - Before by Liz Shaw (@anythingcodes) on CodePen.
Properties: width
Sets the width of an element
img {
width: 100px;
}
Property: height
Sets the height of an element
footer {
height: 200px;
}
Activity
Get Styling!
Tip: Try to use the descendant selector to style descendants, and the class selector to style elements with classes.
Tip
Using the Inspector
Not sure where styles are coming from? Right-click a page and choose 'Inspect Element'!
Additional Resources
-
Class Slides
-
Paid Courses
- Codeschool (online)
- Pluralsight (online)
- Udemy (online)
- Startup Institute (in-person and online)
- General Assembly (in-person and online)
- Girl Develop It (in-person)
-
Free Courses
- Free Code Camp (online)
- Khan Academy (online)
- Meetup
- YouTube tutorials