logo

CSS | CSS3 - Documentation and Code Snippets

CSS stands for Cascading StyleSheet. CSS3 is the modern edition of CSS. CSS is the style language of the modern web. It is the second pillar in the web technology after HTML.

The Syntax of the language is

selector {
    property: value;
    property2: value;
}
                

viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
                

CSS Selectors

Selector HTML Element
* All elements
div <div>
div * all elements within <div>
div span <span> within <div>
div, span <div> and <span>
div > span <span> with parent <div>
div + span <span> preceded by <div>
.class elements of class="class"
div.class <div> of class="class"
#itemid element with id="itemid"
div#itemid <div> with id="itemid"
a[attr] <a> with attribute "attr"
a[attr='x'] <a> when "attr" is "x"
a[class~='x'] <a> when class is a list containing 'x'

CSS Pseudo Selectors & Pseudo Classes

:first-child First child element
:first-line First line of element
:first-letter First letter of element
:hover Element with mouse over
:active Active element
:focus Element with focus
:link Unvisited links
:visited Visited links
:lang(var) Element with language "var"
:before Before element
:after After element

CSS Sizes

0 0 requires no unit
Relative Sizes
em 1em equal to font size of parent (same as 100%)
ex Height of lower case "x"
% Percentage
Absolute Sizes
px Pixels
cmCentimeters
mmMillimeters
inInches
pt1pt = 1/72in
pc1pc = 12pt

CSS Colors

#789abcRGB Hex Notation
#acfEquates to "#aaccff"
rgb(0,25,50)Value of each of red, green, and blue. 0 to 255, may be swapped for percentages.

CSS Box Model

CSS Box Model

CSS Positioning

displayclear
positionz-index
topdirection
rightunicode-bidi
bottomoverflow
leftclip
floatvisibility

CSS Dimensions

  • width
  • min-width
  • max-width
  • height
  • min-height
  • max-height
  • vertical-align

CSS Color & Background

  • color
  • background
  • background-repeat
  • background-image
  • background-color
  • background-position
  • background-attachment

CSS Text

  • text-indent
  • word-spacing
  • text-align
  • text-transform
  • text-decoration
  • white-space
  • text-shadow
  • line-height
  • letter-spacing

CSS Fonts

  • font
  • font-weight
  • font-family
  • font-stretch
  • font-style
  • font-size
  • font-variant
  • font-size-adjust

CSS Boxes

  • margin
  • border-color
  • margin-top
  • border-top-color
  • margin-right
  • border-right-color
  • margin-bottom
  • border-bottom-color
  • margin-left
  • border-left-color
  • padding
  • border-style
  • padding-top
  • border-top-style
  • padding-right
  • border-right-style
  • padding-bottom
  • border-bottom-style
  • padding-left
  • border-left-style
  • border
  • border-width
  • border-top
  • border-top-width
  • border-bottom
  • border-right-width
  • border-right
  • border-bottom-width
  • border-left
  • border-left-width

CSS Tables

  • caption-side
  • border-spacing
  • table-layout
  • empty-cells
  • border-collapse
  • speak-header

CSS Paging

  • size
  • page-break-inside
  • marks
  • page
  • page-break-before
  • orphans
  • page-break-after
  • widows

CSS Interface

  • cursor
  • outline-style
  • outline
  • outline-color
  • outline-width

CSS Aural

volume elevation speak
speech-rate pause voice-family
pause-before pitch pause-after
pitch-range cue stress
cue-before richness cue-after
speak-punctuation play-during speak-numeral
azimuth

Other CSS Properties

  • content
  • list-style-type
  • quotes
  • list-style-image
  • counter-reset
  • list-style-position
  • counter-increment
  • marker-offset
  • list-style

Adding CSS

External link (good DRY way):

<head>
  <link rel="stylesheet" href="styles.css" />
</head>
                

In the head:

<head>
  <style>
    h1 {color: red; }
  </style>
</head>
                

Inline style attribute: <h1 style="color: red;">Learning CSS</h1>

Applying and priority

  • external link
  • In the head
  • Inline style attribute
  • Using !important (ex background: #e0e2e6 !important;)

If we have same selectors:

.intro { 
  width: 900px;
  color: black; 
}
.intro { 
  color: red;          /* last definition overrides previous */
  margin-bottom: 5px;  /* non-conflicting properties will be combined */
}
                

Result:

width: 900px;
color: red;
margin-bottom: 5px;
                

CSS Media Queries

Responsive Grid Media Queries - 1280, 1024, 768, 480 1280-1024 - desktop (default grid) 1024-768 - tablet landscape 768-480 - tablet 480-less - phone landscape & smaller

@media all and (min-width: 1024px) and (max-width: 1280px) { }

@media all and (min-width: 768px) and (max-width: 1024px) { }

@media all and (min-width: 480px) and (max-width: 768px) { }

@media all and (max-width: 480px) { }
                

Small screens - MOBILE

@media only screen { } /* Define mobile styles - Mobile First */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium screens - TABLET */
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large screens - DESKTOP */
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens */
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens */
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */

/*------------------------------------------*/

 

/* Portrait */
@media screen and (orientation:portrait) { /* Portrait styles here */ }
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ }

/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}
                

CSS3 RGBA

background-color: rgba(R, G, B, A);
color: rgba(R, G, B, A);
                

CSS3 Equally Rounded Corners

  • webkit -webkit-border-radius
  • firefox -moz-border-radius
  • standard -border-radius

CSS3 Individually Rounded Corners

Webkit

  • -webkit- border-top-left-radius
  • -webkit-border-top-right-radius
  • -webkit-border-bottom-left-radius
  • -webkit-border-bottom-right-radius

Moz

  • -moz- border-top-left-radius
  • -moz-border-top-right-radius
  • -moz-border-bottom-left-radius
  • -moz-border-bottom-right-radius

Standard

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

CSS3 Shadow

Webkit: -webkit-box-shadow
Firefox: -moz-box-shadow
Standard: box-shadow & text-shadow
Syntax: x-offset, y-offset, blur, color. For example: 5px 5px 5px #000000

CSS3 Font Face

@font-face {
    font-family: '';
    src: url('url_of_font_file');
    src: local(''), url('url_of_font.woff'), format('woff'), url('url_of_font.ttf'), format('truetype');
}
                

CSS3 Multiple Columns

Webkit: -webkit-column-count & -webkit-column-gap

Firefox: -moz-column-count & -moz-column-gap

Standard: column-count & column-gap

CSS3 Box Sizing

box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
-icab-box-sizing: content-box;
-khtml-box-sizing: content-box;
                

Syntax: content-box acts like a standard box-model element, while border-box renders padding and border inside the box.

CSS3 Box Resize

min-height
min-width
resize
overflow: auto
                

CSS3 Outline

outline: 5px dashed #000000;
                

Syntax: thickness, style, color;

CSS3 Gradients

  • -webkit-gradient
  • -moz-linear-gradient

Other Resources