Scribd
Upload
2 views2 pages

Css

The document provides an overview of CSS, detailing the types of selectors (class, id, group, universal), inheritance and specificity rules, and color specifications including RGB, hex, and HSL. It explains the use of units and sizes such as pixels, percentages, rem, and em, as well as combinators for selectors. Additionally, it covers background properties and border styles.

Uploaded by

Emmanuel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views2 pages

Css

The document provides an overview of CSS, detailing the types of selectors (class, id, group, universal), inheritance and specificity rules, and color specifications including RGB, hex, and HSL. It explains the use of units and sizes such as pixels, percentages, rem, and em, as well as combinators for selectors. Additionally, it covers background properties and border styles.

Uploaded by

Emmanuel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS

Internal, External & Inline

Selectors

• Class is called by .
• Id is called by # (not advisable to use in css)
• Group selector by “ , “ = h1, h2
• Called nested group selector without adding “ , “ = h1 h2
• * {} universal selector (basically a css reset)
• !important overrides the rendering structure

Inheritance and specificity

• Selector { property: property value; }


• The last declaration overides the first
• Inheritance keeps code DRY (don’t repeat yourself) - Write less code
and be more efficient
• Border and form elements are not subject to inheritance
• html, body, header, main,footer can be utilized for inheritance
• Element is least specific, class is more and Id is most

Colors

• background/color = background color


• color = font color
• rgb ( red, green, blue) = 0-255 + a (opacity) = 0 - 1
• Hex = #000000 = rgb (00,00,00)
• Hsl (hue. saturation, lightness) = 100% + a (opacity) =
Color and Contrast Checker
• Coolors
• WebAim

Unit & Sizes


• Using px (pixel) sets absolute size
• Using % (percentage) is relative to a specified parent size
• For block level elements width = 100%
• font-size can be specified with rem = (relative em - looks to the
browser default configuration, default is 1).
• em on the other hand is relative to rem It amplifies in relation to the
rem value set
• ch - specifies the character length on each line
•

/ / / / / / / / / / / / / / / / / / / /

selector {
property: value;
}

Selectors Combinators

Simple = name, ID, Class


Descendant = space (all)
Child = > (direct)
Next sibling = + (Adjacent)
Subsequent sibling = ~ (General)
Grouping selector = ,
Background
color - image - repeat - attachment - position

Border
border-style

You might also like