Web Basics : CSS

HTML PROVIDES

CONTENT HIERARCHY

TO DOCUMENTS AND

LINKS PAGES TO EACH OTHER

IS: Utilitarian

NOT: PRESENTATIONAL

SpaceJam

since 1996

The Design is bound to the html

HTML CRUFT

Same markup, different presentation

CSS Zen Garden

csszengarden.com

All heading 1 elements should be bold.

Therefore, no formatting markup such as bold tags (<b></b>) is needed within the content;

what is needed is simply semantic markup saying,

this text is a level 1 heading.

“

1996 vs 2014

cascading STYLE sheets

Just two concepts:

PROPERTIES

color

The text color will change

cascading STYLE sheets

Just two concepts:

PROPERTIES & ATTRIBUTES

color: green;

The text color will be green

cascading STYLE sheets

Each property expects specific attributes

color

green

red

#ff0000

salmon

border-width

10px

5rem



font-family

comic-sans

lobster

times new roman

height

10px

5rem

15%

 

cascading STYLE sheets

Certain properties let you declare multiple attributes at the same time

border-style: solid;
border-width: 1px;
border-color: black;
border: solid 1px black;

INLINE STYLING

Styles can be applied directly to elements

<p>Hello Fullstack</p>

<p style=" ">Hello Fullstack</p>

<p style="color:green; border: solid 1px black;">Hello Fullstack</p>

Inline styles are still crufty

cascading style SHEETS

CSS is best used when it's out of the way

<element>                 <p>Hello FullStack</p>
#id        <p id="fullstack">Hello FullStack</p>
.class     <p class="meetup">Hello FullStack</p>
p { color: green; }

#fullstack { color: green; }
.meetup { color: green; }

cascading style SHEETS

.meetup {

  color: green;

  border: solid 1px black;

}

Formatting

.meetup { color:green; border:solid 1px black; }

Hard to read:

Easy to read:

Keep it simple

  • Elements  ==   EVERYTHING
  • IDs             ==   Highlander Rule                                                     (There can be only 1)
  • Classes      ==  :)

use classes

WHERE

<Style> is not

maintainable

<link>

CASCADING style sheets

Attributes defined later override previous attributes

Can I Use?

Browser support for CSS properties

CSS Reference

Plain english overview of each property

RESOURCES et cetera

slides.com/azanebrain/fullstack-css

AJ Zane | @azanebrain

News and tips to get your CSS working how you want it

CSS Tricks

Techniques to target specific elements

Selector Reference

Different strategies for organizing your projects

SMACSS | BEM

A preprocessor that lets you add programatic logic to CSS

Sass

Normalize the base CSS across all browsers

Normalize.css

—— LABS ——

Fork this pen and work on the excersizes

Web Basics : CSS

FullStack Labs: CSS

By AJ Zane

Source: Michael Chan

FullStack Labs: CSS

CSS Presentation for part two of the Full Stack Labs "Web Basics" curriculum | fullstacktalks.com | @fullstacktalks

  • 2,258