Scribd
Upload
16 views2 pages

Comprehensive Guide to CSS Elements

The document outlines the fundamental elements of CSS, including selectors, properties, units, values, box model, positioning, display types, flexbox, grid, typography, and transitions & animations. It provides a comprehensive overview of how each component contributes to web design and layout. Key concepts such as the box model and various display properties are emphasized for understanding CSS structure and behavior.

Uploaded by

Ziaul Hoque Mafi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views2 pages

Comprehensive Guide to CSS Elements

The document outlines the fundamental elements of CSS, including selectors, properties, units, values, box model, positioning, display types, flexbox, grid, typography, and transitions & animations. It provides a comprehensive overview of how each component contributes to web design and layout. Key concepts such as the box model and various display properties are emphasized for understanding CSS structure and behavior.

Uploaded by

Ziaul Hoque Mafi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

All Elements of CSS

Selectors

Universal Selector (*), Type Selector (element), Class Selector (.), ID Selector (#), Grouping Selector,

Attribute Selector, Pseudo-classes (:hover, :first-child), Pseudo-elements (::before, ::after)

Properties

Color, Background, Font, Text, Box Model (margin, border, padding, content), Display, Position, Flexbox,

Grid, Float, Clear, Overflow, Visibility, Z-index, Opacity, Transition, Transform, Animation, Media Queries

Units

px, em, rem, %, vw, vh, vmin, vmax, cm, mm, in, pt, pc

Values

Color values (hex, rgb, rgba, hsl, hsla), URL values, Keywords (auto, inherit, initial, unset)

Box Model

Content, Padding, Border, Margin; Understanding how each part affects layout and spacing.

Positioning

Static, Relative, Absolute, Fixed, Sticky

Display

None, Block, Inline, Inline-block, Flex, Grid, Table, Inline-table


All Elements of CSS

Flexbox

Container: display: flex, flex-direction, justify-content, align-items, flex-wrap; Item: flex-grow, flex-shrink,

flex-basis, align-self

Grid

display: grid, grid-template-columns, grid-template-rows, gap, grid-area, justify-items, align-items

Typography

font-family, font-size, font-weight, font-style, text-align, text-decoration, line-height, letter-spacing

Transitions & Animations

transition, transition-property, transition-duration, animation, @keyframes, animation-duration,

animation-iteration-count

You might also like