Presenter: Diana Ignat

CSS

The basics of styling the Web

• CSS = Cascading Style Sheets
• It's a language for describing the appearance of a web page 
• CSS works together with HTML: HTML is the content and structure, CSS is the style and look.

What is CSS?

• HTML alone looks plain and boring
• CSS controls:

               - colors and backgrounds

               - fonts and text styles

               - spacing and alignment

               - responsive design for different devices

               - animations and effects

Why is CSS important?

How CSS connects to HTML

Selector: h1

Properties: color, font-size

Values: green, 36px

CSS syntax explained

Structure of a rule

Example

• Element selector: p, h1
• Class selector: .menu
• ID selector: #header
• Grouping: h1,h1 { color: blue; }

Common selectors

Colors

- use names: red, blue

- or codes: HEX(#ff0000), RGB(rgb(255, 0, 0))

Colors and fonts

Fonts

- choose which font family to use

- adjust size and weight of text

Margin

- The space outside an element's border

- Created distance between elements

Spacing: Margin, border and padding

Padding

- The space inside an element's border

- Adds space between the content and the border

Border

-  The line surrounding the box

HTML without CSS vs With CSS