CSS (LOOKN GOOD) WHAT IS IT? h2 { font-family: helvetica; color: - - PowerPoint PPT Presentation

▶

Apr 05, 2024 260 likes •687 views

CSS (LOOKN GOOD) WHAT IS IT? h2 { font-family: helvetica; color: red; font-size: 12px; } SELECTOR VALUE h2 { font-family: helvetica; color: red; font-size: 12px; } PROPERTY THIS IS A HEADLINE THIS IS A HEADLINE WHAT ELSE CAN IT

SLIDE 1

CSS

(LOOK’N GOOD)

SLIDE 2

WHAT IS IT?

SLIDE 3

h2 { font-family: helvetica; color: red; font-size: 12px; }

SLIDE 4

h2 { font-family: helvetica; color: red; font-size: 12px; }

SELECTOR PROPERTY VALUE

SLIDE 5

THIS IS A HEADLINE

SLIDE 6

WHAT ELSE CAN IT DO?

SLIDE 7

WHAT ELSE CAN IT DO?

TYPOGRAPHY
COLOR
IMAGES
STRUCTURE/LAYOUT
COMPOSITION
ANIMATIONS
BASICALLY, ANYTHING VISUAL

SLIDE 8

CSSZENGARDEN

SLIDE 9

TYPE

font-family (Helvetica, Times, etc.) font-size color text-align (left, center, right) text-decoration (underline, none) text-style (italic, normal) font-weight (bold, normal)

SLIDE 10

LAYOUT

margin padding border width height

SLIDE 11

LAYOUT

WIDTH HEIGHT

Pork belly etsy beard fixie. Chillwave banh mi american apparel, trust fund bushwick skateboard viral. Wolf messenger bag twee, raw denim terry richardson forage selvage single-origin coffee. Food truck raw denim fixie pinterest chillwave mumblecore. American apparel photo booth truffaut pour-over high life pop-up.

MARGIN PADDING BORDER

SLIDE 12

LET’S TRY IT

SLIDE 13

MAKE ‘style.css’

SLIDE 14

STUFF THIS IN YOUR <HEAD>

SLIDE 15

h1 { font-family: helvetica; color: red; font-size: 12px; }

SLIDE 16

UNITS

(SIZE)

12px 15pt 1.2em 80%

SLIDE 17

UNITS

(COLOR)

blue #fa3c14 rgb(125,74,214) rgba(159,15,88,.7)

SLIDE 18

background: red;

BACKGROUNDS

background: url(../img/imagename.png);

SLIDE 19

Subtle Patterns

B O N U S !

SLIDE 20

ID’S AND CLASSES

(NAMIN’ NAMES)

SLIDE 21

HTML:

<h2 id=“subtitle”>TITLE</h2>

CSS:

#subtitle { ... }

SLIDE 22

CLASS

HTML:

<h2 class=“subtitle”>TITLE</h2>

CSS:

.subtitle { ... }

SLIDE 23

WHICH ELEMENTS CAN CLASSES AND IDS BE APPLIED TO?

SLIDE 24

ALL OF THEM

SLIDE 25

BUT WHAT ABOUT THE <HEADER> TAG?

SLIDE 26

WHAT DID I JUST SAY?!

SLIDE 27

ALL OF THEM

SLIDE 28

LET’S KEEP IT CLASSY

ID’S CLASSES

SLIDE 29

SELECTORS

p { ... } h1, h2, h3 { ... } div p { ... } * { ...} div * { ... } #idname { ... } .class { ... }

SELECTS ALL <p> TAGS SELECTS ALL <h1>, <h2>, and <h3> TAGS SELECTS ALL <p> TAGS INSIDE OF A <div> tag SELECTS ALL ELEMENTS SELECTS ALL ELEMENTS INSIDE ANY DIV SELCTS ANY ELEMENT WITH “idname” AS AN ID SELCTS ANY ELEMENT WITH “class” AS A CLASS

SLIDE 30

INHERITANCE

<section> <h2>Section Title</h2> <p>Important Information</p> <p>Important Information</p> </section>

SLIDE 31

ORDER OF PRECEDENCE

.blue { color: blue; } div { color: green; } <div class=“blue”>What AM I?!?!</div>

SLIDE 32

ORDER OF PRECEDENCE

1. NO. OF ID’S
2. NO. OF CLASSES
3. NO. OF ELEMENTS
4. ORDER OF APPEARANCE

SLIDE 33

ORDER OF PRECEDENCE

1. NO. OF ID’S

#container #sidebar ul { ... }

WILL BEAT

#container ul { ... }

SLIDE 34

ORDER OF PRECEDENCE

2. NO. OF CLASSES

.container .sidebar ul { ... }

WILL BEAT

.container ul { ... }

SLIDE 35

ORDER OF PRECEDENCE

3. NO. OF ELEMENTS

div p a { ... }

WILL BEAT

a { ... }

SLIDE 36

ORDER OF PRECEDENCE

0 0 0

IDS CLASSES ELEMENTS/PSEUDEO ELEMENTS NUMBER OF

SLIDE 37

ORDER OF PRECEDENCE

0 0 0

IDS CLASSES ELEMENTS/PSEUDEO ELEMENTS NUMBER OF

0 2 1 .container .sidebar ul { ... } 1 0 1 #container ul { ... }

SLIDE 38

ORDER OF PRECEDENCE

4. ORDER OF RULES

h3 { ... } (LINE 62)

WILL BEAT

h3 { ... } (LINE 17)

SLIDE 39

FIREBUG IS SOOOO HAWT.

B O N U S !

SLIDE 40

WHATEVER, THOM. IT STILL LOOKS LIKE A MARGINALLY PRETTIER LIST OF CONTENT.

SLIDE 41

THAT’S TRUE

SLIDE 42

THAT’S TRUE ...FOR NOW.