Lecture No. 5 - CSS3

Prepared by: Engelbert Paul O Dela Cruz

Introduction to CSS3

CSS (Cascading Style Sheets) was created to separate content from presentation and ensure a consistent design across multiple webpages.

      CSS1 published in 1996
CSS2 in 1998
CSS3 is modular and backward compatible with CSS 2.1

    

Why CSS?

HTML was never meant for styling. The <font> tag made pages hard to manage. CSS solves that.

CSS Syntax

A CSS rule-set includes a selector and a declaration block:

selector {
  property: value;
}

Selectors

Element: p { color: red; }
ID: #para1 { color: red; }
Class: .center { color: red; }
Grouped: h1, h2, p { color: red; }

Comments

/* This is a comment */

Ways to Insert CSS

External: <link rel="stylesheet" href="style.css">
Internal: inside <style> in <head>
Inline: <h1 style="color: blue;">

Cascading Order

Inline Styles
Internal Styles
External Styles
User Settings
Browser Defaults

CSS Colors

Ways to specify color:

Name: red
HEX: #ff0000
RGB: rgb(255, 0, 0)
RGBA: rgba(255, 0, 0, 0.5)
HSL/HSLA: hsl(0, 100%, 50%)

Backgrounds

body {
  background: #fff url("img_tree.png") no-repeat right top;
}

Borders

Style: dotted, dashed, solid, etc.
Width: thin, medium, thick
Color: name, hex, RGB

p {
  border: 2px solid red;
  border-radius: 5px;
}

Height and Width

Specify dimensions using px, %, cm, etc. max-width controls how wide an element can grow.