CSS Basics

CSS, stands for Cascading Style Sheets. It is used to style websites written in .html files.

Comment

            
              /*This is a comment*/
            
        

Styling HTML using CSS selectors

            
              p{
                color: blue;
              }
              .className{
                color: red;
              }
              #idName{
                color: green;
              }
              h1{
                color: aquamarine;
              }
              /*If an element is in some other element*/
              #idName p{
                color: blue;
              }
              .className h1{
                color: red;
              }
              /*If an element is specifically in some other element*/
              #idName > p{
                color: blue;
              }
              .className > h1{
                color: red;
              }
            
        

Text Edit

            
              p{
                /*changes Text color form current Text color*/
                color: blue;
                /*changes Text color form current Text color in hex code*/
                color: #ffffff;
                /*changes font size in pixels*/
                font-size: 20px;
                /*changes font size in em*/
                font-size: 20em;
                /*changes font size in rem*/
                font-size: 20rem;
                /*underlining text*/
                text-decoration: underline;
                text-decoration: line-through;
                /*changing the letter spacing in pixels*/
                letter-spacing: 2px;
                /*changing the font style to italic, bold...*/
                font-style: italic;
                font-style: bold;
                /*changing the line height in pixels*/
                line-height: 16px;
                /*changing the text to all uppercase, lowercase, capitalized...*/
                text-transform: uppercase;
                text-transform: lowercase;
                text-transform: capitalized;
                /*add word spacing*/
                word-spacing: 10px;
              }