CSS
Last updated
Was this helpful?
Last updated
Was this helpful?
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
Media Query
Selector
Round Corner
Transform
Multicolumn Layout
An inline element does not start on a new line and it only takes up as much width as necessary.
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
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).
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.
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
font-size: 10rem, the text will not be responsive when the user resizes / drags the browser window
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
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;}
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
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.
@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.
Value
Description
all
Default. Used for all media type devices
Used for printers
screen
Used for computer screens, tablets, smart-phones etc.
speech
Used for screenreaders that "reads" the page out loud
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.
overflow: visible|hidden|scroll|auto|initial|inherit;
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
inherit
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.
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.
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
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.
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
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.
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.
box-sizing: border-box;
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.
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
Sets this property to its default value.
Inherits this property from its parent element.
