CSS Code

Intro to CSS

☰ open

CSS is used to format and style your HTML elements. You can style all of a particular element or you can create a class.

CSS Classes are a way to format only specific instances of an element. For example, if your page has some paragraphs with a blue background and some paragraphs with a yellow background, you can have one CSS class that makes the background blue and another CSS class that makes the background yellow.

CSS Files are saved as fileName.css

Example Paragraph Class


          p.blue {
            background-color: blue;
          }
        
      

p.blue - The 'p' means this is a class that only applies to paragraphs. blue is the name of the class
{} - All the styling of the glass is written inside these brackets.
formating - All blue class <p> elements will have a blue background.
; - Each line ends with a semi-colon.

HTML tag for blue class paragraphs:

 <p class = 'blue'>This is a paragraph.</p>
        

Example all paragraphs


          p {
            background-color: blue;
          }
        
      

p - This styling is for every paragraph element. blue is the name of the class
{} - All the styling of the glass is written inside these brackets.
formating - All blue class <p> elements will have a blue background.
; - Each line ends with a semi-colon.


Class for Any Element

You do not have to specify the element. You can create a CSS class that you can apply to any elements


       .blue {
         background-color: blue;
       }
     
   

blue - The class name is blue. It can be used on any element.
{} - All the styling of the glass is written inside these brackets.
formating - All blue class elements will have a blue background.
; - Each line ends with a semi-colon.

HTML tag for blue class:


       <span class = 'blue'>This is a span.</span>
       <div class = 'blue'>This is a div.</div>
       <p class = 'blue'>This is a paragraph.</p>
     

Customization

CSS is used to customize your web pages. When it comes to displaying content, if you can think of it you can probably do it with CSS.

Quick Copy Boxes