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

Style in html tag

Inline

In <style> tag inside <head> tag

Internal

Link to a .css file

External

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

CSS