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 | normal | oblique;
font-variant: small-caps | normal;
font-weight: normal | bold | bolder | lighter | number;
font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length;
font: style variant weight size family;
Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the document.
text-align: left | right | center | justify;
letter-spacing: normal | length;
text-decoration: underline | none;
text-decoration-color: color;
text-decoration-line: none | underline | overline | line-through;
text-decoration-style: solid | double | dotted | dashed | wavy;
text-decoration-thickness: auto | from-font | length/percentage
word-spacing: normal | length;
text-transform: none | capitalize | uppercase | lowercase;
text-indent: length;
line-height: normal | number | length;
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: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
background-position: x% y%;
background-position: xpos ypos;
background-size: auto | percentage | length | cover | contain;
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
background-attachment: scroll | fixed | local;
background-color: color | transparent;
background: color | image | size | repeat | origin | clip | attachment | position;
Border properties are used to change the style, radius, color, etc., of buttons or other items of the document.
border-width: medium | thin | thick | length;
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-color: color | transparent;
border-radius: length | percentage;
example
border-radius: 10px 20px 30px 40px; /* top-left top-right bottom-right bottom-left */
border-radius: 10px 20px 30px; /* top-left top-right & bottom-left bottom-right */
border-radius: 10px 20px; /* top-left & bottom-right top-right & bottom-left */
border-radius: 10px; /* all four corners */
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 | left | right;
clear: none | left | right | both;
display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none;
height: auto | value | % | fit-content;
width: auto | value | % | fit-content;
margin: length | auto | top-right-bottom-left;
padding: length | auto | top-right-bottom-left;
overflow: visible | hidden | clip | scroll | auto;
visibility: visible | hidden | collapse;
With the help of the color property, one can give color to text, shape, or any other object
color: color name | hex code | color code;
opacity: number | 0.6;
When it comes to web design, CSS (Cascading Style Sheets) plays an indispensable role in enhancing the visual aesthetics of a website. Among its vast array of properties, the ones that help bring depth and focus to an element are the shadow and outline properties. Let’s delve into the magic of CSS shadows and outlines.
box-shadow is a popular CSS property that enables designers to add shadow effects around an element's frame. It can be used to give any element, be it a div, image, or button, a 3D feel or to emphasize on hover.
box-shadow: none | h-offset v-offset blur spread color | inset;
example
.div-element {
box-shadow: 5px 5px 15px 5px #888888;
<!-- h-offset v-offset blur spread color -->
}
text-shadow is utilized to give shadows specifically to the text.
text-shadow: h-offset v-offset blur color | none;
example
.text-element {
text-shadow: 2px 2px 4px #888888;
}
It's commonly used for accessibility purposes, like highlighting focused elements.
outline: width style color;
example
.button-element:focus {
outline: 2px solid blue;
}
Specifies the visual look of the content inside a template
box-align: start | center | end | baseline | stretch ;
box-direction: normal | reverse;
box-flex: normal;
box-flex-group: 2;
box-orient: inline | block | horizontal | vertical | inline-axis | block-axis;
box-pack: start | center | end | justify;
box-sizing: border-box | content-box;
max-width: none | length;
min-width: none | length;
max-height: none | length;
min-height: none | length;
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 | collapse;
empty-cells: show | hide;
border-spacing: langth;
table-layout: auto | fixed;
caption-side: top | bottom;
These properties are used explicitly with columns of the tables, and they are used to give the table an incredible look.
column-count: number | auto;
column-count: 12px;
column-gap: normal | length;
column-gap: 10px;
column-rule-width: medium | thin | thick | length;
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ;
column-rule-color: color;
column-width: auto | length;
column-span: all | none;
List and marker properties are used to customize lists in the document.
list-style-type: none | disc | square | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-greek | upper-latin | upper-roman;
list-style-position: 20px | inside | outside;
list-style-image: url(image.gif);
list-style-image: none;
marker-offset: auto | length;
CSS animations allow one to animate transitions or other media files on the web page.
animation-name: keyframename | none;
animation-name: myanimation;
<!-- Multiple animations -->
animation-name: test1, animation4;
animation-duration: time;
animation-duration: 0.2s;
animation-duration: 10s;
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n);
animation-delay: time;
animation-delay: 5ms;
animation-iteration-count: number;
animation-iteration-count: 3;
animation-direction: normal | reverse | alternate | alternate-reverse;
animation-play-state: paused | running;
animation-fill-mode: none | forwards | backwards | both;
animation: duration | timing-function | delay | iteration-count | direction | fill-mode;
animation: slideAnime 2s ease-in-out 3s 1, extraAnime 3s ease-in-out 3s 1;
@keyframes slideAnime {
from{
background-color: red;
}
to{
background-color: yellow;
}
}
@keyframes extraAnime {
0%{
transform: rotate(100deg);
}
20%{
transform: rotate(200deg);
}
50%{
transform: rotate(220deg);
}
80%{
transform: rotate(300deg);
}
100%{
transform: rotate(310deg);
}
}
Transitions let you define the transition between two states of an element.
transition-property: none | all | property;
transition-property: margin-right;
transition-duration: time;
transition-duration: 2s;
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n);
transition-delay: time;
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;
Suggested for multiline flex changes
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-column: <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;