blue

View the Project on GitHub PennSpark/blue

2.2 CSS

What is HTML/CSS?

[toc]

Our First CSS Code

h1, h2, h3, h4, h5, h6 {
    font-family: sans-serif;
    text-align: center;
}

TO-DO

  • Create a new file in your code editor
  • Copy and paste the code above into your file
  • Save the file into your folder as style.css

Linking your CSS page to your HTML page

<html>
  <head>
    <title>Your Title Here</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h2>All your content is here~!</h2>
  </body>
</html>

TO-DO

  • Link your style.css page to your index.html page

Selectors

p {
    color: blue;
}
.dogs {
    text-align: center;
}
#goldenDog {
    background-color: yellow;
}
* {
    color: black;
}

Styling your Page – Colors!

Properties
Values
Putting it Together
body {
    background-color: #edcee6;
}

TO-DO

  • Modify the colors on your page as you see appropriate!

Styling your Page – Backgrounds!

(1) Background Color
(2) Background Image
(3) Background Repeat
(4) Background Position
(5) Background Attachment
body {
    background-image: url("pikachu.jpg");
    background-position: center center;
    background-attachment: fixed;
}

Styling your Page – Borders, Margins, and Padding!

Borders

(1) Border Style
(2) Border Width
(3) Border Color
div {

    border-style: dashed;

    border-width: 2px;

    border-color: green;

}

Margins

(1) Defining Margin Size
div {
    margin: 10px;
}

Padding

(1) Defining Padding Size
div {
    padding: 10px 15px 20px 25px;
}

Styling your Page – Fonts!

(1) Font Size
(2) Font Type

css-03

Including @import url('https://fonts.googleapis.com/css2?family=**Work+Sans**&display=swap'); in your style.css sheet allows you to use the “Work Sans” font!

TO-DO

  • Add a custom font to your page!

Styling your Page – Images!

(1) Manual Sizing
(2) Fitting your Image to an Element

Next Steps