# CSS

## CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.

## CSS3 New Features

* Media Query
* Selector
* Round Corner
* Transform
* Multicolumn Layout

## Element

### inline element

An inline element does not start on a new line and it only takes up as much width as necessary.

[\<a>](https://www.w3schools.com/tags/tag_a.asp)[\<abbr>](https://www.w3schools.com/tags/tag_abbr.asp)[\<acronym>](https://www.w3schools.com/tags/tag_acronym.asp)[\<b>](https://www.w3schools.com/tags/tag_b.asp)[\<bdo>](https://www.w3schools.com/tags/tag_bdo.asp)[\<big>](https://www.w3schools.com/tags/tag_big.asp)[\<br>](https://www.w3schools.com/tags/tag_br.asp)[\<button>](https://www.w3schools.com/tags/tag_button.asp)[\<cite>](https://www.w3schools.com/tags/tag_cite.asp)[\<code>](https://www.w3schools.com/tags/tag_code.asp)[\<dfn>](https://www.w3schools.com/tags/tag_dfn.asp)[\<em>](https://www.w3schools.com/tags/tag_em.asp)[\<i>](https://www.w3schools.com/tags/tag_i.asp)[\<img>](https://www.w3schools.com/tags/tag_img.asp)[\<input>](https://www.w3schools.com/tags/tag_input.asp)[\<kbd>](https://www.w3schools.com/tags/tag_kbd.asp)[\<label>](https://www.w3schools.com/tags/tag_label.asp)[\<map>](https://www.w3schools.com/tags/tag_map.asp)[\<object>](https://www.w3schools.com/tags/tag_object.asp)[\<output>](https://www.w3schools.com/tags/tag_output.asp)[\<q>](https://www.w3schools.com/tags/tag_q.asp)[\<samp>](https://www.w3schools.com/tags/tag_samp.asp)[\<script>](https://www.w3schools.com/tags/tag_script.asp)[\<select>](https://www.w3schools.com/tags/tag_select.asp)[\<small>](https://www.w3schools.com/tags/tag_small.asp)[\<span>](https://www.w3schools.com/tags/tag_span.asp)[\<strong>](https://www.w3schools.com/tags/tag_strong.asp)[\<sub>](https://www.w3schools.com/tags/tag_sub.asp)[\<sup>](https://www.w3schools.com/tags/tag_sup.asp)[\<textarea>](https://www.w3schools.com/tags/tag_textarea.asp)[\<time>](https://www.w3schools.com/tags/tag_time.asp)[\<tt>](https://www.w3schools.com/tags/tag_tt.asp)[\<var>](https://www.w3schools.com/tags/tag_var.asp)

`margin-top` and `margin-bottom` have no effect on inline element

`padding-top` and `padding-bottom` have no effect on inline element.  But not add to its dimensions

### Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

[\<address>](https://www.w3schools.com/tags/tag_address.asp)[\<article>](https://www.w3schools.com/tags/tag_article.asp)[\<aside>](https://www.w3schools.com/tags/tag_aside.asp)[\<blockquote>](https://www.w3schools.com/tags/tag_blockquote.asp)[\<canvas>](https://www.w3schools.com/tags/tag_canvas.asp)[\<dd>](https://www.w3schools.com/tags/tag_dd.asp)[\<div>](https://www.w3schools.com/tags/tag_div.asp)[\<dl>](https://www.w3schools.com/tags/tag_dl.asp)[\<dt>](https://www.w3schools.com/tags/tag_dt.asp)[\<fieldset>](https://www.w3schools.com/tags/tag_fieldset.asp)[\<figcaption>](https://www.w3schools.com/tags/tag_figcaption.asp)[\<figure>](https://www.w3schools.com/tags/tag_figure.asp)[\<footer>](https://www.w3schools.com/tags/tag_footer.asp)[\<form>](https://www.w3schools.com/tags/tag_form.asp)[\<h1>-\<h6>](https://www.w3schools.com/tags/tag_hn.asp)[\<header>](https://www.w3schools.com/tags/tag_header.asp)[\<hr>](https://www.w3schools.com/tags/tag_hr.asp)[\<li>](https://www.w3schools.com/tags/tag_li.asp)[\<main>](https://www.w3schools.com/tags/tag_main.asp)[\<nav>](https://www.w3schools.com/tags/tag_nav.asp)[\<noscript>](https://www.w3schools.com/tags/tag_noscript.asp)[\<ol>](https://www.w3schools.com/tags/tag_ol.asp)[\<p>](https://www.w3schools.com/tags/tag_p.asp)[\<pre>](https://www.w3schools.com/tags/tag_pre.asp)[\<section>](https://www.w3schools.com/tags/tag_section.asp)[\<table>](https://www.w3schools.com/tags/tag_table.asp)[\<tfoot>](https://www.w3schools.com/tags/tag_tfoot.asp)[\<ul>](https://www.w3schools.com/tags/tag_ul.asp)[\<video>](https://www.w3schools.com/tags/tag_video.asp)

## Box Model

All HTML elements can be considered as boxes. In CSS, the term box model is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of **margin, border, padding and context**.&#x20;

![div {   width: 300px;   border: 15px solid green;   padding: 50px;   margin: 20px; }](https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LgnugJ0SdX2tMAwP37V%2Fuploads%2FQXleR9aiBgkJ3KYx3uZE%2Ffile.png?alt=media)

![](https://firebasestorage.googleapis.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LgnugJ0SdX2tMAwP37V%2Fuploads%2F8sWNUGo0HVluniaUyKuz%2Ffile.png?alt=media)

## Position

* Static
  * This is the default value, all the elements are in order as they appear in the document
* Fixed
  * The element is positioned relative to its normal position
  * This can be used to create a "floating" element that stays in the same position regardless of scrolling.
* Absolute
  * The element is positioned absolutely to its first positioned parent
  * &#x20;The absolutely positioned element is positioned relative to its *nearest positioned ancestor* (i.e., the nearest ancestor that is not `static`).
* Relative
  * The element is positioned related to the browser window
  * their normal position within the document
* Sticky
  * The element is positioned based on the user's scroll position

## Size

`font-size: 10rem`, the text will not be responsive when the user resizes / drags the browser window

### Absolute Lengths

![](https://4116032991-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgnugJ0SdX2tMAwP37V%2F-MER2xPuQvXaouXQ0wch%2F-MEVTwIsGc0bP4DiZO38%2Fimage.png?alt=media\&token=6944fac1-1776-4018-a827-579cdcd206cd)

### Relative Lengths

![](https://4116032991-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgnugJ0SdX2tMAwP37V%2F-MER2xPuQvXaouXQ0wch%2F-MEVTpLib6Mf8cauVI5B%2Fimage.png?alt=media\&token=6c34b0b8-c884-49d7-9836-057d1d57c6b1)

## Display

* Inline
* Block
  * It will change the width and height based on the settings, and block the lane for wrapped content
* Inline-Block
  * It will deal better both has the width and height setting and keep wrapped content in line
* <https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1>

## Display: none vs Visibility: hidden

Display: none - means that the tag will not appear on the page at all, although you can still interact with it through the DOM. There will be no space allocated for it between the other tags.

Visibility: hidden - means that unlike display: none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.&#x20;

Overflow: hidden   {overflow: hidden; width: 0; height: 0;}

## Responsive Design

* Media query&#x20;
  * Media query made it possible to define different style rules for different media types. By using media query, we can do responsive web design to handle different devices' viewport.&#x20;
  * / *iphone6 7 8* /
  * &#x20;body { background-color: yellow; }&#x20;
  * / *iphone 5* /&#x20;
  * @media screen and (max-width: 320px) { body { background-color: red; } }&#x20;
  * / *iphoneX* /&#x20;
  * @media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) { body { background-color: #0FF000; } }

* Flexbox&#x20;
  * Need a container with attributes display: flex, flex-direction: column/row(-reserve), flex-wrap: (no)wrap(-reverse), flex-flow: setting both the flex-direction and flex-wrap

## Media Query&#x20;

It uses the @media rule to include a block of CSS properties only if a certain condition is true. In order to implement Responsive Design to adapt different screen.&#x20;

### CSS Syntax

@media not|only mediatype and (mediafeature and|or|not mediafeature) {\
&#x20; CSS-Code;\
}

meaning of the **not**, **only** and **and** keywords:

**not:** The not keyword reverts the meaning of an entire media query.

**only:** The only keyword prevents older browsers that do not support media queries with media features from applying the specified styles. **It has no effect on modern browsers.**

**and:** The and keyword combines a media feature with a media type or other media features.

They are all optional. However, if you use **not** or **only**, you must also specify a media type.

### Media Types

| Value  | Description                                           |
| ------ | ----------------------------------------------------- |
| all    | Default. Used for all media type devices              |
| print  | Used for printers                                     |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |

## overflow Property

The `overflow` property specifies what should happen if content overflows an element's box.

This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

### CSS Syntax

overflow: visible|hidden|scroll|auto|initial|inherit;

### Property Values

| Value   | Description                                                                                                              |
| ------- | ------------------------------------------------------------------------------------------------------------------------ |
| visible | The overflow is not clipped. It renders outside the element's box. This is default                                       |
| hidden  | The overflow is clipped, and the rest of the content will be invisible                                                   |
| scroll  | The overflow is clipped, but a scroll-bar is added to see the rest of the content                                        |
| auto    | If overflow is clipped, a scroll-bar should be added to see the rest of the content                                      |
| initial | Sets this property to its default value. [Read about *initial*](https://www.w3schools.com/cssref/css_initial.asp)        |
| inherit | Inherits this property from its parent element. [Read about *inherit*](https://www.w3schools.com/cssref/css_inherit.asp) |

## CSS Grid vs Flex-box

* CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows, unlike flex-box which is largely a one-dimensional system either in a column or a row
* CSS Grid's approach is layout-first while flex-box's approach is content-first
* Flex-box layout is most appropriate to the components of an application and small-scale layouts, while the Grid layout is intended for larger scale layouts which aren't linear in their design
* Flex-box is for defining a layout as a row or a column, whereas Grid is for defining a grid and fit content into it in two-dimensions

Shorthand for using Flex-box: performance issues and browser compatibility.&#x20;

## Animation vs Transition

Animations within CSS3 allow the appearance and behavior of an element to be altered in multiple keyframes. Transitions provide a change from one state to another, while animations can set multiple points of transition upon different keyframes.&#x20;

## Pseudo Class

* It is used to define a special state of an element&#x20;
* Active, checked, disabled, first-child, link, visited
* Pseudo elements: after, before, first-letter, first-line, selection

## Pseudo elements

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element. e.g. :first-letter, :before, :after.

## CSS Preprocessors - pros & cons

Advantages:&#x20;

* CSS is made more maintainable
* Easy to write nested selectors
* Variables for consistent theming. Can share theme files across different projects
* Mixins to generate repeated CSS
* Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file

Disadvantages:

* Requires tools for preprocessing. Re-compilation time can be slow

## Mixin in SASS / SCSS

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.&#x20;

## Z-index

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. z-index only works on positioned elements.&#x20;

## How to add a padding but not influence the box size

`box-sizing: border-box`;

## Accessibility

* Test size for different device resolution and user's distance
* Setting line height to make text better readable and visually more appealing
* Add @media block to tweak the styling of elements, like set a static header and hide the ads.&#x20;

## How many px is equal to 1 rem

Rem is a new feature for CSS3, which stands for root em. It's equal to the computed value of font-size on the root element, the rem units refer to the property's initial value. This means that 1rem equals the font size of the HTML element, which for most browser has a default value of 16px.

SASS/ LESS

unused style resources not downloaded by the browser

```
#i-am-useless {
```