CSS

• A language used to style and layout web

pages, making them look good and organized.
 Selector
• Targets HTML elements to apply styles to.
 Property
• A characteristic of an element you want to
style, like color, font, or size.
 Value
• The setting for a property (like 'red' for color
or '16px' for font size).
 Rule
• A combination of a selector, property, and
value (like 'color: red;').
 Class Selector (.)
• Selects elements with a specific class to apply
styles.
 ID Selector (#)
• Selects an element with a specific ID (unique)
to apply styles.
 Universal Selector (*)
• Selects all elements on the page.
 Element Selector
• Selects all elements of a specific type (like 'div'
or 'p').
 Descendant Selector ( )
• Selects elements that are inside other
elements.
 Child Selector (>)
• Selects direct child elements of an element.
 Adjacent Sibling Selector (+)
• Selects the element immediately following
another element.
 General Sibling Selector (~)
• Selects all elements that are siblings to a
specific element.
 Attribute Selector ([ ])
• Selects elements based on their attributes
(like 'input[type="text"]').
 Pseudo-class (:)
• Styles elements in a certain state, like ':hover'
when you move the mouse over an element.
 Pseudo-element (::)
• Targets specific parts of an element (like
'::before' to add content before an element).
 Color
• Defines the color of text, backgrounds,
borders, etc. (e.g., 'color: red;').
 Background
• Styles the background of an element, such as
a color, image, or gradient.
 Border
• Defines a border around an element (with
width, style, and color).
 Margin
• The space outside an element, separating it
from others.
 Padding
• The space inside an element, between the
content and its border.
 Width
• Sets the width of an element.
 Height
• Sets the height of an element.
 Font-size
• Defines the size of the text inside an element.
 Font-family
• Specifies the font type to be used (e.g., Arial,
Times New Roman).
 Font-weight
• Sets the thickness of the text (e.g., 'bold' or
'lighter').
 Font-style
• Specifies the style of the text, such as 'italic' or
'normal'.
 Text-align
• Defines the alignment of text inside an
element (e.g., 'left', 'center', 'right').
 Text-decoration
• Adds decorations to text, such as 'underline',
'line-through', or 'none'.
 Text-transform
• Controls the capitalization of text (e.g.,
'uppercase', 'lowercase').
 Letter-spacing
• Adjusts the space between characters in a
text.
 Line-height
• Controls the vertical space between lines of
text.
 Display
• Defines how an element is displayed (e.g.,
'block', 'inline', 'none').
 Visibility
• Controls whether an element is visible or
hidden, without affecting its layout.
 Position
• Determines how an element is positioned on
the page ('static', 'relative', 'absolute', 'fixed',
or 'sticky').
 Top
• Defines the top position of an element when
'position' is used.
 Right
• Defines the right position of an element when
'position' is used.
 Bottom
• Defines the bottom position of an element
when 'position' is used.
 Left
• Defines the left position of an element when
'position' is used.
 Z-index
• Controls the stack order of elements when
they overlap.
 Overflow
• Controls what happens when content
overflows an element’s box (e.g., 'visible',
'hidden', 'scroll', or 'auto').
 Box-sizing
• Determines how the total width and height of
an element are calculated (whether padding
and borders are included).
 Float
• Positions an element to the left or right of its
container, allowing other content to flow
around it.
 Clear
• Used to prevent elements from floating next
to an element.
 Flexbox
• A layout model that allows elements to be
arranged in rows or columns, distributing
space evenly.
 Grid
• A two-dimensional layout system for
positioning elements in rows and columns.
 Align-items
• Aligns elements along the cross-axis (vertical
for rows, horizontal for columns) in a flex
container.
 Align-self
• Allows individual flex items to align differently
from the other items.
 Justify-content
• Aligns items along the main axis in a flex
container (e.g., 'center', 'space-between').
 Flex-direction
• Specifies the direction of the flex container’s
items (e.g., 'row', 'column').
 Flex-wrap
• Determines whether the items in a flex
container should wrap to the next line when
necessary.
 Gap
• Specifies the space between items in a flex or
grid layout.
 Order
• Changes the order in which flex items appear
within a container.
 Align-content
• Aligns multiple rows of flex items within a flex
container.
 Grid-template-columns
• Defines the number and size of columns in a
grid layout.
 Grid-template-rows
• Defines the number and size of rows in a grid
layout.
 Grid-gap
• Defines the space between grid items in a grid
layout.
 Grid-column
• Specifies how many columns an element
should span in a grid layout.
 Grid-row
• Specifies how many rows an element should
span in a grid layout.
 Grid-template-areas
• Defines named areas for grid items, making it
easier to position them.
 Min-width
• Sets the minimum width an element can be.
 Max-width
• Sets the maximum width an element can be.
 Min-height
• Sets the minimum height an element can be.
 Max-height
• Sets the maximum height an element can be.
 Margin-top
• Specifies the margin space above an element.
 Margin-right
• Specifies the margin space to the right of an
element.
 Margin-bottom
• Specifies the margin space below an element.
 Margin-left
• Specifies the margin space to the left of an
element.
 Padding-top
• Specifies the padding space above the content
inside an element.
 Padding-right
• Specifies the padding space to the right of the
content inside an element.
 Padding-bottom
• Specifies the padding space below the content
inside an element.
 Padding-left
• Specifies the padding space to the left of the
content inside an element.
 Background-color
• Sets the background color of an element.
 Background-image
• Specifies an image as the background for an
element.
 Background-size
• Defines the size of the background image
(e.g., 'cover', 'contain').
 Background-position
• Determines where the background image is
positioned inside an element.
 Background-repeat
• Controls whether the background image is
repeated or not.
 Box-shadow
• Adds shadow effects around an element’s box.
 Text-shadow
• Adds shadow effects to text.
 Opacity
• Defines the transparency level of an element
(e.g., '0' for completely transparent, '1' for
fully visible).
 Transition
• Adds smooth effects when a property changes
(like hovering over a button).
 Animation
• Lets you create keyframes and apply
animations to elements.
 Keyframes
• Defines the intermediate steps in an
animation.
 Transform
• Applies a 2D or 3D transformation to an
element (e.g., 'rotate', 'scale').
 Translate
• Moves an element from its current position by
a specific amount.
 Rotate
• Rotates an element by a specified degree.
 Scale
• Changes the size of an element (e.g., making it
bigger or smaller).
 Skew
• Slants an element along its X or Y axis.
 Clip-path
• Defines a visible portion of an element by
clipping it into a shape (e.g., circle, polygon).
 Filter
• Applies visual effects to an element, like blur
or grayscale.
 Cursor
• Specifies the type of cursor to display when
the mouse hovers over an element.
 Resize
• Allows an element to be resizable by the user.
 Outline
• Adds a line around an element (like a border,
but outside the element).
 Object-fit
• Specifies how an image or video fits within its
container.
 Object-position
• Specifies the position of an image or video
inside its container.
 List-style-type
• Specifies the style of list markers (like bullets
or numbers).
 List-style-position
• Determines whether list markers appear
inside or outside the list item.
 Resize
• Allows resizing of an element (usually applied
to textareas or other input fields).
 User-select
• Controls whether the user can select text in an
element (e.g., 'none' disables text selection).
 Writing-mode
• Specifies the direction in which text is
displayed (e.g., left-to-right or top-to-bottom).