Labels

CSS 3 - Cheat Sheet (Part-I)

Selectors and their usage
    • Tag
      • p, span, div
      • Use them directly
    • Class
      • Custom-class
      • Use (.) to indicate selector
      • .my-class
    • Id
      • (has to be a) unique element on page
      • use (#) to indicate it
      • #my-element

Selector Relationships & Nested Tags
    • Relationships
      • Ancestor
      • Descendent
      • Parent
      • Child
      • Sibling

  • Nested Classes

    • ul li a { color: black; }

  • Pseudo Classes
    • :first-class
    • :last-child
    • :nth-child
    • :first-of-type
    • :last-of-type
    • :nth-of-type
    • +
      • First Adjacent Sibling
    • ~
      • All Adjacent Sibling
    • :not 
      • All p with not class foo

  • Inheritance
    • Properties which are not inherited
      • Placement tags
      • Margins
      • Borders
      • Background colors
    • In case of multiple inherited styles, nearest Ancestor style is used.
    • Descendants inherit styles from ancestors.

  • Specificity
    • Number of ID selectors = a
    • Number of class, attributes & pseudo-classes selectors = b
    • Type & pseudo-elements = c
    • Concatenate a, b, c gives specificity.
    • Example

      • UL OL LI.red /* a=0 b=1 c=3  specificity = 13 */
        UL OL LI.red /* a=1 b=1 c=3  specificity = 113 */
        #abc /* a=1 b=0 c=0  specificity = 100 */
        #abc:not(foo) /* a=1 b=0 c=1  specificity = 101 */

    • Simplify Specificity
      • Tag selector = 1
      • Class selector = 10
      • ID selector = 100
      • Pseudo-element (::first-line) = 1 point
      • Pseudo-class (::link) = 10 points
      • It simply overrides lower value.
        • Example, black text color will override blue.
    • Id’s overpower everything.
    • In case of conflicts, they are resolved by Specificity rules.
    • Id = 100, class= 10, tag = 1
  • Font
    • The font-family property is used to change the face of a font.
    • The font-style property is used to make a font italic or oblique.
    • The font-variant property is used to create a small-caps effect.
    • The font-weight property is used to increase or decrease how bold or light a font appears.
    • The font-size property is used to increase or decrease the size of a font.
    • The font property is used as shorthand to specify a number of other font properties.
  • Web Fonts
    • Font is downloaded on users machine
      • Complex
      • Legal issues
    • How to use
      • Go to https://www.google.com/fonts
      • Select the font, get the URL
      • Add as the first entry in the <head> section after title
      • Use the font as specified in the font page
    • Font Size
      • em & percentage : 1 em = 100%
      • using px
      • keywords : small, medium, large, x-large
    • Font Color
      • rgb
      • rgba : rgb with opacity (0 to 1: 0 is completely transparent)
    • Font Style
      • Italic
      • Bold
      • Normal
    • Text Capitalization
      • Using text-transform: 
        • Uppercase
        • Lowercase
        • Capitalize (First letter of every word)
        • Font-variant: small caps
        • Text-decoration: for underline & overline
    • Kerning
      • It’s the space between the letters. 

        •   letter-spacing: -1px;
            word-spacing: 2px;

    • Lending
      • It’s the space between the lines.

        • Line-height: 150%;
          Line-height:1.25;

  • Margins, Borders & Padding
    • The Box Model
      • Each tag is just a box
      • Page consists of boxes within boxes.
    • Margin
      • Space that separates one box from another
    • Padding
      • Space between border & the contents of the box
    • Border
      • Line around each edge of the box
    • Tags
      • Block-level: They have Space before & after them.
      • p, div
    • In-line
      • No space above & below
      • Strong, em, image
    • Borders
      • Border-top/left/right/bottom can be set individually

          border: 2px solid black;
          border-width: 2px;
          border-style: solid;
          border-color: black;

    • Rounded Box
      • .my-roundex-box{
          border-radius: 20px;  
        }

    • Box Shadow
    •  
        box-shadow: 0 0 15px 5px rgba(40, 80, 100, 0.75);
       
    • Parameter meanings:
      • 0: No offset to left 
      • 0: No offset right
      • 15: No offset to top & bottom
      • 5: Spread value, pushes shadow 5 px to 4 edges
      • Rgba: shadow color with opacity
  • Page Layout
    • Create Column
      • Move content to the top of the page
      • Set width
      • Set float
      • Enclose main section in div 
      • Set margin of main section greater than the column width
    • Float Image
      • Set width, height
      • Set margin & float
    • Nav Bars
      • Set of links
      • Implemented using ul
      • Remove bullets
      • Remove padding & margins
      • Set the display to inli-block
  • Miscellaneous
    • Rounded borders
      •   border-radius: rounded borders for all;
          border-radius: 15px 20px 35px 50px;
    • Border image
      • border
      • border-image-source
      • border-image-slice
      • border-image-width
      • border-image-repeat
    • Multi background
      • Used to setting all the background image properties in one section
        • background-clip : Used to declare the painting area of the background
        • background-image : Used to specify the background image
        • background-origin : Used to specify position of the background images
        • background-size : Used to specify size of the background images

    • Colors
      • RGBA colors : Red Green Blue Alpha, alpha is the opacity from 0.0 to 1.0
        •   #d1 {
              background-color: rgba(255, 0, 0, 0.5);
            }
      • HSL colors: Hugh, saturation, lightness, Huge : degree on the color wheel, rest 0 to 100%
        •   #g1 {
              background-color: hsl(120, 100%, 50%);
            }
      • HSLA colors: huge, saturation, lightness and alpha
        •   #g1 {
              background-color: hsla(120, 100%, 50%, 0.3);
            }
    • Opacity
      •   #m1 {
            background-color: rgb(255, 0, 0);
            opacity: 1;
          }


  • Gradients
    • Combination of 2 or more colors
        • //top to bottom
          #gradient1 {
            height: 100px;
            background: -webkit-linear-gradient(pink, green);
            background: -o-linear-gradient(pink, green);
            background: -moz-linear-gradient(pink, green);
            background: linear-gradient(pink, green);
          }

          //horizontal
          #gradient2 {
            height: 100px;
            background: -webkit-linear-gradient(left, red, blue);
            background: -o-linear-gradient(right, red, blue);
            background: -moz-linear-gradient(right, red, blue);
            background: linear-gradient(to right, red, blue);
          }

          //diagonal
          #gradient3 {
            height: 100px;
            background: -webkit-linear-gradient(left top, red, blue);
            background: -o-linear-gradient(bottom right, red, blue);
            background: -moz-linear-gradient(bottom right, red, blue);
            background: linear-gradient(to bottom right, red, blue);
          }

          //multicolor
          #gradient4 {
            height: 100px;
            background: -webkit-linear-gradient(
              red,
              orange,
              yellow,
              red,
              blue,
              green,
              pink
            );
            background: -o-linear-gradient(red, orange, yellow, red, blue, green, pink);
            background: -moz-linear-gradient(red, orange, yellow, red, blue, green, pink);
            background: linear-gradient(red, orange, yellow, red, blue, green, pink);
          }

          //repeat radial gradient
          #gradient5 {
            height: 100px;
            width: 550px;
            background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: repeating-radial-gradient(blue, yellow 10%, green 15%);
          }


Happy Learning :)

Labels:

Comments

Post a Comment

Popular Posts