CSS Knowledge - lishiying410/HTML-Notes GitHub Wiki

CSS stands for cascading style sheet.

The format of CSS is: CSS selector { property1:value1; property2:value2;}

CSS selector:

  1) element selector:  `p{color:red; text-align:center;}`, all `<p>` element will be selected.

  2)id selector: `#param1{color:red;text-align:center}`, since id of an element should be unique in a web page, id selector(#id) is used to select an unique element.

  3)class selector: .table{color:red;text-align:center}, select elements with specific class attributes. 
  We can also specify only specific elements can be select, like: `p.news {color:red; text-align:center}`, only `<p> `element with class name "news" will be selected.

  4) group selector, the format is element, element: `p,h1,h1{color:red;text-align:center}`

  5) element element, for example, div p {}, means select all `<p>` inside `<div>`.

CSS comment /*put comment here*/

CSS border, it defines then style, width and color of a property's border.

CSS margin, it sets size of white space OUTSIDE the border.

CSS padding, it sets size of white space between element content and element border.

CSS size unit conversion, the formula to convert from pixels to em is pixels/16=em.

The total width and height of an element should calculate like this:

Total width=left margin+left border+left padding+content width+right padding+right border+right margin

Total height=top margin+top border+top padding+content height+bottom padding+bottom border+bottom margin

CSS element position, it totally has four different types of position, refer position

  1) **static**, it's default position, static positioned elements are not affected by top, bottom, left, right properties. It's positioned according to the normal flow of the page, not in any special way.

  2) **relative**, relative positioned element is positioned relative to its normal position, set top, bottom.left, right for its relative position.

  3) **fixed**. it stays in a fixed position even when the page get scrolled, top, bottom, left and right can be used for it.

  4) **absolute**, an element with absolute position is positioned relative to it's nearest positioned ancestor. If no ancestor, it will use the body element.
⚠️ **GitHub.com Fallback** ⚠️