About
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript
Font
There are many properties related to the font, such as the face, weight, style, etc. These properties allow you to change the style or complete look of your text.
Font-Family
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;Font-Style
font-style: italic;Font-Variant
font-variant: small-caps;Font-Weight
font-weight: bold;Font-Size
font-size: larger;Font
font: style variant weight size family;Text
CSS Text is a module of CSS that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation.
Text-Align
text-align: justify;Letter-Spacing
letter-spacing: .15em;Text-Decoration
text-decoration: underline;Word-Spacing
word-spacing: 0.25em;Text-Transform
text-transform: uppercase;Text-Indent
text-indent: 0.5cm;Line-Height
line-height: normal;Background
The CSS background property defines the initial position of the background-image for an element.
Background-Image
background-image: url("Path");Background-Position
background-position: right top;Background-Size
background-size: cover;Background-Repeat
background-repeat: no-repeat;Background-Attachment
background-attachment: scroll;Background-Color
background-color: fuchsia;Background
background: color image repeat attachment position;Border
The border shorthand CSS property sets an element’s border. It sets the values of border-width , border-style , and border-color .
Border-Width
border-width: 5px;Border-Style
border-style: solid;Border-Color
border-color: aqua;Border-Radius
border-radius: 15px;Border
border: width style color;Box Model
CSS Box Model is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.
Float
float: none;Clear
clear: both;Display
display: block;Height
height: fit-content;Width
width: auto;Margin
margin: top right bottom left;Padding
padding: top right bottom left;Overflow
overflow: hidden;Visibility
visibility: visible;Colors
With the help of the color property, one can give color to text, shape, or any other object.
Color
color: cornsilk;Opacity
opacity: 4;Template Layout
Specifies the visual look of the content inside a template
Box-Align
box-align: start;Box-Direction
box-direction: normal;Box-Flex
box-flex: normal;Box-Flex-Group
box-flex-group: 2;Box-Orient
box-orient: inline;Box-Pack
box-pack: justify;Box-Sizing
box-sizing: margin-box;max-width
max-width: 800px;min-width
min-width: 500px;max-height
max-height: 100px;min-height
min-height: 80px;Table
The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.
Border-Collapse
border-collapse: separate;Empty-Cells
empty-cells: show;Border-Spacing
border-spacing: 2px;Table-Layout
table-layout: auto;Caption-Side
caption-side: bottom;Columns
The columns CSS shorthand property sets the number of columns to use when drawing an element’s contents, as well as those columns’ widths.
Column-Count
column-count: 10;Column-Gap
column-gap: 5px;Column-rule-width
column-rule-width: medium;Column-rule-style
column-rule-style: dotted ;Column-rule-color
column-rule-color: black;Column-width
column-width: 10px;Column-span
column-span: all;List & Markers
List and marker properties are used to customize lists in the document.
List-style-type
list-style-type: square;List-style-position
list-style-position: 20px;List-style-image
list-style-image: url(image.gif);Marker-offset
marker-offset: auto;Animations
CSS animations is a proposed module for Cascading Style Sheets that allows the animation of HTML document elements using CSS.
Animation-name
animation-name: myanimation;Animation-duration
animation-duration: 10s;Animation-timing-function
animation-timing-function: ease;Animation-delay
animation-delay: 5ms;Animation-iteration-count
animation-iteration-count: 3;Animation-direction
animation-direction: normal;Animation-play-state
animation-play-state: running;Animation-fill-mode
animation-fill-mode: both;Transitions
The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).
Transition-property
transition-property: none;Transition-duration
transition-duration: 2s;Transition-timing-function
transition-timing-function: ease-in-out;Transition-delay
transition-delay: 20ms;CSS Flexbox
CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will “flex” to different sizes to fill the space. It makes responsive design easier.
Parent Properties (flex container)
display
display: flex;flex-direction
flex-direction: row | row-reverse | column | column-reverse;flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse;flex-flow
flex-flow: column wrap;justify-content
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;align-items
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;align-content
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;Child Properties (flex items)
order
order: 5; /* default is 0 */flex-grow
flex-grow: 4; /* default 0 */flex-shrink
flex-shrink: 3; /* default 1 */flex-basis
flex-basis: | auto; /* default auto */Copy
flex shorthand
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]Copy
align-self
align-self: auto | flex-start | flex-end | center | baseline | stretch;CSS Grid
CSS Grid is a two-dimensional grid system used to work on the layout of UI elements and segments of a webpage.
Parent Properties (Grid container)
display
display: grid | inline-grid;grid-template-columns
grid-template-columns: 12px 12px 12px;grid-template-rows
grid-template-rows: 8px auto 12px;grid-template
grid-template: none | <grid-template-rows> / <grid-template-columns>;column-gap
column-gap: <line-size>;row-gap
row-gap: <line-size>;grid-column-gap
grid-column-gap: <line-size>;grid-row-gap
grid-row-gap: <line-size>;gap shorthand
gap: <grid-row-gap> <grid-column-gap>;grid-gap shorthand
grid-gap: <grid-row-gap> <grid-column-gap>;justify-items
justify-items: start | end | center | stretch;align-items
align-items: start | end | center | stretch;place-items
place-items: center;justify-content
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;align-content
align-content: start | end | center | stretch | space-around | space-between | space-evenly;place-content
place-content: <align-content> / <justify-content> ;grid-auto-columns
grid-auto-columns: <track-size> ...;grid-auto-rows
grid-auto-rows: <track-size> ...;grid-auto-flow
grid-auto-flow: row | column | row dense | column dense;Child Properties (Grid items)
grid-column-start
grid-column-start: <number> | <name> | span <number> | span <name> | auto;grid-column-end
grid-column-end: <number> | <name> | span <number> | span <name> | auto;grid-row-start
grid-row-start: <number> | <name> | span <number> | span <name> | auto;grid-row-end
grid-row-end: <number> | <name> | span <number> | span <name> | auto;grid-column shorthand
grid-column: <start-line> / <end-line> | <start-line> / span <value>;grid-row shorthand
grid-row: <start-line> / <end-line> | <start-line> / span <value>;grid-area
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;justify-self
justify-self: start | end | center | stretch;Copy
align-self
align-self: start | end | center | stretch;Copy
place-self
place-self: center;
