Scribd
Upload
16 views3 pages

Properties

Uploaded by

Law Name
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 views3 pages

Properties

Uploaded by

Law Name
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
You are on page 1/ 3

Box Model Properties

1. margin: Defines the space outside the border of an element.


2. padding: Defines the space between the border and the content of an element.
3. border: Defines the border of an element. Can be customized with border-width,
border-style, and border-color.
4. width: Sets the width of an element.
5. height: Sets the height of an element.
6. max-width: Sets the maximum width an element can have.
7. min-width: Sets the minimum width an element can have.
8. max-height: Sets the maximum height an element can have.
9. min-height: Sets the minimum height an element can have.
10.box-sizing: Determines how the width and height of an element are calculated (either
including or excluding padding and border).

Flexbox Properties (display: flex)


1. display: When set to flex, this turns an element into a flex container, enabling flexbox
layout for its children.
2. flex-direction: Defines the direction of the flex items (row, row-reverse, column,
column-reverse).
3. justify-content: Aligns flex items along the main axis (flex-start, flex-end,
center, space-between, space-around, space-evenly).
4. align-items: Aligns flex items along the cross axis (flex-start, flex-end, center,
stretch, baseline).
5. flex-wrap: Controls whether the flex items should wrap or not (nowrap, wrap, wrap-
reverse).
6. align-content: Aligns rows of flex items when there's space on the cross axis (flex-
start, flex-end, center, space-between, space-around, stretch).
7. flex-grow: Specifies how much a flex item should grow relative to the rest.
8. flex-shrink: Specifies how much a flex item should shrink relative to the rest.
9. flex-basis: Defines the initial size of a flex item before it's adjusted by flex-grow or
flex-shrink.
10.order: Controls the order of flex items in the container.
11.align-self: Overrides align-items for individual flex items (auto, flex-start,
flex-end, center, baseline, stretch).

Positioning Properties
1. position: Defines the positioning method of an element (static, relative,
absolute, fixed, sticky).
2. top, right, bottom, left: Sets the offset of a positioned element.
3. z-index: Controls the stack order of positioned elements.

Typography Properties
1. font-family: Specifies the font for text.
2. font-size: Sets the size of the text.
3. font-weight: Sets the thickness of the text (normal, bold, bolder, lighter, or
numeric values like 100, 400, 700).
4. font-style: Defines the style of the text (normal, italic, oblique).
5. line-height: Sets the height of a line of text.
6. text-align: Aligns text inside an element (left, right, center, justify).
7. text-decoration: Adds decoration to text (none, underline, overline, line-
through).
8. color: Sets the color of the text.
9. letter-spacing: Adjusts the space between characters.
10.text-transform: Controls the capitalization of text (uppercase, lowercase,
capitalize).

Background Properties
1. background-color: Sets the background color of an element.
2. background-image: Sets an image as the background.
3. background-size: Defines the size of the background image (cover, contain, or
specific values).
4. background-repeat: Controls the repetition of a background image (repeat, no-
repeat, repeat-x, repeat-y).
5. background-position: Sets the starting position of a background image.
6. background-attachment: Determines whether the background image is fixed or scrolls
with the page (scroll, fixed, local).

Color and Appearance Properties


1. opacity: Sets the transparency level of an element.
2. box-shadow: Adds shadow effects around an element.
3. border-radius: Rounds the corners of an element's border.
4. border-color: Sets the color of the border.
5. border-style: Specifies the style of the border (solid, dashed, dotted, none).

List Properties
1. list-style: Defines the style of list items (none, disc, circle, square, etc.).
2. list-style-type: Specifies the type of bullet point in a list.
3. list-style-position: Defines the position of the list item markers (inside,
outside).

Cursor and Pointer Properties


1. cursor: Specifies the type of cursor when hovering over an element (e.g., pointer,
default, text, move).

Transform and Animation Properties


1. transform: Applies transformations like rotate, scale, translate, skew.
2. transition: Adds transition effects between property changes.
3. animation: Applies animation to an element over time.

Visibility Properties
1. visibility: Controls the visibility of an element (visible, hidden).
2. overflow: Specifies how to handle overflow content (visible, hidden, scroll, auto).
3. clip-path: Creates a clipping region that determines which part of an element is visible.

You might also like