Skip to content

Latest commit

 

History

History
120 lines (84 loc) · 2.45 KB

Day4.md

File metadata and controls

120 lines (84 loc) · 2.45 KB
Raw

Phase 2 of WebDev Summer camp!

Today we are adding CSS to our websites! Do you know what CSS stands for?

Open your website

  • Make sure your flash drive is plugged in
  • Open your File Explorer ( the yellow folder at the bottom corner )
  • Find the USB Drive drive on the left side
  • In your USB Drive, go into your website project folder
  • Double click the index.html file
  • In the web browser viewing your website Right Click anywhere on the page and then click Inspect. What do you see?

Open your website's HTML code

Open VS Code program. The icon looks like this:

image

If you're index.html is not already there, follow this:

  • In the top left corner, go to File -> Open Folder
  • Find your USB Drive on the left side of the exploroer
  • In there, find your website project folder
  • Once you find it, click the folder then 'Select Folder' to continue

The HTML structure of a website is similar to human.

  • Head
  • Body
  • Footer

Let's add <html> and <head> tags to your website!

  • In your index.html file, add the following:
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        ...
    </body>
</html>

Cool! Let's add a <title> tag

The <title> tag is very important! What is the title of your website?

  • In your <head> tag, add a <title> tag with the title of your website inside
  • After you add this, refresh your page....do you notice what changed?
<!DOCTYPE html>
<html>
    <head>
        <title>Your Website Title</title>
    </head>
    <body>
        ...
    </body>
</html>

Let's add CSS!

The <style> tag is awesome!

  • In your <head> tag, add a <style> tag. This is where we put our CSS
<!DOCTYPE html>
<html>
    <head>
        <title>Your Website Title</title>

        <style>

        </style>
    </head>
    <body>
        ...
    </body>
</html>

HTML Finale! Let's add styles!

With CSS, you can change anything about your website!

This is how CSS works:

  • Declare a 'selector'
  • Apply CSS styles to this 'selector'

This code means:

  • For all <p> tags...
    • Change color to red
    • Change font-size to 60px
<style>
p {
    color: red;
    font-size: 60px;
}
</style>