CSS Complete Notes
Summary:
The provided text is a comprehensive set of CSS notes covering various topics and concepts. It includes information on CSS syntax, selectors, the box model, colors, backgrounds, typography, box shadows, transitions, flexbox, CSS Grid, pseudo-classes, transforms, media queries, animations, CSS variables, positioning, responsive design, filters, flexbox ordering, overflow, gradients, responsive images, flexbox wrapping, grid template areas, multiple columns, flexbox and grid combination, custom animations with @keyframes, blend modes, shape-outside, grid auto-fit and minmax, flexbox alignment in grid, calc() function, transform origin, text effects, grid area naming, flexbox alignment with margins, custom cursors, flexbox alignment with flexbox properties, grid placement with grid-auto-flow, overflow-x and overflow-y, transform scale, perspective and 3D transforms, box sizing, adjacent and general sibling selectors, scroll snap, custom filters with SVG filters, CSS custom properties (variables), perspective and 3D transforms, @supports rule, sticky positioning, object-fit and object-position, flexbox order property, generated content with ::before and ::after, grid auto-placement, backdrop-filter, custom media queries, scroll behavior, scroll snap type, multi-column layout, shapes, mixins (using preprocessors), parent selector (upcoming), custom selectors (CSS level 4), masonry layout, conic gradients, aspect ratio, and CSS Houdini (upcoming).
These notes provide a comprehensive overview of various CSS concepts and techniques.
Excerpt:
CSS Complete Notes
CSS Syntax:
➔ CSS is written in a style rule format.
➔ It consists of a selector followed by a declaration block.
➔ The selector targets HTML elements, and the declaration block contains one or more
property-value pairs.
Example:
selector {
property: value;
/* more property-value pairs */
}
CSS Selectors:
Selectors determine which elements the CSS rules will be applied to.
There are various types of selectors, such as element selectors, class selectors, ID selectors, etc.
Example:
/* Element selector */
p {
colour: blue;
}
/* Class selector */
.highlight {
background-color: yellow;
}
/* ID selector */
#logo {
width: 200px;
}
CSS Box Model:
➔ The box model represents the layout and sizing of HTML elements.
➔ It consists of content, padding, border, and margin.
Example:
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
CSS Colors:
Colours can be specified using predefined colour names, hexadecimal codes, RGB values, or HSL
values.
Reviews