Scribd
Upload
47 views4 pages

CSS Guide

The document outlines key concepts and properties of CSS, categorized into sections such as Layout & Box Model, Typography, Background & Colors, and more. Each section details specific properties and their functionalities, including flexbox and grid for responsive layouts, transitions and animations, and pseudo-classes for interactivity. Additionally, it covers media queries for responsive design, ensuring adaptability across different screen sizes.

Uploaded by

nemaxo5977
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
47 views4 pages

CSS Guide

The document outlines key concepts and properties of CSS, categorized into sections such as Layout & Box Model, Typography, Background & Colors, and more. Each section details specific properties and their functionalities, including flexbox and grid for responsive layouts, transitions and animations, and pseudo-classes for interactivity. Additionally, it covers media queries for responsive design, ensuring adaptability across different screen sizes.

Uploaded by

nemaxo5977
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

CSS .

1. Layout & Box Model

●​ width, height, max-width, max-height, min-width, min-height


●​ margin, padding
●​ border, border-width, border-style, border-color, border-radius
●​ box-shadow
●​ display (block, inline, flex, grid, etc.)
●​ position (static, relative, absolute, fixed, sticky)
●​ top, bottom, left, right
●​ z-index
●​ overflow

2. Typography (Text & Fonts)

●​ color
●​ font-family
●​ font-size
●​ font-style (normal, italic, oblique)
●​ font-weight (bold, lighter, etc.)
●​ letter-spacing
●​ line-height
●​ text-align (left, right, center, justify)
●​ text-decoration (underline, overline, none)
●​ text-transform (uppercase, lowercase, capitalize)
●​ white-space
●​ word-spacing

3. Background & Colors

●​ background-color
●​ background-image
●​ background-position
●​ background-size
●​ background-repeat
●​ background-attachment
●​ opacity
●​ box-shadow

4. Flexbox (Responsive Layouts)

●​ display: flex
●​ flex-direction (row, column, row-reverse, column-reverse)
●​ justify-content (flex-start, center, space-between, space-around)
●​ align-items (stretch, center, flex-start, flex-end)
●​ align-self
●​ flex-wrap (wrap, nowrap)
●​ flex-grow, flex-shrink, flex-basis
●​ gap

5. Grid (Advanced Layouts)

●​ display: grid
●​ grid-template-columns, grid-template-rows
●​ grid-column, grid-row
●​ grid-gap
●​ align-items, justify-items, place-items
●​ grid-template-areas

6. Borders & Outlines

●​ border
●​ border-radius
●​ border-width, border-style, border-color
●​ outline, outline-offset

7. Transitions & Animations

●​ transition
●​ transition-property, transition-duration,
transition-timing-function, transition-delay
●​ animation
●​ animation-name, animation-duration, animation-timing-function,
animation-delay, animation-iteration-count, animation-direction
●​ keyframes

8. Transformations

●​ transform
●​ rotate(), scale(), translate(), skew()

9. Visibility & Interaction

●​ visibility (visible, hidden)


●​ display (none, block, flex, etc.)
●​ cursor
●​ pointer-events

10. Pseudo-classes & Pseudo-elements

●​ :hover
●​ :focus
●​ :nth-child(n)
●​ :first-child, :last-child
●​ ::before, ::after

11. Media Queries & Responsive Design

●​ @media (max-width, min-width)


●​ vh, vw, em, rem, %
●​ object-fit
●​ aspect-ratio

You might also like