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

Tag Name
<head> Head (all meta information goes here)
<body> Body (all content goes here)
<h1>, <h2>, ... ,<h6> Header 1, Header 2, etc
<p> Paragraph
<a> Anchor (for links)
<div> Division

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

Made with Slides.com