Skip to content

Latest commit

 

History

History
97 lines (85 loc) · 2.56 KB

css_basics1.md

File metadata and controls

97 lines (85 loc) · 2.56 KB
Raw

CSS

Introduction

CSS stands for Cascading Style Sheets. It is used to add styling and format to HTML. There are three ways to add styling: using inline CSS, adding an internal stylesheet, or adding an external stylesheet.

css

Inline CSS

<div style="color: green;">Bulbasaur</div>

The code above turns the word, Bulbasaur green.

Internal Stylesheet

<head>
  <style>
    body {
      width: 800px;
      background-color: rebeccapurple;
    }
  </style>
</head>

CSS Syntax

selector {
  property1: value1;
  property2: value2;
  property3: value3;
}

The basic format of CSS - you have a selector that picks an HTML element by tag name, id name, or class name.

  • To select for a tag, just write the tag name.
<div>hello world</div>
div {
  color: blue;
}
  • To select for an element with a particular id, precede the id name with a hashtag, #.
<div id="greeting">hello world</div>
#greeting {
  color: yellow;
}
  • To select for an element with a particular class, precede the class name with a period, .
<div class="stuy">stuyvesant</div>
.stuy {
  color: red;
}

Display: block vs inline

Block elements extend as far across the page as possible. A <div> is the standard block element.

Inline elements take up on the space they need. A <span> is the standard inline element.

Paste the code below to observe the difference between a div and a span.

<span style="background: rebeccapurple;">It was the best of times,</span>
<span style="background: rebeccapurple;">it was the worst of times,</span>
<div style="background: cornflowerblue;">it was the age of wisdom,</div>
<span style="background: rebeccapurple;">it was the age of foolishness,</span>
<span style="background: rebeccapurple;">it was the epoch of belief,</span>
<span style="background: rebeccapurple;">it was the epoch of incredulity,</span>
<div style="background: cornflowerblue;">it was the season of Light, </div>

Activity

  1. Find your favorite CSS color here.
  2. Split the list of CSS properties below with the person next to you and research what they do and what possible values are.
  • color
  • background-color
  • font-family
  • font-size
  • width
  • height
  • border-radius
  • text-align
  • text-decoration
  • font-weight

Resources