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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: larger;
font: style variant weight size family;
Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the document.
text-align: justify;
letter-spacing: .15em;
text-decoration: underline;
word-spacing: 0.25em;
text-transform: uppercase;
text-indent: 0.5cm;
line-height: normal;
As the name suggests, these properties are related to background, i.e., you can change the color, image, position, size, etc., of the document.
background-image: url("Path");
background-position: right top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: fuchsia;
background: color image repeat attachment position;
Border properties are used to change the style, radius, color, etc., of buttons or other items of the document.
border-width: 5px;
border-style: solid;
border-color: aqua;
border-radius: 15px;
border: width style color;
In laymen’s terms, the CSS box model is a container that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. It is used to create the design and layout of web pages.
float: none;
clear: both;
display: block;
height: fit-content;
width: auto;
margin: top right bottom left;
padding: top right bottom left;
overflow: hidden;
visibility: visible;
With the help of the color property, one can give color to text, shape, or any other object.
color: cornsilk;
opacity: 4;
Specifies the visual look of the content inside a template.
box-align: start;
box-direction: normal;
box-flex: normal;
box-flex-group: 2;
box-orient: inline;
box-pack: justify;
box-sizing: margin-box;
max-width: 800px;
min-width: 500px;
max-height: 100px;
min-height: 80px;
Table properties are used to give style to the tables in the document. You can change many things like border spacing, table layout, caption, etc.
border-collapse: separate;
empty-cells: show;
border-spacing: 2px;
table-layout: auto;
caption-side: bottom;
These properties are used explicitly with columns of the tables, and they are used to give the table an incredible look.
column-count: 10;
column-gap: 5px;
column-rule-width: medium;
column-rule-style: dotted;
column-rule-color: black;
column-width: 10px;
column-span: all;
List and marker properties are used to customize lists in the document.
list-style-type: square;
list-style-position: 20px;
list-style-image: url(image.gif);
marker-offset: auto;
CSS animations allow one to animate transitions or other media files on the web page.
animation-name: myanimation;
animation-duration: 10s;
animation-timing-function: ease;
animation-delay: 5ms;
animation-iteration-count: 3;
animation-direction: normal;
animation-play-state: running;
animation-fill-mode: both;
Transitions let you define the transition between two states of an element.
transition-property: none;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 20ms;
Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will “flex” to different sizes to fill the space. And overall, it makes the responsive design more manageable.
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: column wrap;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
order: 5; /* default is 0 */
flex-grow: 4; /* default 0 */
flex-shrink: 3; /* default 1 */
flex-basis: | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design layouts more easily and consistently across browsers.
display: grid | inline-grid;
grid-template-columns: 12px 12px 12px;
grid-template-rows: 8px auto 12px;
grid-template: none | <grid-template-rows> / <grid-template-columns>;
column-gap: <line-size>;
row-gap: <line-size>;
grid-column-gap: <line-size>;
grid-row-gap: <line-size>;
gap: <grid-row-gap> <grid-column-gap>;
grid-gap: <grid-row-gap> <grid-column-gap>;
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: center;
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <align-content> / <justify-content>;
grid-auto-columns: <track-size> ...;
grid-auto-rows: <track-size>
grid-auto-flow: row | column | row dense | column dense;
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: center;