DEV Community

Vidya
Vidya

Posted on

CSS

#css #beginners #frontend #webdesign

What is CSS?
CSS controls the appearance of your web pages- colors,layouts,fonts,spacing, and more!

When Do We Use CSS?
Change text color or size.
Add backgrounds or borders.
Create columns and layouts.
Make your site look good on phones.
Add animations and effects.
Make your website professional.

Why DO We Need CSS?

      Without CSS:
     <h1>welcome</h1>
     <p>this is my website</p> (Basic black text on white background)

      With CSS:

   <h1 style="color:blue; text-align:center;" >welcome</h1>
   <p style="font-size:18px;color:gray;">this is my website</p>          
     (styled,colorful,professional-looking content)
Enter fullscreen mode Exit fullscreen mode

How CSS Works: The Basics

Method 1: inline CSS

      <p style="color:red; font-size:20px;">This text is red and large!</p>

Method 2: Internal CSS (Inside HTML File)

     <head>
       <style>
          p{
            color:blue;
            font-size:16px;
           }
           h1{
            color:green
             }
       </style>
    </head>
Enter fullscreen mode Exit fullscreen mode

Method 3:External CSS

style.css:

    body{
        background-color:blue;
        font-family:Arial;
        }
     h1{
       color:navy;
       }
    p{
       color:gray;
       line-height:1.5;
     }
Enter fullscreen mode Exit fullscreen mode

Text Styling - Makes text beautiful-->color,font-size,font-family,text-align
Box Model - Controls spacing & borders --> margin,padding,border,width/height
Layout - Arrange elements on page --> display:flex/grid, position
Positioning - Precise element placement --> position:relative/absolute/fixed

Top comments (0)