9. CSS Syntax

CSS Syntax

p{
  font-size: 24px;
  color: blue;
}

here p is a selector and {.....} is a declaration block.


Syntax for Adding Inline Styles to HTML Elements

To add CSS styles, HTML provides us with an attribute, called "style".
This is one way to add styles to HTML elements:
                      <elemstyle="property-name: value;"></elem>
For example,
       <p style="font-size: 24px; color: blue;"></p>


We can try following properties:

●Font Size
●Font Color
●Custom Font
●Background Color
●Box Model
●Margin-xy
●Padding-xy
●Font Weight
●Border
●Border Radius
●Shadows


Introduction to class attribute

HTML provides us with an attribute called “class” for adding same styles to multiple HTML elements.
Syntax:- %lt;h2 class=”top-heading”>Main Heading 1</h2>
For example:-
       <h2class=”top-heading”>Main Heading 1</h2>
       <h2class=”top-heading”>Main Heading 2</h2>
       <h2class=”top-heading”>Main Heading 3</h2>
       <h2class=”top-heading”>Main Heading 4</h2>


Padding & Margin

   
Padding:-

       ●padding: 16px;
       ●padding-top, right, bottom, left.
       ●padding: 12px 16px 20px 24px;
       ●padding: 12px 24px 12px 24px; 
        padding: 12px 24px;
    
Margin:-

       ●margin: 16px;
       ●margin-top, right, bottom, left.
       ●margin: 12px 16px 20px 24px
       ●margin: 12px 24px 12px 24px; 
        margin: 12px 24px;