3DC CSS WORKSHOP

Main Trainer: Yustynn Panicker

CSS -> Power

Goals

1. Understand purpose of CSS

2. Strong core concepts of CSS

3. Ability to change how websites look on your computer

Don't Get Left Behind!

WORSKHOP STRUCTURE

• Introduction
• Web Session
  • How webpages work
  • Box model
  • Anatomy of HTML element
  • Anatomy of CSS rule
• CSS Session
  • Selectors
  • Text, background
  • Margin, padding, border
  • Flexbox
  • Media Queries
• Customize any website!

KEEP THIS CHAT PAGE OPEN

Password: cheehuei

use an anonymous name

DOWNLOAD THIS CHEATSHEET

DOWNLOAD THIS REPO...

...AND THIS REPO!

WEB SESSION

How Webpages Work

• Web Browser == File viewer
• Webpage: Collection of >= 1 files

Basic Webpage Files

Content

Presentation

Interactivity

HTML

CSS

JS

OPEN UP CHROME DEV TOOLS

1. Open Chrome

2. Go to google.com

3a) WINDOWS: Press CTRL+SHIFT+C

3b) MAC: Press CMD+SHIFT+C

Common HTML Tags

CSS Session

Selectors

<div class="classy" id="special-snowflake"></div>

TAG: div

CLASS: .classy

ID: #special-snowflake

It's all about

specificity

Analogy of You.

Your Tag : Human

Your  Class: Your race

Your ID: Your name

Look at the Cheatsheet

Number of IDs

Number of Classes

Number of Tags

div.hi.even-more-hi {
    background-color: orange;
}

div.hi {
    background-color: blue;
}

<div class="hi even-more-hi" id="hello"></div>

Which Gets Precedence?

HTML

CSS

div.hi.even-more-hi

<div class="hi even-more-hi" id="hello"></div>

id

class

tag

0

2

1

div.hi

id

class

tag

0

1

1

WINNER

div.hi.even-more-hi

div.hi.even-more-hi {
    background-color: orange;
}

#hello {
    background-color: blue;
}

<div class="hi even-more-hi" id="hello"></div>

Which Gets Precedence?

HTML

CSS

div.hi.even-more-hi

<div class="hi even-more-hi" id="hello"></div>

id

class

tag

0

2

1

#hello

id

class

tag

1

0

0

#hello

WINNER

.hi p {
    color: orange;
}

div p {
    color: blue;
}

<div class="hi even-more-hi" id="hello">
    <p id="super-important-text">Filler!</p>
</div>

Which Gets Precedence?

HTML

CSS

.hi p

WINNER

.hi p

id

class

tag

0

1

1

div p

id

class

tag

0

0

2

<div class="hi even-more-hi" id="hello">
    <p id="super-important-text">Filler!</p>
</div>

div.hi.even-more-hi p {
    color: orange;
}

p#super-important-text {
    color: blue;
}

<div class="hi even-more-hi" id="hello">
    <p id="super-important-text">Filler!</p>
</div>

Which Gets Precedence?

HTML

CSS

div.hi.even-more-hi p

id

class

tag

0

2

2

p#super-important-text

id

class

tag

1

0

1

<div class="hi even-more-hi" id="hello">
    <p id="super-important-text">Filler!</p>
</div>

p#super-important-text

WINNER

Text and Background

Margin, Padding, Border

Flexbox

Media Queries

Customize any website!

Ending Thoughts

Don't Stop Here

codecademy.com (free)

codeschool.com (paid)

yustynn_panicker@mymail.sutd.edu.sg

End

End

end