The Ultimate HTML & CSS Study Guide

1
The Ultimate HTML & CSS

Study Guide
Class Lessons
● Lesson 1 ● Lesson 6 ● Lesson 11 ● Lesson 16 ● Bonus 1
● Lesson 4 ● Lesson 9 ● Lesson 14 ● Lesson 19
● Lesson 5 ● Lesson 10 ● Lesson 15
Terms & Definitions
● <a> ● clear ● GitHub ● Link accessibility ● <section>

● Absolute URLs ● Closing tag ● Global styles tips ● Selector
● Add new pages ● Code formatting ● Google Fonts ● <link> ● Self-closing tag
● alt attribute ● color property ● Grouping CSS ● Linking images ● Semantic
● Alt text tips ● Comments selectors ● list-style elements
● Animated gifs ● Common page ● Handwriting ● mailto link ● Serif fonts
● <article> layouts fonts ● <main> ● <span>
● <aside> ● Contrast ● <head> ● margin ● src attribute
● auto value ● CSS ● <header> ● Meta tags ● <strong>
● background ● CSS block ● Heading tags ● <meta> ● Structural tags
● background- ● CSS Box Model ● height ● Monospace fonts ● Style tile
position ● CSS comments ● Hero image ● <nav> ● Syntax
● background-size ● Design comp ● Hierarchy ● Nested elements highlighting
● Best practices ● Developer tools ● href attribute ● no-repeat ● target attribute
● Block element ● Display fonts ● HTML ● normalize.css ● Text editor
● <body> ● display property ● HTML attributes ● Opening tag ● text-align
● Boilerplate ● <div> ● HTML comments ● Ordered lists ● text-decoration
● border ● Document flow ● HTML entities ● outline ● text-indent
● border-radius ● <em> ● HTML tags ● overflow ● text-transform
● box-sizing ● Fallback color ● IDs ● padding ● <title>
● Brower-added ● float ● IDs for navigation ● Panels ● Universal
styles ● font-family ● <img> ● Property selector (*)
● Card ● font-size ● Inline element ● QA ● Unordered lists
● Chrome ● font-style ● inline-block ● Relative URLs ● Value
DevTools ● font-variant ● Layout ● repeat ● vertical-align
● Class & ID ● font-weight techniques ● Root ● Web safe fonts
namign tips ● <footer> ● Line break (<br>) ● Sans serif fonts ● width
● Classes ● Generic font ● line-height ● Screen reader ● word-spacing
● Classes vs. IDs families
The Ultimate HTML & CSS Study Guide

2
Lesson 1 - Welcome! So What's HTML
HTML - Hypertext Markup Language is the language used on the web to tag text to build
and structure a web page.
HTML tags - HTML code that marks up, AKA tags, the text, images, links, content, and
structural elements so that your computer’s browser knows each piece of content and
understands how to render it.
Opening tag - A tag that indicates the start of an element, like <p> and <h1>.
<p>Ferrets were domesticated 2,500 years ago.
Closing tag - A tag that indicates the end of an element, like </p> and </h1>.
<p>Ferrets were domesticated 2,500 years ago.</p>
Heading tags - Tags that mark important information, like the title of a website or
section name. The <h1> tag is used for the most important heading on the page. Headings
tags are also known as headline tags or header tags.
<h1>Fun Facts About Ferrets</h1>
Self-closing tag - A tag that doesn't require a closing tag. Common self-closing tags
include <br> and <img>.
<p>1600 Pennsylvania Avenue NW<br>Washington, D.C.

20500<br>+1-202-456-1414</p>

3
Text editor - A computer program where you'll write and save your code. Also called a
"code editor."
Syntax highlighting - Feature in a text editor that uses different colors and fonts to
make code easier to type, read, and debug.
Back to Top ↑
Lesson 2 - HTML for Organizing Text
Hierarchy - Marking sections with different heading tags to show their relative
importance. There are 6 heading tags to choose from: <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>.
Browser-added styles - Default styling browsers assign to HTML tags, like font size,
font type, font weight, and spacing.
Screen reader - A software used by blind or visually impaired visitors to navigate and
read a computer screen. Popular free screen readers include NVDA and VoiceOver (built
into Macs).
Block element - Elements that, by default, take up the entire width of a page. Each block
element starts on a new line.
Inline element - Elements added inside block elements that don't start on another line.
<strong> - Inline element with a browser default bold font style. It's a semantic tag
indicating that the text is important.
<p>If you can dance and be free and not be embarrassed, you can

4
<strong>rule the world</strong>.</p>
Quote by Amy Poehler
<em> - Inline element with a browser default style of italic. It's a semantic tag indicating
that the text is emphasized.
<p>There will come a time when you'll use the skills you've worked so hard
to learn to <em>create a better life</em> for yourself.</p>
Line break (<br>) - An inline element that breaks a line of text, returning it to the next
line.
<p>Dance until your bones clatter.<br>What a prize you are.<br>What a lucky

sack of stars.</p>
Poem by Gabrielle Calvocoressi
HTML entities - Code for characters you may not have on your keyboard, like letters
with accent marks (õ) or symbols like ©. See W3 Schools page on HTML Entities for more
info.
Back to Top ↑
Lesson 3 - Lists!
Ordered lists - A list with items in a particular order, like recipe steps or a ranking of your
favorite TV shows. The default list style is numbers. You'll use the <ol> and <li> tags to
create an ordered list.
<h3>Most Populus Countries</h3>

<ol>
<li>China</li>
<li>India</li>
<li>United States</li>

5
</ol>
Unordered lists - A list of items with no particular order, like shopping lists or navigation
elements. The default list style is bulleted. You'll use the <ul> and <li> tags to create an
unordered list.
<ul>
<li>Red</li>
<li>Yellow</li>
<li>Blue</li>
</ul>
Code formatting - A technique for making code easier to read, faster to edit, and
simpler to debug. Examples of code formatting include indenting code and adding
whitespace between code lines.
Comments - Messages within your code with important information like reminders,
notes to other programmers, and explanations about the function and use of code. The
text in the comments isn't visible on the web page. You can create HTML comments and
CSS comments (Lesson 9).
HTML comments - Comment formatting in HTML uses  to surround the
comment.
<h2>What's New?</h2>

To use comments to deactivate a block of HTML code, wrap the code block in the comment:


6
Back to Top ↑
Lesson 4 - Images & Alt Text
HTML attributes - Characteristics or values of an element that determine how the

element will behave in the browser. HTML attributes are also used in combination with CSS
to modify an element.
<img> - Self-closing, inline element to add images to your page.
src attribute - Attribute that determines the source of the image that will appear on the
page.
alt attribute - Attribute that contains information about the image. The "alt" is short for
"alternative" because it provides a substitute text description if the image doesn't load
properly. Alt text also describes the image to persons who are blind or visually impaired
and use assistive technology like screen readers.
<img
src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/up
loads/2021/12/pexels-photo-4580745-400x380-1.jpeg"
alt="rabbit with a party hat and cupcake celebrating a birthday">
Alt text tips - To create alt text that's a substitute for an image:
● Keep it brief (125 characters or less)

● Get right to the point (skip “image of” and “gif of” or similar wording)
● Don't duplicate the caption
● Describe the image's content and intention
Animated gifs - Gifs are soundless, animated, and looping images kinda like a flipbook.
Add them to a web page just like a static image.

7
<img
src="https://media2.giphy.com/media/IMtNRQpKOhsis/giphy.gif?cid=ecf05e4732q
pqejgw3d9jqyhjwqoknlrtv3h7osnturvvtl6&rid=giphy.gif&ct=g"
alt="annoyed cat with bunny ears on its head">
Back to Top ↑
Lesson 5 - Links
<a> - The anchor tag is an inline element that creates links from one website to another
(external links) or links to a different part of the same website (internal links).
href attribute - Short for Hypertext REFerence, use the href attribute to indicate the
link's destination. You'll surround the link with double (" ") or single (' ') quotation marks.
<a href="https://vimeo.com/">Vimeo</a>
<ul>
<li><a href="https://www.twitch.tv/">Twitch</a></li>
<li><a href="https://www.youtube.com/">YouTube</a></li>
<li><a href="https://vimeo.com/">Vimeo</a></li>
</ul>
target attribute - An attribute that specifies where to open the linked web page. In the
value of the target attribute, you can add "_blank" or "_BLANK" (either casing works) to
tell the browser to open the page in a new tab or window.
<a href="https://vimeo.com/" target="_blank">Vimeo</a>
<p>The video hosting site <a href="https://vimeo.com/"

target="_blank">Vimeo</a> launched in 2004.</p>
Linking images - To link an image, wrap the <a> and </a> tags and around the <img>
tag.

8
<a href="https://www.instagram.com/" target="_blank">

<img
src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/up
loads/2021/12/5296765_camera_instagram_instagram-logo_icon-200px.png"
alt="Instagram logo">
</a>
Link accessibility tips
● Link words instead of URLs in your text

● Avoid linking words like "More info," "Click here," or "Here". Instead, provide context
like "Visit our FAQ."
● Use a non-color indicator, like underlines, for link text
Back to Top ↑
Lesson 6 - Structural & Semantic Tags
Structural tags - Tags that define and mark up the different parts of your website.
Common structural tags include <article>, <aside>, <div>, <footer>, <header>, <nav>
<main>, and <section>.
<div> - A tag that defines, bundles, and organizes content on a web page. You'll wrap the
opening and closing <div> tags around elements, like headers, images, lists, and
paragraphs, to group them together.
<div>
<h3>Largest Countries in Africa</h3>
<ol>
<li>Algeria</li>
<li>DR Congo</li>
<li>Sudan</li>
</ol>
</div>

9
<div>
<h3>Largest Countries in Asia</h3>
<ol>
<li>China</li>
<li>India</li>
<li>Kazakhstan</li>
</ol>
</div>
Nested elements - Elements contained inside another element, like the <li> tags
nested inside the <ol> and <ul> elements. Nested elements are also called child elements.
You can nest div elements inside other div elements to create and style sophisticated web
page layouts.
Semantic elements - Structural tags that describe the meaning and purpose of the
content, like <article>, <aside>, <footer>, <header>, <nav>, <main>, and <section>.
<header> - Tags to define the header of a site, which often contain the main site title,
navigation, logo, and introductory information. You'll add an opening <header> tag at the
start of the section and a closing </header> tag at the end of the section, with the header's
content nested inside.
<header>
<img
src="https://cdn1.iconfinder.com/data/icons/splash-of-fruit/128/fruiticons_
buttons_apple-100.png" alt="Hayley's Nutritional Coaching logo">
<h1>Hayley's Nutritional Coaching</h1>
<ul>
<li><a href="#services">Services</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</header>
<nav> - Tags to define the navigation area of a site, often containing an unordered list.
You'll nest the <ul> tags within a set of <nav> tags.

10
<header>
<img
src="https://cdn1.iconfinder.com/data/icons/splash-of-fruit/128/fruiticons_
buttons_apple-100.png" alt="Hayley's Nutritional Coaching logo">
<h1>Hayley's Nutritional Coaching</h1>
<nav>
<ul>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
</header>
<main> - Tags that wrap content that's specific to that page, like information about the
site and articles. You'll only use one set of <main> tags per page.
<main>
<h2>Here to Support Your Healthy Living</h2>
<h3>Do you need a coach?</h3>
<p>If you have nutritional questions or concerns, I'm here to help!
Trust your health and well-being to a professional who can set up the right
plan for you.</p>
</main>
<article> - Tags to specify self-contained content that can be read on its own, like a blog
post, news article, or comment.
<main>
<h2>Here to Support Your Healthy Living</h2>
<article>
<h3>Do you need a coach?</h3>
<p>If you have nutritional questions or concerns, I'm here to help!
Trust your health and well-being to a professional who can set up the right
plan for you.</p>
</article>
</main>

11
<aside> - Tags to indicate content separate from the main content, like a definition,
bibliography, quote, or other supplementary information. You'll often find asides
positioned as sidebars (i.e., content placed to the right or left on a page).
<aside>
<h4>About Hayley</h4>
<p>Hayley is a Registered Dietitian Nutritionist with 25 years
experience working with clients.</p>
</aside>
<footer> - Tags to indicate the footer of the site. The footer may include author
information, contact details, copyright dates, and important links.
<footer>
<p>Get in contact! Phone 555-321-5555 or email at
hayleycoaching@email.com.</p>
</footer>
<section> - A generic tag that defines standalone sections of a web page. Use when more
specific tags, like <article> or <aside>, don't apply. A section will generally have at least
one heading.
<h2>What's part of the program?</h2>

<section>
<h3>1. Kickoff Chat</h3>
<p>Let's talk about your goals and make a plan.</p>
</section>
<section>
<h3>2. Nutrition Training</h3>
<p>You'll get resources and training so you know EXACTLY what to
do.</p>
</section>
<section>
<h3>3. Follow-Up</h3>
<p>Let's look at your progress to figure out your win's and what you
still need to work on.</p>
</section>

12
Back to Top ↑
Lesson 7 - Introducing CSS
CSS - Stands for Cascading Style Sheets. A document linked to your HTML that styles how
HTML elements are displayed on the screen, like color, layout, and size.
CSS block - Consists of a selector and curly braces with property names and property
values nested inside.
Selector - The HTML element you want to style, like a paragraph (p) or heading (h1). You’ll
add curly braces after the selector to wrap around your styles.
Property - AKA property name. The property determines what style to apply to the
element, like font-size or color.
Value - How the property is styled. Add a semicolon (;) after the value.
p {
color: red;
}
font-family - Property that sets the text font. If the font is more than one word, add
single or double quotation marks around the font name. You can use uppercase or
lowercase letters in the font name.
p {
font-family: "courier new";
}
Add more than one value by separating each font with a comma. The browser will prioritize

13
the first font. If that font doesn't render, the browser will attempt to render the next font in
the value. You can also include a generic font family name (e.g., serif, sans-serif,
monospace, or cursive) as a value.
p {
font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif;
}
font-size - Property to control the size of the font. Common values for this property
include px, em, and vw.
p {
font-size: 25px;
}
color property - Property to adjust the color of text. Use a color name or hexadecimal
value (AKA hex value) to change the color. Use uppercase or lowercase letters in the color
name or hex value.
h1 {
color: FireBrick;
}
p {
color: #DB7093;
}
text-align - Property that determines the alignment of text. The default text-align value
is left. The property accepts values like left, right, center, and justify. The justify
value adds space between words to create a clean edge on the right and left sides of the
block of text.
p {
text-align: right;
}

14
font-style - Property that will change your text to italics. The default value is normal.
p {
font-style: italic;
}
font-weight - Property that will adjust the thickness of characters. You can use values
like lighter, normal, bold, and bolder. Or, use numbers from 100 (light) to 900 (extra
bold).
h1 {
font-weight: bold;
}
p {
font-weight: 400;
}
text-transform - Property to make text appear in uppercase, lowercase, or capitalized

(i.e., the first letter of each word is uppercase). The property accepts values like uppercase,
lowercase, capitalize, and none.
p {
text-transform: lowercase;
}
font-variant - Property to change the text into small uppercase letters using the
small-caps value.
p {
font-variant: small-caps;
}
text-decoration - Property to add lines over, under, and through text. The property

15
accepts values like overline, underline, and line-through.
p {
text-decoration: line-through;
}
line-height - Property to add spacing above and below lines of text. The amount of
line-height is proportional to the font size, meaning large-sized text will have more default
line height than small-sized text. Elements like paragraphs and headings will, by default,
have space above and below the lines of text (even if you don't have the line-height
property in your CSS).
The property accepts values like px, em, numbers, and percentages.
p {
line-height: 30px;
}
h1 {
line-height: 10px;
}
word-spacing - Property to add or subtract spacing between words. Use positive values
to add spacing and negative values to subtract spacing. The property accepts values like px,
em, numbers, and percentages.
p {
word-spacing: 20px;
}
h2 {
word-spacing: -5px;
}
text-indent - Property to indent the first word in an element automatically. Use px, em,
or percents for the values.

16
p {
text-indent: 25px;
}
Back to Top ↑
Lesson 8 - Web Fonts
Web safe fonts - Preinstalled fonts in browsers and operating systems.
Google Fonts - Font hosting service that provides free fonts to link to in your HTML code
or download and install on your computer.
To find and add a font to your web page:

1. Go to Google Fonts.
2. Search for a specific font or browse a list of fonts by category.
3. On the Styles page, pick one or more styles by clicking the "+" link.
4. Click on the "View Selected Families" button in the upper-right corner.
5. Copy all the links in the "Use on the web" section.
6. Paste links in the <head> section of your HTML document.
7. Add the font-family and values generated by Google Fonts to your CSS selector.
Serif fonts - The letters have little "feet" or "tails" that extend off the letters. Serif fonts
work great for formal, traditional sites. The little feet make it easier to read, so serif fonts
are great for blocks of text. Use the serif generic font family as a fallback font.
Sans serif fonts - The letters are made of simple lines and without (i.e., sans) the little
"feet" or "tails." Sans serif letters are seen as more slick and modern than serif letters, so
you'll often find them on tech sites. Sans serif fonts are also commonly used in headings.
Use the sans-serif generic font family as a fallback font.
Display fonts - AKA "decorative" fonts, have a strong, artistic personality. Use display

17
fonts sparingly as they can be difficult to read. Display/decorative fonts are generally better
for short amounts of large-sized text like headings. Use the cursive generic font family as a
fallback font.
Handwriting fonts - AKA "script" fonts, have a handwritten styling. Like the
display/decorative fonts, handwriting/script fonts are great for a headline or short bits of
text but can be difficult to read in large blocks. Use the display generic font family as a
fallback font.
Monospace fonts - A font with letters at a fixed width, meaning each letter takes up an
equal amount of space. Use monospace to give your text a computer, techy look. Use the
monospace generic font family as a fallback font.
<head> - A section near the top of your code that contains information that browsers and
web servers need to render your site, like meta tags (Lesson 14) and links to style sheets,
JavaScript files, and Google Fonts.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap"
rel="stylesheet">
</head>
<body> - The element that contains the site's contents that will render on the page, like
headings, paragraphs, images, lists, and structural elements.
<body>
<h1>Welcome to My Site</h1>
<p>Hi, I'm so excited you made it here!</p>
<footer>Copyright 202X.</footer>
</body>

18
Generic font families - Generic families include serif, sans-serif, monospace, and
cursive (used for handwriting/script or display/decorative fonts). These font families are
often used as a fallback in the font-family property in case the previous fonts don't
render.
h1 {
font-family: 'Rubik', sans-serif;
}
p {
font-family: 'Dancing Script', cursive;
}
Back to Top ↑
Lesson 9 - Backgrounds, Borders, & Colors—Oh My!
background - Property to add color to a background element using a color name, hex
value, or image.
aside {
background: LightPink;
}
footer {
background: #FFFACD;
}
border - Property to add a border to the edge of an element. In the value, add the width,
style, and color of the border. The style can have dotted, dashed, solid, double, groove,
and ridge values.
div {
border: 10px solid seagreen;
}
You can target specific sides of the border using the border-top, border-right,

19
border-bottom, and border-left properties.
aside {
border-top: 15px dotted cornflowerblue;
border-right: 5px dashed tomato;
border-bottom: 10px double #4E7D85;
border-left: 8px solid orchid;
}
border-radius - Property to round the corners of a border
aside {
border: 10px solid seagreen;
border-radius: 20px;
}
Contrast - The difference in luminance or brightness between two elements. Sufficient

contrast makes it easier to read the text and view the elements on the page.
To meet the AA level, you'll want at least 4.5:1 ratio for normal text and 3:1 ratio for large
text. To meet a AAA level, 7:1 ratio for normal text and 4.5:1 ratio for large text. Large text is
24px with a normal font-weight, or about 18.66px with a bold font-weight. The AAA level is
the best contrast rating, so aim to satisfy the AAA level when you can.
Popular contrast checkers include WebAIM Contrast Checker and Color.review.
Relative URLs - A file path that says where the file is in relation to the file you're writing
code in.
body {
background: url('img/nutritional-coaching-background.jpeg');
}
<img src=".../img/cat-paw.png" alt="cat paw with pink and black toes pads">

20
Absolute URLs - A specific path to a file on another website or server.
body {
background:
url('https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?cs=
srgb&dl=pexels-simon-berger-1323550.jpg&fm=jpg');
}
<img
src="https://images.pexels.com/photos/909916/pexels-photo-909916.jpeg?auto=
compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="cat paw with pink and black
toes pads">
repeat - A value to repeat multiple copies of an image to fill the container.
body {
background:
url('https://cdn4.iconfinder.com/data/icons/twitter-29/512/166_Heart_Love_L
ike_Twitter-48.png') repeat #FEF0F0;
}
no-repeat - A value to display only a single image in the container. By default, images will
display in the upper left corner of the container.
body {
background:
url('https://cdn4.iconfinder.com/data/icons/twitter-29/512/166_Heart_Love_L
ike_Twitter-48.png') no-repeat #FEF0F0;
}
Fallback color - Color that will appear if your image doesn't load or if the image has
transparency. Add the fallback color to the end of the background property's value.

21
body {
background:
url("https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?cs=
srgb&dl=pexels-simon-berger-1323550.jpg&fm=jpg") repeat #e1efe1;
}
background-size - Property to set the width of the image. Use the cover value to
extend the image to the height and width of the container.
background-position - Property to position the image in the container. Use the center
value to center your image.
body {
background:
url("https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?cs=
srgb&dl=pexels-simon-berger-1323550.jpg&fm=jpg") repeat #e1efe1;
background-size: cover;
background-position: center;
}
Hero image - A large background image you often see in the head of a website.
Developers will use a hero image to draw the visitor's attention and entice them to
continue browsing the website.
CSS comments - Comment formatting in CSS that uses /* and */ to surround the
comment.
p {
text-align: center;
/* Add font-size property */
}
To use comments to deactivate code, wrap the code line(s) or code block(s) in the
comment.

22
aside {
background: #EEE8AA;
/* border-right: 2px solid #BDB76B; */
border-left: 2px solid #BDB76B;
}
/* aside {
background: #EEE8AA;
border-right: 2px solid #BDB76B;
border-left: 2px solid #BDB76B;
} */
Back to Top ↑
Lesson 10 - Dimensions & the Box Model
CSS Box Model - The term "box model" refers to the box that wraps around HTML
elements, including the content (e.g., text, links, images, lists), padding (i.e., space within the
element), border, and margin (i.e., space around the element).
width - Property to change the width of block and inline-block elements.
div {
width: 250px;

23
background: aqua;
}
height - Property to change the height of block and inline-block elements.
div {
height: 250px;
background: aqua;
}
When combining the width and height properties, the content could overflow the height
or width of the container. The easiest way to combat this overflowing text is to remove
either the height or width property and let the container resize to the content. Another
option is to use the overflow property with the hidden and scroll values.
overflow - Property that defines what should happen if the container overflows. The
default value, visible, will allow the text to overflow the container. The hidden value will
hide the overflowing text.
div {
width: 250px;
height: 250px;
background: aqua;
overflow: hidden;
}
The scroll value will add a horizontal or vertical scrollbar so the user can scroll and view
the text.
div {
width: 250px;
height: 250px;
background: aqua;
overflow: scroll;
}
You can also use the auto value (Lesson 13) with the overflow property when working with

24
child elements inside a parent element.
padding - Property to control the padding within an element. Use a single value to add
padding equally on all sides. Be careful not to confuse padding with line-height, which is
the space automatically added above and below elements like paragraphs and headings.
See MDN's Padding page for more details.
section {
background: #e3e3e3;
border: 10px solid darkslateblue;
padding: 40px;
}
You can target specific sides of the padding using the padding-top, padding-right,
padding-bottom, and padding-left properties.
section {
padding-top: 40px;
padding-right: 30px;
padding-bottom: 0px;
padding-left: 10px;
}
You can also use 4-value shorthand to add different padding values to each side, in
clockwise order (top, right, bottom, and left sides).
section {
padding: 40px 30px 0px 10px;
}
Use 2-value shorthand to add equal padding on the top and bottom sides and equal
padding on the right and left sides.

25
section {
padding: 50px 20px;
}
margin - Property to control the margin between elements. Use a single value to add
margin equally on all sides. See MDN's Margin page for more details.
section {
margin: 12px;
}
You can target specific sides of the margin using the margin-top, margin-right,
margin-bottom, and margin-left properties.
section {
margin-top: 10px;
margin-right: 30px;
margin-bottom: 0px;
margin-left: 5px;
}
You can also use 4-value shorthand to add different margin values to each side, in
clockwise order (top, right, bottom, and left sides).
section {
margin: 10px 30px 0px 5px;
}
Use 2-value shorthand to add equal margin on the top and bottom sides and equal margin

26
on the right and left sides.
section {
padding: 15px 5px;
}
Card - A common design pattern that brings attention to chunks of information on a page,
like promoted products or employee biographies.
Universal selector (*) - Selects all elements at the same time.
outline - Adds an outline around the element that doesn't add to the width or height of
the elements. Great for debugging and visualizing the margin and padding of an element.
* {
outline: 3px dotted Red;
}
Back to Top ↑
Lesson 11 - Classes & IDs
Classes - A class is added to a group of elements that are styled the same. A class consists
of a CSS selector and a matching attribute you add to an opening HTML tag. In the CSS, a
class starts with a period (.). In the HTML, add the class attribute, an equal sign (=), and the
class name in quotation marks (no period).
.important-info {
background: yellow;
border: 6px solid DarkGreen;
}

27
<p class="important-info">Appointments are highly recommended.</p>
You can add the same class to more than one element (even elements of different types).
Add two or more classes to an element by separating the class names with a space.
.important-info {
background: yellow;
border: 6px solid DarkGreen;
}
.appointments {
font-size: 35px;
font-weight: bold;
}
<p class="important-info appointments">Appointments are highly

recommended.</p>
Ids - An ID is a singular identifier for one HTML tag on a page. Unlike classes, an HTML tag
can only have one ID. For styling, an ID consists of a selector in the CSS and a matching
attribute in an opening HTML tag. To create an ID in your CSS, you'll start with a pound
sign/hashtag (#) followed by the ID name. In the HTML, add the ID attribute to an opening
HTML tag. Surround the ID name with quotation marks (no #).
#new-promotion {
font-size: 18px;
font-weight: bold;
color: magenta;
}
<li id="new-promotion">New! Express Haircut (30 min or less)</li>
An ID can only style one element on the page. However, you can have an ID and one or
more classes in the opening tag of an element.

28
<li id="new-promotion" class="advertisement">New! Express Haircut (30 min
or less)</li>
Classes vs. IDs - For most styling needs, you'll use classes.
Classes IDs
CSS syntax .class-name #id-name
HTML syntax class="class-name" id="id-name"
Styling Style multiple elements Style only one element
HTML attributes Multiple class attributes per Only one ID attribute per
tag tag
Summary Use classes when you want Use IDs for unique elements
to style multiple elements that only appear once per
or apply multiple classes to page. Also, use IDs to create
an element. links to specific elements.
Class & ID naming tips - The names you select for classes and IDs need to identify
their purpose and be future-proof and flexible if the properties and values change.
● Don't start with a number

● No blank spaces (use dashes (-) or underscores (_) between words)
● Stick with lowercase letters
● Describe the purpose
IDs for navigation - Use IDs to create an internal link to specific elements on the page.
Start with a destination ID to tell the browser where you want the link to go. The
destination ID should start with a # sign.
<nav>
<ul>
<li><a href="#locations">Locations</a></li>

29
<li><a href="#products">Products</a></li>
</ul>
</nav>
Add the anchor ID to the place you want to take the user to, like a section or image.
<section id="locations">
<h2>Locations</h2>
<p>Check out our salons in Virginia Beach and Norfolk.</p>
<p>Appointments are highly recommended.</p>
</section>
list-style - Property to change a list item's default marker (i.e., bullet point). Use with a
none value to remove the marker altogether. Combine with the padding property to adjust
the spacing before each list item.
nav ul {
list-style: none;
padding: 0;
}
You can change the default marker from a disc to a circle or square for unordered lists.
.list__one {
list-style: circle;
}
.list__two {
list-style: square;
}
Change the default numbers (e.g., 1., 2.) to numerals or alpha (letters) for ordered lists.
.list__three {
list-style: upper-roman;
}
.list__four {
list-style: upper-alpha;

30
}
display property - Property that determines how an element renders. The inline value
will place a block element on the same line as other elements. The block value will place
block and inline elements on different lines and allow you to style the width, height,
padding, and margin. Use the inline-block value to place the element on the same line as
the other elements and style them like a block element (e.g., change the width, height,
padding, and margins).
nav ul li {
display: inline-block;
margin-right: 20px;
}
p {
display: inline;
}
img {
display: block;
}
inline-block - Value with characteristics of both inline and block elements. For instance,
the element will start on the same line as other elements, and you can apply changes to the
width, height, and padding.
.flower {
display: inline-block;
}
Grouping CSS selectors - Group CSS selectors together if applying the same styles.
Separate the selectors with a comma (,).
h1,
p {
font-family: sans-serif;

31
}
Back to Top ↑
Lesson 12 - Layouts & Floats
Common page layouts - Page layouts you'll often find developers use to display the
page's content.
Common Page Layouts
1-column 2-column 3-column
Gridded Masonry
Layout techniques - There are multiple ways to create page layouts. The most common
are floats (beginner technique), Flexbox (intermediate technique), and CSS Grid (advanced
technique).
float - A property to position elements in a container. Use the left and right values to
float an element to the left and right inside the container.
main {
background: #6cd092;
height: 200px;
width: 200px;
float: left;

32
}
aside {
height: 200px;
width: 200px;
float: right;
}
Use the inherit value to apply the float value of the parent element to the child elements.
div {
text-align: center;
width: 400px;
height: 500px;
float: left;
}
main {
height: 200px;
width: 200px;
float: inherit;
}
aside {
height: 200px;
width: 200px;
float: inherit;
}
When elements float inside a parent container, you may need to adjust the width or height
of an element to make it fit inside the parent container. For example, adding margin,
padding, or border to an element will expand the box size. To keep the expanded element
inside its parent container, you can subtract the additional margin, padding, or border from
one or more child elements. You can also use the box-sizing property (Lesson 13) with the
border-box value to automatically adjust the size of the container when adding padding
and border.
Back to Top ↑

33
Lesson 13 - Document Flow & Floating Tricks
Document flow - The system that dictates the arrangement and position of HTML
elements on the page (AKA the document). With the default document flow, inline elements
stay inline. Block elements stack on top of one another, align to the left side of the
container, and appear in the order they're written in the HTML (i.e., the first element in the
HTML appears first, followed by the second element, etc.).
clear - A property to control the flow of elements in the document and tell an element to
clear other elements. Use the both value to clear elements floated on the left and right.
footer {
background: #ffc999;
clear: both;
}
auto value - A value of the overflow property (Lesson 10) that directs the browser to
figure out how much background to add to the parent container based on the size of the
child elements. The browser will automatically compensate for any size differences to keep
content in the container.
.parent-container {
background: #ebebeb;
border: 5px solid black;
width: 400px;
overflow: auto;
}
box-sizing - A property that determines how the width and height of elements are
calculated. Use the box-sizing property with the border-box value to automatically
subtract the border and padding from the width and height set.
aside {

34
background: #80b4d1;
height: 200px;
width: 200px;
border: 5px dotted darkblue;
padding: 10px;
box-sizing: border-box;
}
Back to Top ↑
Lesson 14 - HTML & CSS Best Practices
Best practices - Agreed upon rules that help you write code in a way that will meet the
standards and expectations of other developers.
Some HTML best practices include:

● Neat & tidy code
● Good syntax
● Comments for major sections
● Validated HTML
Some CSS best practices include:

● Neat, tidy & readable
● Well-organized CSS
● Comments for global styles & major sections
● Validated CSS
See the HTML & CSS Best Practices Checklist for a complete list of best practices.
Global styles - Default styles for your elements.
Meta tags - Tags that tell search engines what kind of content is on your website. Meta
tags are found in the head section of a site. For valid HTML, you'll need at least the
<!doctype html>, <html lang="en">, and <title> tags. The metadata tag (<meta>) and
<link> tag are other meta tags commonly found on websites.

35
Back to Top ↑
Lesson 15 - Get Ready to Code a Website!
Design comp - Short for design comprehensive. A premade mock-up of a website's

layout and visual elements.
<meta> - A tag that defines the metadata (i.e., information about data) about the site. Use
the <meta> tag with the charset attribute to define the character set used on a website.
<meta charset="utf-8">
<link> - A tag that defines how the current document links to an external source. The rel
attribute, which is short for "relationship", defines how the current document is related to
the linked document, like a stylesheet.
<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/main.css">
<title> - A meta tag that defines the title of the web page.
<title>Gojo's Dojo</title>
Root - The first level of the parent folder that contains all the project files, folders, and
assets.
Back to Top ↑

36
Lesson 16 - Project: Rogue Pickings Part 1
<span> - An inline element that surrounds content for styling. The span element isn't
semantic, and its purpose is only for styling.
<p>Stop by your local <span>Lady Lakes Car Center</span> to see the newest
models and get the best prices.<p>
<h2><span id="greeting">Thank you</span> for shopping with us!</h2>
GitHub - GitHub is a website developers use to host code repositories, AKA "repos."
Hosting code on GitHub is a popular and easy way to store and share code.
Back to Top ↑
Lesson 17 - Project: Rogue Pickings Part 2
Style tile - A visual reference of the colors and typography to use when styling a website.
normalize.css - A CSS file created by Nicolas Gallager that helps smooth out common
browser differences and bugs to keep your styles looking good.
QA - AKA quality assurance, is when you review a website and code to validate and test to
ensure it's working as expected. Common QAing steps include validating your code,
checking for typos, and performing a cross-browser check. See the Review Your Website
Checklist for a list of QAing steps.
Back to Top ↑

37
Lesson 18 - Project: Jubilee Austen Part 1
mailto link - A link that uses the anchor tag and the mailto parameter to launch the
default email client on a computer automatically.
<p>Need help? <a href="mailto:squirrels@email.com">Email</a> us your

squirrel-related questions!</p>
Back to Top ↑
Lesson 19 - Project: Jubilee Austen Part 2
Developer tools - A set of web developer tools built into browsers so developers can
inspect and edit web pages within the browser. All modern browsers have developer tools.
Panels - Dedicated tools inside developer tools for viewing/editing HTML, checking site
performance, running JavaScript, and more. In Chrome DevTools, use the Elements and
Styles panels to view and edit HTML and CSS.
Chrome DevTools - The developer tools built into the Google Chrome browser.
Methods to Access DevTools
1. Method #1
a. Click on the Chrome menu ( ⋮ ) in the upper right of the browser.
b. Select the More Tools option, then Developer Tools.
2. Method #2
a. Right-click or Command-click on a web page.
b. Select Inspect from the pop-up menu.
3. Method #3
a. Use the keyboard shortcut: Shift + Command + C on Mac or Shift + Control

38
+ C on Windows.
Change Dock Position of DevTools
You can change which side of the browser DevTools appears on. When working with sites
designed for desktops, change the DevTools docking to the bottom of the browser window:
1. Click the docking menu (⋮) in the upper right of DevTools.
2. Choose the "Dock to bottom" option.
DevTools Elements & Styles Panels
Back to Top ↑

39
Bonus 1 - Add Pages to Your Website
Add new pages - To expand your site from one page to two or more, you'll need to:
1. Create a new directory/folder for your new page in the root of your project.
2. Add a new index.html file inside the new folder.
3. On the home page, expand the site navigation:
a. The name and link to the new page(s) in their directories: <li><a
href="projects/index.html">Projects</a></li>.
b. Add a Home link using a # as the link: <li><a href="#">Home</a></li>.
4. Copy the home page's content and paste it into the index.html file you created for
the new page.
5. Update the <head> section:
a. Change stylesheet links to go up a level to the css folder in the root: <link
rel="stylesheet" href="../css/main.css">.
b. Update the <title> tag. The title should be unique for each page of the site.
6. Update the navigation:
a. The new page's link sends visitors to the top of the page: <li><a
href="#">Projects</a></li>.
b. The Home link goes to the home page in the root directory: <li><a
href="../index.html">Home</a></li>.
c. All other links go to their correct page or destination. If the link is to a
destination ID, add the ID name after the file name: <li><a
href="../index.html#about">About</a></li>.
7. Update unique content for the page, including headings, paragraphs, links, and
images. Generally, the footer and header will stay the same from page to page.
8. Style the site as needed. You should be able to reuse some styling for your new
page, like global styles. However, you may need to make new classes and IDs to
target elements specific to this page.
Back to Top ↑

40
Bonus 2 - Recipe Card
vertical-align - A property that sets the vertical alignment of elements that are styled
with the display property value of inline or inline-block. Use the property to make an
element, like an image or paragraph, vertically align to the top, middle, or bottom of the
parent element:
.top {
vertical-align: top;
}
.middle {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
Back to Top ↑
Bonus 3 - Vision Board
Boilerplate - Code that is often repeated and unchanged from project to project. An
HTML boilerplate generally includes the basic meta tags (i.e., <!doctype html>, <html
lang="en">, <meta charset="utf-8">), and structural elements (i.e., <head> and <body>).
Back to Top ↑

The Ultimate HTML &amp; CSS Study Guide

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

The Ultimate HTML &amp; CSS Study Guide

Caricato da

Copyright:

Formati disponibili

1