Basics of CSS

Cascading Style Sheets

CSS is a style sheet language used for describing the presentation semantics of a document written in a markup language.

How to Use ?

Link Tag
<head> <link rel="stylesheet" htref="theme.css"> </head>
Inline Styling
<p style='color: orange; font-size: 14px'> text </p>
Style Tag
<style type="text/css"> 
p {
  color: orange; 
  font-size: 14px
  }
</style>

Syntax

Selectors

  • Elemento: h1 {....}
  • Class: .class {....}
  • Id: #class {....}
  • Attribute: input[type='radio'] {....}
  • Universal: * {....}
  • Other: new from CSS3

Selectors Specificity

Who is winner ?

Declaration

Box Model

.container {
  width: 50px;
  padding: 0 10px;
  border: 1px solid #333;
  margin: 0;
}

view it in 3d

Inline vs Block Elements

  • h1, p, div
  • span, a
  • change by display: inline, block, inline-block

Position

  • Static
  • Fixed
  • Relative
  • Absolute

Static

Relative

Fixed

Absolute

Float

The floated elements will be taken out of the normal flow of the document.

Browser Compatibility

Best Practices

  • No inline css style
  • Don't repeat your self
  • Start with a Framework
  • Compress and Unify your CSS
  • Check browser compatibility all the time
  • Using firebug to debug
  • You need a designer