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

SelectorHTML 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>
.classelements of class="class"
div.class<div> of class=”class”
#itemidelement 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-childFirst child element
:first-lineFirst line of element
:first-letterFirst letter of element
:hoverElement with mouse over
:activeActive element
:focusElement with focus
:linkUnvisited links
:visitedVisited links
:lang(var)Element with language “var”
:beforeBefore element
:afterAfter element

CSS Sizes

00 requires no unit
Relative Sizes
em1em equal to font size of parent (same as 100%)
exHeight of lower case “x”
%Percentage
Absolute Sizes
pxPixels
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

volumeelevationspeak
speech-ratepausevoice-family
pause-beforepitchpause-after
pitch-rangecuestress
cue-beforerichnesscue-after
speak-punctuationplay-duringspeak-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

Angular Framework – Documentation and Code Snippets

Angular is a Javascript framework. Javascript can run on server-side as NodeJS which is build upon V8 engine, which backed by Google.

Bootstrapping

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule);

Bootstraps the app, using the root component from the specified NgModule.

NgModules

import { NgModule } from '@angular/core';

@NgModule({ declarations: ..., imports: ...,
exports: ..., providers: ..., bootstrap: ...})
class MyModule {}
                

Defines a module that contains components, directives, pipes, and providers.