CSS Basics Notes

CSS basic rules and principles.

em and rem

Both are unit of current font-size used for removing the hardcoded font sizes. em is relative to font-size of its direct or nearest parent. em is the inherited (computed) value from its parent element. The root element with no parent has 1em font size.

rem (Root em) is only relative to font size of html (root) tag. Root tag primarily referred as unit of 1 rem.

You want to use em or rem based on current element relevance whether it is relative to Root or something else.

History: Old typography unit, an em square was a square blank type, where the length of each side was the same as the width of an uppercase ‘M’ – normally the widest glyph in a given font.

CSS Units of Measurement

Relative units

1. px: pixel, considered relative in CSS2.1 because it varies with display resolution
2. em: a unit of measurement equal to the current font size
3. ex: x-height, approximately the height of a lowercase “x” in the font
   
   The following units are new in CSS3. Browser support may take a while to ramp up.
4. rem: root em, equal to the em size of the root element (html)
5. ch: zero width, equal to the width of a zero (0) in the current font and size
6. vw: viewport width unit, equal to 1/100 of the current viewport (browser window) width
7. vh: viewport height unit, equal to 1/100 of the current viewport height
8. vm: viewport minimum unit, equal to the value of vw or vh, whichever is smaller

Absolute units

1. px: pixel, defined as an absolute measurement equal to 1/96 of an inch in CSS3
2. pt: points (1/72 inch in CSS2.1)
3. pc: picas (1 pica = 12 points)
4. mm: millimeters
5. cm: centimeters
6. in: inches

Colors in CSS

Colors can be specified in properties like text-color, bg-color etc. using three units Actual Color Names RGB - Red Green Blue with Decimal and Hex Values

White
rgb (255, 255, 255)
rgb (100%, 100%, 100%)
#FFFFFF
#FFF

RGBa - Red Green Blue with alpha property for making it transparent / opaque. Last parameters contains values between 0 to 1. Where 0 is fully transparent and 1 is fully opaque.

HSL - Hue (Color), Saturation and Lightness HSLa - HSL with alpha for making it transparent / opaque

color: hsla(0, 0%, 0%, .5);

Vendor Prefixes

There are many css styles, which are vendor specific. Below list contains vendor specific prefixes:

Prefix	Organization	Most popular browsers
-ms-	Microsoft	Internet Explorer
-moz-	Mozilla Foundation	Firefox, Camino, Seamonkey
-o-	Opera Software	Opera, Opera Mini, Opera Mobile
-webkit-	Originally Apple; now open source	Safari, Chrome, Android, Silk, Blackberry, WebOS, many others
-khtml-	Konqueror	Konqueror

Box Model

All elements follow the box model while rendering. You can specify the width, height, padding, border and margin. Prior to css level 3, total box width and height may vary based on width, height, padding and border size (margin not included, as it is the area outside border). As all will be sum up to find the total width and height.

However, CSS level 3 allows you to use box-sizing property (box-sizing: border-box) that would render the element with width and height specified in CSS.

You can replicate the older style by using box-sizing: content-box; to have the old style box model height and width.

Tip

You can use mnemonic TRouBLe (Top, Right, Bottom, Left) when you apply the shorthand style values. For e.g. padding: 20px 10px 20px 10px or padding: 20px 10px would add the 20px padding at top and bottom. Also, 10px padding at left and right.

Example:

p {
  background: #c2f670;
  width: 500px;
  height: 150px;
  padding: 20px;
  border: 2px solid gray;
  margin: 20px;
}
.p {
  background: #c2f670;
  box-sizing: border-box;
  width: 500px;
  height: 150px;
  margin: 20px;
  padding: 20px;
  border: 2px solid gray;
}

<p>This is the paragraph</p>this will be outside
<div class="p">This is the paragraph with class p</div>this will be outside 2

You may enter content more than width/height available to p and div in above example. To control that effect you can use overflow property. Based on desired result it can be set to visible (text will be display outside box), hidden, scroll, and auto (could short the text or add scroll bars)

Margins

1. Collapsing margins: Let’s say two elements align vertically. Top element is having 40px bottom margin. Element at bottom is having 30px top margin. In that case, max margin (40px) between them will be calculated and put on display instead of 70px. This is called collapsing margins. Caution: margins on floated elements do not collapse.

2. Margins on inline elements: You can apply margins on text elements (non-replaced inline elements). But, only left and right margin would be applicable. Top and bottom margins won’t have any affect. On the other hand, margins on inline images (replaced element) would apply in all directions.

3. Clear property comes to your rescue when you want to add a new element below the floated element. You can use clear: both | left | right as per your use case.

Tip

You can capitalize the first letter of a first paragraph of your page using following style: p:first-child::first-letter{ text-transform: uppercase; text-size: 2em }. You can only have one pseudo-element per selector and it must come last. Therefore, first-letter was added at end after pseudo class first-child.

Shorthand

1. Border - border: width style color e.g. _border: 2px solid blue; or border-bottom: 2px solid blue;
2. Border radius - border-radius: top-left top-right bottom-right bottom-left e.g. border-radius: 30px 35px 25px 40px
3. Text shadow - text-shadow: horizontal-offset vertical-offset blur-radius color e.g. text-shadow: 0.2em 0.2em 0.3em pink;
4. Box shadow - box-shadow: horizontal-offset vertical-offset blur-distance spread-distance color e.g. box-shadow: 0px 1px 1px 0px #0000001a; can be used to show the little shadow at page navigation bar.
5. Transition - transition: property duration timing-function delay e.g. transition: background-color 2s ease-in-out .2s; You can add multiple transitions separated by commas here. Or you can use all to perform all transition as transition: all 0.2s ease-in-out .2s;
6. Animation - animation: name duration timing-function iteration-count direction; e.g. animation: colors 5s linear infinite alternate;

Display

• Use of inline display role convert a vertical list to horizontal list. li { display: inline; } Popular use case is navigation.