CSS

Cascading Style Sheets

One of the three languages of the web.

Making the web look nice

HTML defines the structure of our pages.

CSS defines their appearance.

Basic CSS

body {
  width: 40em;
  margin: 1in auto;
  background: #ffddff;
}

h1 {
  font-family: sans-serif;
}

p {
  font-size: 18px;
}

CSS is made up of rules

Each rule consists of a selector that chooses what elements the rule applies to and a body containing declarations that each name a property and assign it a value.

p {
  font-size: 18px;
}

p is the selector. This rule applies to all p elements.

font-size is a property.

18px is the value for the font-size property.

Measurements

`in`	inches
`cm`	centimeters
`em`	a typographical unit (the width of an “m”)
`px`	pixels on screen.

Several others.

Colors

`#ffddff`	Hex codes.
`rebeccapurple`	Names
`rgb(200, 192, 60)`	RGB values
`rgba(200, 192, 60, 0.5)`	RGB values with transparency

See MDN colors more info.

Vocabulary

CSS- Cascading Style sheets
rule- Describes how particular elements should be styled
selector- The part of the rule that selects the elements to which the rule applies
declarations- the body of the rule, conists of property/value pairs.
property- the name of the property that is being set by a rule
value- the value of a property being set by a rule

Today: Step 0

Open your Codespace

Today: Step 1

At the bottom left of the screen there’s an indicator that says projects/first-web.

Click on it and from the menu that pops up at the top of the screen choose main.

Today: Step 2

Now, right click on the start-project file and “Open in Integrated Terminal”.

Run ./start-project simple-web to create your next project.

Today: Step 3

Expand projects/simple-web in the file explorer and right click run and “Open in Integrated Terminal” and then run ./run. Possibly will need to kill some old terminals if you get an error about port 3000.

Today: Goal

Make a new web page similar to what you did in first-web but this time use CSS to make it look nice.

Try to figure out how to make some centered text or center an image.

A new tool

In your project there will be a file validate. Right click an “Open in Integrated Terminal” to get a terminal. Then type ./validate and hit return and it will validate all your HTML locally. Fix any problems it points out.