DEV Community

Dhairya Shah
Dhairya Shah

Posted on

The Complete CSS Tags Reference - CSS Cheatsheet

#webdev #css #codenewbie #beginners

If you are using CSS for frontend web development, you may be interested in this article. The gist of the article is that you will be able to know all major CSS tags, their properties and their values.

Text

  • text-align 
 .container {
   text-align: justify;
}
Enter fullscreen mode Exit fullscreen mode

left - Aligns the text to the left
right - Aligns the text to the right
center - Centers the text
justify - Stretches the lines so that each line has equal width (like in newspapers)
initial - Sets this property to its default value.

  • text-decoration 
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

h4 {
  text-decoration: underline overline;
}
Enter fullscreen mode Exit fullscreen mode
  • text-transform 
.container {
  text-transform: uppercase | lowercase | capitalize;
}
Enter fullscreen mode Exit fullscreen mode

none - No capitalization
capitalize - Transforms the first character of each word to uppercase
uppercase - All characters transform to uppercase
lowercase - All characters transform to lowercase

  • text-indent 
.container{
  text-indent: 1cm;
}
Enter fullscreen mode Exit fullscreen mode
  • word-spacing 
 .container{
   word-spacing: 0.9em;
}
Enter fullscreen mode Exit fullscreen mode

Background Tags

  • background-image 
 .container{
   background-image: url("Path");
}
Enter fullscreen mode Exit fullscreen mode
  • background-position 
 .container{
   background-position: right | top | bottom | left;
}
Enter fullscreen mode Exit fullscreen mode
  • background-size 
 .container{
  background-size: cover;
}
Enter fullscreen mode Exit fullscreen mode

auto - Default value. The background image is displayed in its original size

length - Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units

percentage - Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"

cover - Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain Resize the background image to make sure the image is fully visible.

(Source of information of parameters provided by : W3Schools)

  • background-repeat The background-repeat property sets how the background image should be repeated. 
 .container{
   background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
}
Enter fullscreen mode Exit fullscreen mode
  • background-attachement The background-attachment property sets if an image scrolls with the the page, or fixed. 
 .container{
  background-attachment: scroll|fixed|local|initial|inherit;
}
Enter fullscreen mode Exit fullscreen mode
  • background-color 
 .container{
  background-color: white;
}
Enter fullscreen mode Exit fullscreen mode
  • background 
 .container{
   background: color image repeat attachment position;
}
Enter fullscreen mode Exit fullscreen mode

Border

  • border-width 
 .container{
  border-width: 30px;
}
Enter fullscreen mode Exit fullscreen mode
  • border-style 
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Enter fullscreen mode Exit fullscreen mode

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

  • border-color 
 .container {
    border-color: aqua;
}
Enter fullscreen mode Exit fullscreen mode
  • border-radius 
 .container{
   border-radius: 18px;
}
Enter fullscreen mode Exit fullscreen mode

Box model

  • float 
 .container {
    float: none;
}
Enter fullscreen mode Exit fullscreen mode
  • clear 
 .container {
    clear: both;
}
Enter fullscreen mode Exit fullscreen mode
  • display 
 .container {
    display: block | flex | inline;
}
Enter fullscreen mode Exit fullscreen mode
  • height 
 .container {
    height: fit-content;
}
Enter fullscreen mode Exit fullscreen mode
  • width 
 .container {
    width: auto;
}
Enter fullscreen mode Exit fullscreen mode
  • margin 
 .container {
    margin: top right bottom left;
}
Enter fullscreen mode Exit fullscreen mode
  • padding 
 .container {
    padding: top right bottom left;
}
Enter fullscreen mode Exit fullscreen mode
  • overflow 
 .container {
    overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode
  • visibility 
 .container {
    visibility: visible;
}
Enter fullscreen mode Exit fullscreen mode

Colors

  • color 
 .container{
   color: black;
}
Enter fullscreen mode Exit fullscreen mode
  • opacity 
 .container{
   opacity: 2;
}
Enter fullscreen mode Exit fullscreen mode

Layout

  • box-align 
  .container{
    box-align: start;
}
Enter fullscreen mode Exit fullscreen mode
  • box-direction 
  .container{
    box-direction: normal;
}
Enter fullscreen mode Exit fullscreen mode
  • box-flex 
  .container{
    box-flex: normal;
}
Enter fullscreen mode Exit fullscreen mode
  • box-flex-group 
  .container{
    box-flex-group: 3;
}
Enter fullscreen mode Exit fullscreen mode
  • box-orient 
  .container{
    box-orient: inline;
}
Enter fullscreen mode Exit fullscreen mode
  • box-pack 
  .container{
    box-pack: initial;
}
Enter fullscreen mode Exit fullscreen mode
  • box-sizing 
  .container{
    box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode
  • max-width 
  .container{
    max-width: 900px;
}
Enter fullscreen mode Exit fullscreen mode
  • min-width 
  .container{
    min-width: 600px;
}
Enter fullscreen mode Exit fullscreen mode
  • max-height 
  .container{
    max-height: 100px;
}
Enter fullscreen mode Exit fullscreen mode
  • min-height 
  .container{
    min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

Animations

  • animation-name 
  .container{
    animation-name: helloworld;
}
Enter fullscreen mode Exit fullscreen mode
  • animation-duration 
 .container{
   animation-duration: 15s;
}
Enter fullscreen mode Exit fullscreen mode
  • animation-timing-function 
  .container{
    animation-timing-function: ease-in;
}
Enter fullscreen mode Exit fullscreen mode
  • animation-delay 
  .container{
   animation-delay: 25ms;
}
Enter fullscreen mode Exit fullscreen mode
  • animation-direction 
  .container{
   animation-direction: normal;
}
Enter fullscreen mode Exit fullscreen mode
  • animation-iteration-count

animation-iteration-count property defines the number of times an animation should be played.

 .container{
   animation-iteration-count: 5;
}
Enter fullscreen mode Exit fullscreen mode
  • animation-play-state 
   .container{
     animation-play-state : running;
}
Enter fullscreen mode Exit fullscreen mode
  • animation-fill-mode 
 .container{
   animation-fill-mode : forwards;
}
Enter fullscreen mode Exit fullscreen mode

Transition

  • transition-property 
  .container{
    transition-property: none;
}
Enter fullscreen mode Exit fullscreen mode
  • transition-duration 
   .container{
     transition-duration: 3s;
}
Enter fullscreen mode Exit fullscreen mode
  • transition-delay 
 .container{
    transition-delay: 30ms;
}
Enter fullscreen mode Exit fullscreen mode

List

  • list-style-type 
  .container{
   list-style-type: none
}
Enter fullscreen mode Exit fullscreen mode
  • list-style-position 
  .container{
    list-style-position: 25px;
}
Enter fullscreen mode Exit fullscreen mode
  • list-style-image 
  .container{
   list-style-image: url("");
}
Enter fullscreen mode Exit fullscreen mode

Flex

  • order 
   .container{
     order: 4;
}
Enter fullscreen mode Exit fullscreen mode
  • flex-grow 
   .container{
    flex-grow: 4;
}
Enter fullscreen mode Exit fullscreen mode
  • flex-basis 
  .container{
    flex-basis: auto;
}
Enter fullscreen mode Exit fullscreen mode
  • flex-shrink 
   .container{
     flex-shrink: 4;
}
Enter fullscreen mode Exit fullscreen mode

Grid

  • justify-content 
  .container{
    justify-content: start | end | center | stretch | space-around | space-between
}
Enter fullscreen mode Exit fullscreen mode
  • align-content 
   .container{
     align-content: start | end | center | stretch | space-around | space-between
}
Enter fullscreen mode Exit fullscreen mode
  • align-items 
   .container{
     align-items: start | end | center | stretch;
}
Enter fullscreen mode Exit fullscreen mode
  • justify-items 
   .container{
     justify-items: start | end | center | stretch;
}
Enter fullscreen mode Exit fullscreen mode
  • justify-self 
   .container{
     justify-self: start | end | center | stretch;
}
Enter fullscreen mode Exit fullscreen mode
  • align-self 
   .container{
     justify-self: start | end | center | stretch;
}
Enter fullscreen mode Exit fullscreen mode
  • place-self 
   .container{
     place-self: start | end | center | stretch;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
joeattardi profile image
Joe Attardi •

This is by no means a complete list!

Collapse
 
dhairyashah profile image
Dhairya Shah •

Yeah, its not full list but I have tried to cover up important tags 🙂

Read next

_prakhar_ profile image

How Does Machine Learns (Intro to Machine Learning)

Prakhar Khandelwal -

thomasbnt profile image

What's your favorite book on web development? 📖

Thomas Bnt -

ksolves profile image

Simplifying Real-Time Data Ingestion with Apache NiFi

Noel Campbell -

ravikishan profile image

Introducing NexaPHP: A Lightweight MVC PHP Framework

Ravi Kishan -