What's wrong with this?

<ul>
     <h2>Hello World</h2>
     <li>Item</li>
    <li>Item/li>
</ul>
                        

What's wrong with this?

<div>
    <h1>Title</h1>
    <p>
        Paragraph
    </div>
</p>                       

What's wrong with this?

                    
    
Page Title
                    
                        

What's wrong with this?

                    
    

    
Lorem ipsum dolor sit amet.
    

                    
                       

HTML Review

Terminology

• Element
  • A component of HTML
  • Paragraph, list, table, div, img
• Tag
  • Shows the beginning and end of a tag
  • Contains information about the tag's purpose

Containing Element

Empty Element

Attributes

Come after the initial tag declaration.

Typically a name value pair.

Changes how elements look or act.

Some tags have unique attributes.

Block Element

Block level elements always start a new line and span the full width of available space

    <div>
        <div>This is my first div</div>
            <div>
                This is my second div
            <p>
                Paragraphs are block elements too.
            </p>
        </div>
    </div>

Inline Elements

Inline elements do not start a new line.

    <p>
        <span>These</span>
        <strong>are </strong>
        <span>all</span>
        <em>in different inline</em>
        <span>elements</span>
    </p>

File Paths

Relative Paths

• "index.html" Looks for index.html in the current folder
• "pages/index.html" Starts in the current folder and looks inside the 'pages' folder
• "../pages/index.html" The '..' signifies is going to go back a director before looking for the pages folder
• "/pages/index.html" The '/' signifies that is going to start at the root of your URL.

Absolute Paths

• http://mysite.com/pages/index.html

A bit of new HTML info...

Sub and Sup

The subscript and superscript tags are used to move blocks of text half a character up or down a line

• Base Tag  & 
• Display type inline

    <p>
        This text contains a <sub>subscript</sub>.
        This text contains a <sup>superscript</sup>
    </p>
                                   

Additional Tags

• br
• blockquote
• code
• pre
• del & ins
• iframe

There are a ton more

We will cover more in future classes, but you can find them here.

Media content

The ID attribute

Use the ID attribute to be able to specifically target an element. IDs must be unique. You will get inconsistent results if there are multiple elements with the same ID.

    <div id="site-header">
        <h1 id="myTitle">My Title</h1>
    </div>

The Class attribute

The Class attribute is used to reference a class in a Style Sheet. You can also target an element by in JavaScript by its class.

    
Title 1
    
Desc 1


    
Title 2
    
Desc 2

What is CSS?

CSS stands for Cascading Style Sheet. CSS allows you to modify how your HTML is displayed without changing any HTML.

These two sites have the exact same HTML, but very different CSS. Site 1 and Site 2

How do we add CSS to HTML?

There are 3 primary ways.

• Putting CSS in an element's style attribute.
• Putting CSS in a style tag in our HTML
• Putting CSS in a .css file and referencing it in HTML.

The third method is the most desired approach.

Adding CSS

Syntax

property:value;

color:#000000;

text-align:left

The last rule in a group of rules does not have end with a semi-colon.

What does it look like in use?

        a {
            color: #aa0000;
            font-size: 20px;
            height: 25px;
            margin: 20px;
            padding: 20px;
        }
                        

How do we target elements with css?

Inline Styles

This is done with the style attribute.

    
Header

Don't do this.

    
Header

Your work only applies to one element and can't be reused.

How do we target an HTML element without using the style attribute?

Use a selector

A selector is a pattern used to target specific HTML elements

    h1 {
        color:red;
        text-align: center;
    }

CSS Selectors

CSS selectors vary in size length and complexity, but they are primarily based off of 3 core selector methods.

Tag selector

The tag selector simply uses the tag name to target an element. This is the most global way to set default styles

    h1 {
        color: red; /*All h1s will be red*/
    }
    span {text-decoration: underline;} /*All spans will be underlines*/

Class Selector

This is the most common method of targeting elements.

ID Selector

This is one of the most specific selectors.

Specificity

• tag rules overwrite the default browser styles.
• class rules overwrite the tag browser styles
• id rule overwrite everything except....
• rules rules marked with !important. More on that later

Example of specificity.

Text goes here

    h1 {color: blue;}
    .site-header {color: red;}
    #my-header {color: green;}

What color will the h1 be?

Green

Example of specificity.

Text goes here

    h1 {color: blue;}
    h1 {color: red !important}
    .site-header {color: orange;}
    #my-header {color: green;}

What color will the h1 be?

We'll cover CSS specificity in greater detail later.

Basic CSS Properties

CSS "data types"

There are a number of different types of values for CSS. These are some of the more common ones.

• Colors can be applied in several different ways
  • a valid color name "black"
  • an RGB value "rgb(0,0,0)"
  • a HEX value "#000000"
• Number values frequently need a unit with it.
  • px - Pixel. The most common
  • % - Percentage - based off the available space
  • em - EM is a value relative to the font-size of the element

    .class {
        font-size: 1.1em;
        margins: 20px;
        width: 75%;
    }

Basic CSS for Text

These are several properties that can be used to modify the look of our text we have created.

• color sets the text color of the elements targeted. It accepts only valid color values.
• text-align sets the text alignment.

  Primary valid values: left, right, center, and justify

• text-decoration decorates text content.

  Primary valid values: none, underline, line-through, and overline

See the Pen ITR - CSS - Text by Jon (@Middaugh) on CodePen.

Basic CSS specific to text characters

These CSS properties actually change the appearance of the characters in the font.

• font-family defines the specific font family for the text. It accepts a comma separated list of front names.
• font-size defines the size of your font. It accepts any numeric value (px, em, or %). The default value depends on the element.

    h1{
        font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
        font-size: 18px;
    }

Text CSS continued

• font-style Values: normal, italic, and oblique
• font-weight sets how thick or thin characters appear. Common values: normal and bold

    h1{
        font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
        font-size: 18px;
        font-style: italic;
        font-weight:bold;
    }

That's a lot to remember

Use a CSS cheat sheet to reference what values are available to specific properties.

CSS Comments

/*
Everything in here is a comment
*/
    
    
    

Practice your HTML by performing the following updates to the Pen.

• Wrap The text "Header Information" in an `h1` tag.
• Wrap the two "Sub Header" headings in an `h2` tag.
• Put each paragraph in its own paragraph tag.

Part 2 - New HTML

Add new html tags into our Pen.

• Wrap the "Sub" in the "Sub Header" with a `span` tag.
• Wrap "Sub Heading 1", "Paragraph 1", and "Paragraph 2" in a `div` tag.
• Wrap "Sub Heading 2", "Paragraph 3", and "Paragraph 4" in a `div` tag.

Part 3 - Attributes

Modify your html to include some IDs and Classes

• Add the ID of "header" to the `h1` tag.
• Add the class "main-point" to the first `div` tag.
• Add the class "follow-up" to the second `div` tag.

Part 4 - CSS

Add CSS in the CSS panel to apply the following rules.

• An element with the ID of "header" should have its text color be `#DC143C`
• All text in `span` tags should be underlined.
• All text inside of the element with the class 'main-point' should have the following font applied to it. `"Courier New", Courier, monospace`
• All text inside of an `h2` tag should be bold. Use CSS and not a `strong` tag to do this. Make the text in the h2 normal font weight

Expected Result

More practice

I've seen this site used in interviews

Extra HTML Practice: Create a Pen on codepen.io

Convert this document into HTML

It will need the following.

• Paragraph
• Hyperlink
• Heading 1
• Heading 2
• Heading 3
• Un-ordered list
• Ordered List
• List Item
• Strong