DEV Community

Vidya
Vidya

Posted on

Important definition in CSS

#programming #css #beginners #web

Block-level Elements
These elements start on a new line. They take the full width of the page(left to right).

   example: <div>,<p>,<h1>
        <p> This is block element</p>
Enter fullscreen mode Exit fullscreen mode

Inline Elements
These elements do not start on a new line. They only take space needed for their content. you cannot set width or height directly.

   example: <span>,<a>,<strong>
         <span>This is inline</span>
Enter fullscreen mode Exit fullscreen mode

Margin
Space outside the border of an element. It creates empty space between that element and the surrounding elements.

example: if you give margin:20px; the element will push away 20px from all sides of its neighbors.

Padding
Padding is the space inside an element,between the content and the border. It pushes the content away from the border but stays inside the element's box.

example: div{
             padding:10px;
            }
Enter fullscreen mode Exit fullscreen mode

Flex
Flex (Flex box) is a CSS layout model. It is used to arrange elements inside a container. Elements can be placed in a row or a column. It automatically adjusts items to fit the available space. Flex makes alignment and spacing very simple. It helps create responsive designs without extra code. It makes layouts flexible, clean and easy to manage.

Head
It is Invisible-never displayed on the page. It contains metadata-page title, CSS links,scripts, etc.It's required in every HTML document.

     example: <head>
               <title>My Page</title>
              </head>
Enter fullscreen mode Exit fullscreen mode

Header
It is visible-displayed on the page. It contains logo,navigation menu, or title. 

     example: <header>
              <h1>website name</h1>
              <nav>menu</nav>
              </header>
Enter fullscreen mode Exit fullscreen mode

Border
The line around the content and padding of an element. 

     example: div{
              border:2px solid black;
              }
Enter fullscreen mode Exit fullscreen mode

Position
Static --> Default, normal flow
Relative --> Moves element relative to its original position
Absolute --> Placed at exact position on page or parent
Fixed --> Stays in the same place even when scrolling
Sticky --> Scrolls normally, but sticks at a position

   example: div{
               position:absolute;
               top:50px;
               left: 30px;
               }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)