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><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

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><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

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.

div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; }

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

  • 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

Relative Lengths

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.

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

Responsive Design

• Media query

  • 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.

  • / iphone6 7 8 /

  • body { background-color: yellow; }

  • / iphone 5 /

  • @media screen and (max-width: 320px) { body { background-color: red; } }

  • / iphoneX /

  • @media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) { body { background-color: #0FF000; } }

• Flexbox

  • 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

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.

CSS Syntax

@media not|only mediatype and (mediafeature and|or|not mediafeature) { 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
inherit	Inherits this property from its parent element. Read about inherit

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.

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.

Pseudo Class

• It is used to define a special state of an element

• 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:

• 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.

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.

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.

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 {