Posts

Showing posts with the label css

Positions in css || relative || absolute || fixed || sticky || static positions

Image
Position in CSS:   The position property specifies the type of position for our element. There are 5 position styles in CSS: static relative fixed absolute sticky Elements are also then positioned using top, bottom left and right properties which you can use first you need to set a position that works differently according to position type. < body >     < div class = "normal" >        First div     </ div >     < div class = "normal" >        second div     </ div >     < div class = "static" >        div with static position     </ div > </ body > Common CSS: .normal {     width : 300px ;     height : 150px ;     background-color : azure ;     margin : 20px ;     border : 3px solid black ;     padding : 10px ; } Position : static; Html elements position static by default . Top, bottom,right,left properties show no effect on the element.It is positioned div according to the normal flow of the page. .stat

How to use radial gradient in css

 CSS radial gradient Radial gradients define the centre and the color transition outward from the center. The minimum color for making radial gradients is two. What is the syntax of radial gradient? The syntax of radial gradient is : radial-gradient(first color name,second color name,so on); What is an example of radial gradient? Example: Can we give a percentage in the radial gradient?  yes we can give a percentage of the color ingredient and the syntax of giving percentage user color is that: radial-gradient(first color name 80%,second color name20%,so on); Example: Can we remove the default shape of the radial gradient?  yes we can change the default shape of the radial gradient, the default is shape is elliptical Writing following syntax for changing the default shape. . radial-gradient(circle at center , color name ,second color name); .Example: We can also change the position of the circle writing position alo

How to use css margin

Image
  What is CSS margin? The gap between any elements of the web pages is known as margin.  there is 3 type of margins left margin right margin-top margin and bottom margin. why we use a margin on web pages?  All the website on the internet design by the CSS and any gap between any elements or defining the position of the element on the webpage we use Margin in the CSS. sometimes we use texts or images on the web pages that look beautiful at a certain position and the distance between the other elements. In the maximum time gap between the elements outer gaps. we are just with the help of margin as compared to position or padding in CSS. How we remove the default margin on the web page? we can remove the default margin by applying the following CSS code. *{ margin :0; } What are different ways of giving margin in CSS?  There are different ways of giving margin in CSS. Manually write:   P{ magin-left:30px; magin-right:30px; magin-bottom:30px; magin-top:30px; } Shortcut of giving margin va