Style Sheets

Revisited



Anup Bishnoi

anup.bishnoi@nagarro.com

CC and S are actually just normal text with text-shadow on.S

If you know how to use it

Or google when you don't

Resources


Topics


  • Language
  • Layout
  • CSS3
  • Pre-processors
  • Best Practices

Language

Selectors


 


  There's this text.



  And then there's this.

                

Don't use # (id) selectors,
Always use . (class) selectors.




Big text
Blue text
Big, Blue text.
And centered too!

Multiple classes on one element.




Item outside.
Item one level inside.
Item two levels inside.

Child selector: .a > .b




Item outside.
Item one level inside.
Item two levels inside.

Descendant selector: .a .b




Normal div element
With some attribute value
With the specific attribute
Contains attribute value
in space-separated form

Attribute Selector: .a[attribute=value]




  • First and Red
  • Even
  • Blue and Third
  • Big and Even

Pseudo Selectors:
:nth-child, :nth-of-type, :hover, etc.




  • First
  • Second
  • Third
  • Fourth (and last)

Sibling selector: .a + .b

When you're fighting Internet Explorer (< 9)

Colors




steelblue
# 46 82 B4
rgb(70, 130, 180)
rgb(27%, 51%, 71%)

#8CF translates to #88CCFF




steelblue
rgb(70, 130, 180)
rgba(70, 130, 180, 0.5)

Opacity of an element ≠
Translucence of its background

Specificity




This is fine.
But what color would this be? And this?

#unique-id greater than
div.class-name greater than
.class-name

Cascade




Red or Blue?
Blue or Red?
Definitely Red

Order of assignment is important,
not usage.
Avoid !important at all costs.

Pseudo Elements




I want to play for No. 21.
We don't have enough cash for that.
Then I want another drink.

Only text content allowed.

Units




2rem -> 2rem = 2rem
2em (1em ~ 16px)
200% (1em = 100%)
2em -> 2em = 4em

Prefer rem ("root em"), relative to root.

Available everywhere except   I E   8..

Layout

Display Type




Some text on one line,
and some more right after.

Text in div,
doesn't keep on the same line.

Hey! This div
is weird!

And look at this span, it broke!

block makes a box,
inline runs like text.

Hide things




This won't show.
This hides right under your nose.

display: none removes from layout,

visibility: hidden
renders only dimensions,

opacity: 0 just makes it transparent.

z-index




cape
superman
tights

Default stacking order is
order of appearance in HTML.




cape
superman
tights

Each z-index creates
a new stacking context

Default Box Model




Box with 100% width takes more than 100%

width means width of content,
padding, margin, border excluded.

It was never right.

The Right Box Model




Now, width calculation includes padding & border

Available in all browsers today.

Vertical Margins




Banana


Adjacent vertical margins collapse
and leave only the larger one.




Banana


Unless you set padding or border

position: relative




Einstein a bit down and left out.
Einstein right
where he belongs.
Einstein can't fall.

Setting position: relative moves
element relative to its normal position.

position: absolute




Newton matches Einstein.
Newton back to start.
Newton goes all the way down.

absolute moves element relative to
the closest ancestor with position.

Float



normal
left
right
stacked
another
normal

Better use a library for clearing floats.

CSS3

Translate




default
left
translateX
translate
translate3d

translate3d() ensures hardware acceleration.

Rotate




rotateZ() is the same as rotate()

Skew




Whatever is not specified in transform,
takes the default value 0.

Perspective




-webkit-perspective needs to
be set on an outer element

Transitions




Try setting rotateY() on the hut directly.

You can put the transition on all as well.

It's a bird, it's a plane...




preserve-3d becomes important
when actually dealing with 3d.

Animations




Any number of animations can be run
simultaneously on an element.

CC and S are actually just normal text with text-shadow on.S

Now you know why.

Pre-processors

LESS CSS

Write LESS CSS

Only adds features on top of regular CSS.

Best Practices

  • Never use ID selectors. Classes all the way.
  • Avoid attaching classes to element type selectors.
  • Avoid !important.
  • Always use vendor prefixes.
    Put plain property last.
  • Provide for a fallback experience.
  • Use CSS Lint

THE END