Introduction to CSS

By Kapil Kumawat

Topics

  • Introduction
  • Selectors
  • Specifity
  • Margin/Border/Padding/
  • Generated Content
  • Backgrounds
  • Display/Float/Position/z-index
  • Font
  • Media Queries
  • Tabs with CSS
  • Debugging

Press c from keyboard to open editor in any page.

Introduction

  • Style sheet language for presentations
  • Variations CSS 1,CSS 2, CSS2.1, CSS 3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #xyz { color: red }
        </style>
    </head>
    <body>
        <p id="xyz" style="color: blue"> To demonstrate specificity </p>
    </body>
</html>
                
                

CSS Properties Link

CSS Rest

Resets the styling of all HTML elements wrt to All Browsers

  • YUI CSS Reset
  • Normalise

Selectors


selectorA {
    property1: value1;
    property2: value2;
}

selectorB {
    property1: value3;
    property2: value4;
}
            

Selectors

  • *
  • E
  • .class
  • #id
  • E F
  • E > F
  • E + F
  • E[attribute]
  • E[attribute=value]
  • E[attribute~=value]
  • E[attribute|=value]
  • :first-child
  • :lang()
  • :before
  • ::before
  • ::selection
  • :after
  • ::after
  • :first-letter
  • ::first-letter
  • :first-line
  • ::first-line
  • E[attribute^=value]
  • E[attribute$=value]
  • E[attribute*=value]
  • E ~ F
  • :root
  • :last-child
  • :only-child
  • :nth-child()
  • :nth-last-child()
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-of-type()
  • :nth-last-of-type()
  • :empty
  • :not()
  • :target
  • :enabled
  • :disabled
  • :checked
  • :default
  • :valid
  • :invalid
  • :in-range
  • :out-of-range
  • :required
  • :optional
  • :read-only
  • :read-write

More Selectors

  • :indeterminate
  • E:not(s1, s2)
  • E:matches(s1, s2)
  • E:has(rs1, rs2)
  • E[foo="bar" i]
  • E:dir(ltr)
  • E:lang(zh, *-hant)
  • :any-link
  • :scope
  • :current
  • :current(s)
  • :past
  • :future
  • :active-drop
  • :valid-drop
  • :invalid-drop
  • :placeholder-shown
  • :blank
  • F || E
  • :nth-column(n)
  • :nth-last-column(n)
  • :scope
  • :scope-context()
  • :host
  • :host()
  • :host-context()
  • ::shadow
  • ::content
  • E /deep/ F
  • ::region

Basic Selectors

  • id
  • class
  • tabname

Combinator Selector

  • ul ol -> descendant selector
  • ul > li -> child selector
  • ul + p, li.hasaclass + li -> adjacent sibling
  • li.hasaclass ~ li -> adjacent all sibling

Attribute Selector

  • a[attr] -> Anchor with attr attribute
  • a[attr=val] -> Anchor with attr attribute of value "val"
  • a[attr|=val] -> Anchor with attr attribute of value begin as full word "val"
  • a[attr~=val] -> Anchor with attr attribute of value in between as full word "val"

CSS3 Attribute Selector

  • a[attr^=val] -> Anchor with attr attribute of value start with "val"
  • a[attr$=val] -> Anchor with attr attribute of value ends with "val"
  • a[attr*=val] -> Anchor with attr attribute of value in between matches "val"

Structural Selectors

  • :nth-child()
  • :nth-last-child()
  • :nth-of-type()
  • :nth-last-of-type()
  • :first-child
  • :last-child
  • :first-of-type
  • :last-of-type
  • :only-child
  • :only-of-type
  • :root
  • :empty
  • :not(selector)

UI psedu-classes

  • :enabled
  • :disabled
  • :checked
  • :indeterminate
  • :hover
  • :active
  • :focus
  • :link
  • :visited
  • :not()

UI Form psedu-classes

  • :valid
  • :invalid
  • :required
  • :optional
  • :in-range
  • :out-of-range
  • :read-only
  • :read-write
  • :default

UI psedu-elements

  • ::first-line
  • ::first-letter
  • ::selection
  • ::before & ::after

CSS Box Model

Flow content Properties

  • box-decoration-break: slice | clone
  • box-sizing: content-box | border-box
  • overflow: visible | hidden | scroll | auto
  • overflow-x
  • overflow-y

Size Properties

auto | <length> value | <percentage> value

  • height
  • width
  • max-height
  • max-width
  • min-height
  • min-width

Margin/Border/Padding Properties

  • margin
  • padding
  • border
  • border-radius
  • border-color
  • border-image
  • border-spacing: (length)
  • border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
  • border-width: (length) | thin | medium | thick | inherit
  • border-collapse: collapse | separate

Other Properties

  • box-shadow
  • visibility: visible | hidden | collapse

Generated Content

Icons

Attributes

Quotes

Tool Tip

Shapes

Refer more

More

Refer More

Background Properties

  • background-color
  • background-image: none | <url>
  • background-repeat: repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
  • background-attachment: scroll | fixed | local
  • background-position: <postion>
  • background-clip: border-box | padding-box | content-box
  • background-origin: border-box | padding-box | content-box
  • background-size: <length> | auto | cover | contain

Display

The display CSS property specifies the type of rendering box used for an element.

  • none
  • inline
  • block
  • list-item
  • inline-block
  • inline-table
  • table
  • table-cell
  • table-column
  • table-column-group
  • table-footer-group
  • table-header-group
  • table-row
  • table-row-group
  • flex
  • inline-flex

Example

Float

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

  • left
  • right
  • none

Clear

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

  • left
  • right
  • both
  • none

Position

The position CSS property chooses alternative rules for positioning elements

  • static
  • relative
  • absolute
  • fixed
  • sticky (not supported)

Z-Index

The z-index property specifies the z-order of an element and its descendants.

  • auto
  • <integer>

Font


@font-face {
    font-family: 'blah';
    src: url('blah.eot');
    src: url('blah.eot?#iefix')
        format('embedded-opentype'),
        url('blah.woff') format('woff'),
        url('blah.ttf') format('truetype'),
        url('blah.svg#blahRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'blah', arial, san-serif;
}
                

@font-face


@font-face {
    font-family: yourFontName;
    src: url(fontfile) [, url(fontfile)]*;
    [font-weight: bold|normal];
    [font-style: italic|normal];
    [charset: characterSet;]
} 
File chrome firefox safari IE
EOT
TTF/OTF 9
SVG
WOFF 5.1 9

Google Fonts

Media Queries


<link rel='stylesheet' type='text/css'
      media='screen' href='css/styles.css' />

<link rel='stylesheet' type='text/css'
      media='print' href='css/print.css' />

@media screen {
    p {
        color: blue;
    }
}

@media print {
    p {
        color: red;
    }
}
                 

Responsive Design


<link rel='stylesheet'
      media='screen and (min-width: 320px) and (max-width: 480px)'
      href='css/smartphone.css' />
@media screen and (max-width: 480px){
    a {
        transition: background-color 200ms linear 50ms;
    }
}

@media screen and (orientation: landscape) {
    a[href^="mailto:]:before {
        content: url(icons/email.gif);
    }
}
                 

Media Queries Properties

  • (min/max)-width: viewport width
  • (min/max)-height: viewport height
  • (min/max)-device-width: screen width
  • (min/max)-device-height: screen height
  • orientation: portrait(h>w) | landscape(w>h)
  • (min/max)-aspect-ratio: width/height
  • (min/max)-device-aspect-ratio: device-width/height
  • (min/max)-color:
  • (min/max)-color-index:
  • (min/max)-monochrome: 0 | 1+
  • (min/max)-resolution: 72dpi | 100dpcm
  • scan: progressive | interlace (tv)
  • grid: 0 | 1 (grids (like tty) or bitmap)

Spec

Tab with CSS

Debugging

Demo

Thank You

Contact me at kapil@ask4kapil.xyz

Source code of this presentation at Github