CSS PROPERTIES

There are more than 100 different properties in CSS and a nearly infinite number of different
values. Each property defines what are the valid values.
SOME PROPERTIES ARE DEFINED NOW!
➢ BASIC SYNTAX

• Selector
• h1 {
• color: red;
• }

➢ INCLUDING STYLE

• Inline
• <style> tag
• External Stylesheet
• Writing CSS in a separate document & linking it with
HTML file

➢ BACKGROUND

• Background-color
• Background-image
• Background-repeat
• Background-attachment
• Background-position

The CSS background properties are used to add background effects for elements.

➢ BORDER
Used to set an element's border

• Dotted
• Dashed
• Solid
• Double
• Groove
• Ridge
• Inset
• Outset
• None
 • Hidden

The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border)
The CSS border properties allow you to specify the style, width, and color of an
element's border.

➢ PADDING
Padding is used to create space around an element's content, inside of any
defined borders.

• Padding-left
• Padding-right
• Padding-top
• Padding-bottom
➢ MARGIN
• Margin-right
• Margin-left
• Margin-top
• Margin-bottom
➢ TEXT PROPERTIES
• Text-align
• Text-decoration
• Font-weight
• Font-family
• Line-height
• Text-transform
➢ FONTS
1. Font style
2. Font size
➢ COLOR PROPERTY
Used to set the color of foreground
• color: red;
• color: pink;
• color: blue;
➢ BACKGROUND COLOR PROPERTY
Used to set the color of background
• background-color: red;
• background-color: pink;
• background-color: blue;
• background-color: green;
➢ COLOR SYSTEMS
 • RGB
• Hex (Hexadecimal)
➢ SELECTORS
• Universal Selector
• Element Selector
• Id Selector
• Class Selector
➢ UNITS IN CSS
Absolute
• pixels (px)
Relative
• %
• em
• rem
➢ BOX MODEL IN CSS
• Height
• Width
• Border
• Padding
• Margin
➢ HEIGHT
By default, it sets the content area height of the
element
div {
height: 50px;
}
➢ WIDTH
By default, it sets the content area width of the
element
div {
width: 50px;
}
➢ DISPLAY PROPERTY
• Inline - Takes only the space required by the
element. (no margin/ padding)
• Block - Takes full space available in width.
• Inline-block - Similar to inline but we can set
margin & padding.
• None - To remove element from document flow.
➢ VISIBILITY
But for display set to none, no space is reserved or
blocked for the When visibility is set to none, space for the element
is reserved element.
➢ PERCENTAGE (%)
It is often used to define a size as relative to an element's parent
object.
➢ POSITION
The position CSS property sets how an element is positioned in a
document.

• Static - default position (The top, right, bottom, left, and z-

index properties have no effect)
• Relative - element is relative to itself. (The top, right,
bottom, left, and z-index will work)
• Absolute - positioned relative to its closest positioned
ancestor. (removed from the flow)
• Fixed - positioned relative to browser. (removed from flow)
• Sticky - positioned based on user's scroll position
➢ Z-INDEX
It decides the stack level of elements.Overlapping elements
with a larger z-index cover those with a smaller one.
➢ FLEXBOX
Flexible Box Layout.It is a one-dimensional layout method for
arranging items in rows or columns.
➢ FLEXBOX DIRECTION
It sets how flex items are placed in the flex container, along which
axis and direction.

• Flex-direction : row; (default)

• Flex-direction : row-reverse;
• Flex-direction : column;
• Flex-direction : column-reverse;

➢ FLEX PROPERTIES
for Flex Container
• Justify-content : alignment along the main
axis.
• Flex-start / flex-end / centre / space-evenly /
 • Flex-wrap : nowrap / wrap / wrap-reverse
• Align-items : alignment along the cross axis.
• Align-content : alignment of space between &
around the content along cross-axis
➢ FLEX PROPERTIES
for Flex Item
• Align-self : alignment of individual along the
cross axis.
• Flex-grow : how much a flex item will grow
relative to the rest of the flex items if
• Space is available
• Flex-shrink : how much a flex item will shrink
relative to the rest of the flex items if
• Space is available
➢ MEDIA QUERIES
Help create a responsive website
@media (width : 600px) {
div {
background-color : red;
}
}
➢ TRANSITIONS
Transitions enable you to define the transition between two states of
an element to add some animation to elements

• Transition-property : property you want to

transition (font-size, width etc.)
• Transition-duration : 2s / 4ms ..
• Transition-timing-function : ease-in / ease-out /
linear / steps ..
• Transition-delay : 2s / 4ms.
➢ CSS TRANSFORM
• Used to apply 2D & 3D transformations to an
element
• Rotate
• Scale
• Translate
• Skew
➢ Animation
@keyframe myName {
from { font-size : 20px; }
to { font-size : 40px; }
}
To animate CSS elements
➢ ANIMATION PROPERTIES
• Animation-name
• Animation-duration
• Animation-timing-function
• Animation-delay
• Animation-iteration-count
• Animation-direction
➢ % in Animation
@keyframe myName {
0% { font-size : 20px; }
}

ALMOST THESE PROPERTIES ARE KNOWN …………