8
CSS Cheat Sheet for Beginners! ๐ฅ
source link: https://dev.to/cenacr007_harsh/css-cheat-sheet-for-beginners-3lhf
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
This Cheat Sheet was made by CodeWithHarry, I found this very useful for quick revision and personal reference so I am sharing this with you all, bookmark it and keep it if you find it useful.
๐ 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;
Enter fullscreen modeExit fullscreen mode
Font-Style
font-style: italic;
Enter fullscreen modeExit fullscreen mode
Font-Variant
font-variant: small-caps;
Enter fullscreen modeExit fullscreen mode
Font-Weight
font-weight: bold;
Enter fullscreen modeExit fullscreen mode
Font-Size
font-size: larger;
Enter fullscreen modeExit fullscreen mode
font: style variant weight size family;
Enter fullscreen modeExit fullscreen mode
๐ Text
Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the document.
Text-Align
text-align: justify;
Enter fullscreen modeExit fullscreen mode
Letter-Spacing
letter-spacing: .15em;
Enter fullscreen modeExit fullscreen mode
Text-Decoration
text-decoration: underline;
Enter fullscreen modeExit fullscreen mode
Word-Spacing
word-spacing: 0.25em;
Enter fullscreen modeExit fullscreen mode
Text-Transform
text-transform: uppercase;
Enter fullscreen modeExit fullscreen mode
Text-Indent
text-indent: 0.5cm;
Enter fullscreen modeExit fullscreen mode
Line-Height
line-height: normal;
Enter fullscreen modeExit fullscreen mode
๐ Background
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
background-image: url("Path");
Enter fullscreen modeExit fullscreen mode
Background-Position
background-position: right top;
Enter fullscreen modeExit fullscreen mode
Background-Size
background-size: cover;
Enter fullscreen modeExit fullscreen mode
Background-Repeat
background-repeat: no-repeat;
Enter fullscreen modeExit fullscreen mode
Background-Attachment
background-attachment: scroll;
Enter fullscreen modeExit fullscreen mode
Background-Color
background-color: fuchsia;
Enter fullscreen modeExit fullscreen mode
Background
background: color image repeat attachment position;
Enter fullscreen modeExit fullscreen mode
๐ Border
Border properties are used to change the style, radius, color, etc., of buttons or other items of the document.
Border-Width
border-width: 5px;
Enter fullscreen modeExit fullscreen mode
Border-Style
border-style: solid;
Enter fullscreen modeExit fullscreen mode
Border-Color
border-color: aqua;
Enter fullscreen modeExit fullscreen mode
Border-Radius
border-radius: 15px;
Enter fullscreen modeExit fullscreen mode
Border
border: width style color;
Enter fullscreen modeExit fullscreen mode
๐ Box Model
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
float: none;
Enter fullscreen modeExit fullscreen mode
Clear
clear: both;
Enter fullscreen modeExit fullscreen mode
Display
display: block;
Enter fullscreen modeExit fullscreen mode
Height
height: fit-content;
Enter fullscreen modeExit fullscreen mode
Width
width: auto;
Enter fullscreen modeExit fullscreen mode
Margin
margin: top right bottom left;
Enter fullscreen modeExit fullscreen mode
Padding
padding: top right bottom left;
Enter fullscreen modeExit fullscreen mode
Overflow
overflow: hidden;
Enter fullscreen modeExit fullscreen mode
Visibility
visibility: visible;
Enter fullscreen modeExit fullscreen mode
๐ Colors
With the help of the color property, one can give color to text, shape, or any other object.
Color
color: cornsilk;
Enter fullscreen modeExit fullscreen mode
Opacity
opacity: 4;
Enter fullscreen modeExit fullscreen mode
๐ Template Layout
Specifies the visual look of the content inside a template
Box-Align
box-align : start;
Enter fullscreen modeExit fullscreen mode
Box-Direction
box-direction : normal;
Enter fullscreen modeExit fullscreen mode
Box-Flex
box-flex : normal;
Enter fullscreen modeExit fullscreen mode
Box-Flex-Group
box-flex-group : 2;
Enter fullscreen modeExit fullscreen mode
Box-Orient
box-orient : inline;
Enter fullscreen modeExit fullscreen mode
Box-Pack
box-pack : justify;
Enter fullscreen modeExit fullscreen mode
Box-Sizing
box-sizing : margin-box;
Enter fullscreen modeExit fullscreen mode
max-width
max-width: 800px;
Enter fullscreen modeExit fullscreen mode
min-width
min-width: 500px;
Enter fullscreen modeExit fullscreen mode
max-height
max-height: 100px;
Enter fullscreen modeExit fullscreen mode
min-height
min-height: 80px;
Enter fullscreen modeExit fullscreen mode
๐ Table
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
border-collapse: separate;
Enter fullscreen modeExit fullscreen mode
Empty-Cells
empty-cells: show;
Enter fullscreen modeExit fullscreen mode
Border-Spacing
border-spacing: 2px;
Enter fullscreen modeExit fullscreen mode
Table-Layout
table-layout: auto;
Enter fullscreen modeExit fullscreen mode
Caption-Side
caption-side: bottom;
Enter fullscreen modeExit fullscreen mode
๐ Columns
These properties are used explicitly with columns of the tables, and they are used to give the table an incredible look.
Column-Count
column-count : 10;
Enter fullscreen modeExit fullscreen mode
Column-Gap
column-gap : 5px;
Enter fullscreen modeExit fullscreen mode
Column-rule-width
column-rule-width : medium;
Enter fullscreen modeExit fullscreen mode
Column-rule-style
column-rule-style : dotted ;
Enter fullscreen modeExit fullscreen mode
Column-rule-color
column-rule-color : black;
Enter fullscreen modeExit fullscreen mode
Column-width
column-width : 10px;
Enter fullscreen modeExit fullscreen mode
Column-span
column-span : all;
Enter fullscreen modeExit fullscreen mode
๐ List & Markers
List and marker properties are used to customize lists in the document.
List-style-type
list-style-type: square;
Enter fullscreen modeExit fullscreen mode
List-style-position
list-style-position : 20px;
Enter fullscreen modeExit fullscreen mode
List-style-image
list-style-image : url(๏ฟฝimage.gif๏ฟฝ);
Enter fullscreen modeExit fullscreen mode
Marker-offset
marker-offset : auto;
Enter fullscreen modeExit fullscreen mode
๐ Animations
CSS animations allow one to animate transitions or other media files on the web page.
Animation-name
animation-name : myanimation;
Enter fullscreen modeExit fullscreen mode
Animation-duration
animation-duration : 10s;
Enter fullscreen modeExit fullscreen mode
Animation-timing-function
animation-timing-function : ease;
Enter fullscreen modeExit fullscreen mode
Animation-delay
animation-delay : 5ms;
Enter fullscreen modeExit fullscreen mode
Animation-iteration-count
animation-iteration-count : 3;
Enter fullscreen modeExit fullscreen mode
Animation-direction
animation-direction : normal;
Enter fullscreen modeExit fullscreen mode
Animation-play-state
animation-play-state : running;
Enter fullscreen modeExit fullscreen mode
Animation-fill-mode
animation-fill-mode : both;
Enter fullscreen modeExit fullscreen mode
๐ Transitions
Transitions let you define the transition between two states of an element.
Transition-property
transition-property: none;
Enter fullscreen modeExit fullscreen mode
Transition-duration
transition-duration : 2s;
Enter fullscreen modeExit fullscreen mode
Transition-timing-function
transition-timing-function: ease-in-out;
Enter fullscreen modeExit fullscreen mode
Transition-delay
transition-delay : 20ms;
Enter fullscreen modeExit fullscreen mode
๐ CSS Flexbox
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.
๐Parent Properties (flex container)
display
display: flex;
Enter fullscreen modeExit fullscreen mode
flex-direction
flex-direction: row | row-reverse | column | column-reverse;
Enter fullscreen modeExit fullscreen mode
flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse;
Enter fullscreen modeExit fullscreen mode
flex-flow
flex-flow: column wrap;
Enter fullscreen modeExit fullscreen mode
justify-content
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
Enter fullscreen modeExit fullscreen mode
align-items
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
Enter fullscreen modeExit fullscreen mode
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;
Enter fullscreen modeExit fullscreen mode
๐Child Properties (flex items)
order
order: 5; /* default is 0 */
Enter fullscreen modeExit fullscreen mode
flex-grow
flex-grow: 4; /* default 0 */
Enter fullscreen modeExit fullscreen mode
flex-shrink
flex-shrink: 3; /* default 1 */
Enter fullscreen modeExit fullscreen mode
flex-basis
flex-basis: | auto; /* default auto */
Enter fullscreen modeExit fullscreen mode
flex shorthand
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Enter fullscreen modeExit fullscreen mode
align-self
align-self: auto | flex-start | flex-end | center | baseline | stretch;
Enter fullscreen modeExit fullscreen mode
๐ CSS Grid
Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design layouts more easily and consistently across browsers.
๐Parent Properties (Grid container)
display
display: grid | inline-grid;
Enter fullscreen modeExit fullscreen mode
grid-template-columns
grid-template-columns: 12px 12px 12px;
Enter fullscreen modeExit fullscreen mode
grid-template-rows
grid-template-rows: 8px auto 12px;
Enter fullscreen modeExit fullscreen mode
grid-template
grid-template: none | <grid-template-rows> / <grid-template-columns>;
Enter fullscreen modeExit fullscreen mode
column-gap
column-gap: <line-size>;
Enter fullscreen modeExit fullscreen mode
row-gap
row-gap: <line-size>;
Enter fullscreen modeExit fullscreen mode
grid-column-gap
grid-column-gap: <line-size>;
Enter fullscreen modeExit fullscreen mode
grid-row-gap
grid-row-gap: <line-size>;
Enter fullscreen modeExit fullscreen mode
gap shorthand
gap: <grid-row-gap> <grid-column-gap>;
Enter fullscreen modeExit fullscreen mode
grid-gap shorthand
grid-gap: <grid-row-gap> <grid-column-gap>;
Enter fullscreen modeExit fullscreen mode
justify-items
justify-items: start | end | center | stretch;
Enter fullscreen modeExit fullscreen mode
align-items
align-items: start | end | center | stretch;
Enter fullscreen modeExit fullscreen mode
place-items
place-items: center;
Enter fullscreen modeExit fullscreen mode
justify-content
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
Enter fullscreen modeExit fullscreen mode
align-content
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
Enter fullscreen modeExit fullscreen mode
place-content
place-content: <align-content> / <justify-content> ;
Enter fullscreen modeExit fullscreen mode
grid-auto-columns
grid-auto-columns: <track-size> ...;
Enter fullscreen modeExit fullscreen mode
grid-auto-rows
grid-auto-rows: <track-size> ...;
Enter fullscreen modeExit fullscreen mode
grid-auto-flow
grid-auto-flow: row | column | row dense | column dense;
Enter fullscreen modeExit fullscreen mode
๐Child Properties (Grid items)
grid-column-start
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
Enter fullscreen modeExit fullscreen mode
grid-column-end
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
Enter fullscreen modeExit fullscreen mode
grid-row-start
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
Enter fullscreen modeExit fullscreen mode
grid-row-end
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
Enter fullscreen modeExit fullscreen mode
grid-column shorthand
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
Enter fullscreen modeExit fullscreen mode
grid-row shorthand
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
Enter fullscreen modeExit fullscreen mode
grid-area
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
Enter fullscreen modeExit fullscreen mode
justify-self
justify-self: start | end | center | stretch;
Enter fullscreen modeExit fullscreen mode
align-self
align-self: start | end | center | stretch;
Enter fullscreen modeExit fullscreen mode
place-self
place-self: center;
Enter fullscreen modeExit fullscreen mode
That's all for today!
If you liked my content consider following me on Twitter.
Also if you got any questions feel free to ping me on Twitter.
Thank You! ๐
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK