Posts

Showing posts from November, 2023

Day 24: Unit 1, 2

Image
 cm inch mm px pc pt em ch rem vw vh  % calc() When specifying CSS property values, you can conduct computations using the calc() CSS function  Anywhere a "length," "frequency," "angle," "time," "percent," "number," or "integer" is permitted, it can be used.  Operations like addition, subtraction, multiplication and division can also be performed inside the calc() function. Example : width: calc(180% - 20px); width: calc(5em * 2); z-index : calc(5/2)     Example : width: calc(100% - 200px);  The above example will calculate the width mentioned inside calc() function and generate suitable width after performing calculation. It will calculate 100% width of the element, then subtract 200px from it, giving us the final width.       Output :           Code :   <! DOCTYPE   html > < html > < head >      < style >          body...
Post a Comment
Read more

Day 23: Pseudo Elements

Image
  Pseudo Elements : Using pseudo-element, we can style certain areas of any element It can be utilized, for instance, to: For styling initial letter of any element Add content either before or after an element's content.     Syntax : selectorName::pseudo-elementName {   property: value; }    The ::before and ::after Pseudo-element :  To add content after the content of an element, use the ::after pseudo-element. To add content before the content of an element, use the ::before pseudo-element.   Example : Code :   <! DOCTYPE   html > < html > < head >      < style >          p::before  { content :  "BEFORE" ;}          p::after  { content :  "AFTER" ;}      </ style > </ head > < body >      < p >  paragraph 1  </ p ...
Post a Comment
Read more

Day 22: flexbox

Image
 flex-diection: flex-wrap: wrap; justify-content: flex-start; Flexbox property : Inline-flex :   To make a flex container as an inline-level flex element, use the following syntax :  container  {  display: inline-flex; } Using inline-flex, an element is displayed on the same line as the others. Since it follows the height and width of the line of which it is a part, specifying any height and width parameters will be useless, whereas display:flex, takes up the entire available width. Example :     1. Using display:inline-flex (takes up limited width) 2. Using display: flex (takes up entire available width) Other flex properties to explore : Flex-direction  : Defines direction of flex items present inside the flex container. Values : row row-reverse column column-reverse Example : Flex-direction : column-reverse ;  gives the following output : Code :      <! DOCTYPE   html >      < html >...
Post a Comment
Read more

Day 21: Grids 3, 4.

Image
  .item1 {   grid-row-start: 1;   grid-row-end: 3; } </style> </head> <body> <h1>Grid Lines</h1> <div class="grid-container">   <div class="item1">1</div>   <div class="item2">2</div>   <div class="item3">3</div>     <div class="item4">4</div>   <div class="item5">5</div>   <div class="item6">6</div>   <div class="item7">7</div>   <div class="item8">8</div>   </div> ----------------------------------------------------------------------------------------------------------------------------- 1. CSS grid-template-columns Property : By clicking or hovering over the "grid" button on the grid container element in Inspect element, it is simple to visualize grid configurations. The grid layout is now simple to picture. The number (and widths) of columns in a g...
Post a Comment
Read more