Skip to content

RoniJupiter/sdai-ic-d4-1-css-basics

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 

Repository files navigation

Basics of CSS Styling

Watch as your instructor demonstrates a few things that you'll practice right after the demo.

Forking Repositories

When you fork a repo, there is a box checked by default to only copy the main branch. You will want to uncheck this box so that you get all the branches you need.

If you forget to uncheck that box, you can still get access to the other branches you need. You'll need to follow the instructions from GitHub here, taking special note of step 5 when you reach it.

ToDo list ✅

Attention: When you complete a task, put an x in the middle of the brackets to mark it off your ToDo list.

Prepare Your Workspace

  1. First, stop any other Codespaces you have running to conserve core hours.

Create and Link a CSS File

  1. Create a new CSS file named styles.css and link it to your HTML file by adding the following within the <head> element:

    <link rel="stylesheet" href="styles.css">

    Now, your <head> element should look like this:

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Simple Web Page</title>
        <link rel="stylesheet" href="styles.css">
    </head>

Change Paragraph Text Color

  1. Change the color of all paragraph text to blue by adding the following CSS rule:

    p {
        color: blue;
    }

Set Background Color

  1. Set a background color for the entire page by adding the following CSS rule:

    body {
        background-color: lightgray;
    }

Adjust Heading Font Size

  1. Increase the font size of the most important heading (h1) to make it more prominent by adding the following CSS rule:

    h1 {
        font-size: 24px;
    }

View Changes and Troubleshoot

  1. View the changes made to the webpage and troubleshoot any mistakes. Use GitHub Copilot for suggestions and corrections if needed.

That's it for the demo!

Now it's time to practice alongside your instructor as we all try coding in CSS together.

About

SDSU SDAI

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 100.0%