In this article, we will learn about the CSS linear-gradient, how gradient work, how to apply the linear gradient in the background image, how to change the flow of the gradient. The colour gradient Producing colour Transitions with vary continuously colour position. Linear gradient:  By default, the linear gradient is top to bottom flow. You can change the flow of gradient from bottom to top, right to left, left to right, right diagonal and left diagonal with simple changes in the CSS code. Example: .grad{ background-image:linear-gradient(green,yellow); } This is the example of the linear gradient Left to right flow of the gradient: The flow of gradient is also changed by writing the simple code. .grad{ background-image:linear-gradient(to left,green,yellow); } This is the example of the linear gradient   Right to left flow of the gradient: The flow of gradient is also changed by writing the simple code. .grad

Flexbox  In this article,we will discuss the flexbox in the CSS language. What is the flexbox? The flexbox is the layout module for the web pages using rows and column concepts.The items are set according to rows or columns of the flexbox. Why flexbox use in CSS? Basically, flexbox is made for designing the layout of a page very easily.The biggest problem is positioning the items on the page,but by using flexbox position the items become very easy . Following are the reasons of using flexbox layout: Positioning the items. Alignment of items. Dividing the page into different boxes. Get rid of float and positioning properties. Help in the responsive pages.   Before, we take an example: let's discuss the concept of flexbox. This divides the whole page into x-axis or y-axis and makes boxes according to the designer, also arrange items on the x-axis or y-axis. Example: flexbox 1 2 3

  CSS border width The css border width property gives the width to the four borders of the box .The width may be thin,thick,medium,or value(px,em,in,cm,pt,etc) Syntax: border-width:<border-top-width> <border-right-width> <border-bottom-width> <border-left-width> border-width:thin; border-width:thick; border-width:medium; Example of css border width: <style type="text/css"> p.thin{ border-style: dashed; border-width: thin; } p.thick{ border-style: dotted; border-width: thick; } p.px{ border-style: solid; border-width: 10px; } p.medium{ border-style: double; border-width: medium; } p.mix{ border-style: ridge; border-color: yellow; border-width: thick medium thin 10px; } </style> Output: This A thin border. This A thick border. This A medium border. This A 10px border. This A Mix border.

  CSS borders The CSS allows to style borders by using CSS border properties like color, style, width, etc of properties. CSS border style:   The border-style styles the border by using a different kind of borders . Following are the list of the borders kind,we can use in the css dotted =: give dotted border to the border dashed =: give dashed border to the border solid =: give Solid border to the border double =:give double border to the border groove =: give 3D groove border to the border. The effect depends on the border-color value ridge =: give 3D ridge border to the border. The effect depends on the border-color value inset =: give 3D inset border to the border. The effect depends on the border-color value outset =: give 3D outset border to the border. The effect depends on the border-color value none =:give no border to the border hidden =:give hidden border to the border Example of css border style: <style type="text/css"> p.dashed{ border-style:

  Pseudo classes In this article ,we will learn about the common pseudo classes which are used in the CSS language during designing the web development. :first-child() :last-child() :nth-child() :nth-last-child :nth-last-type-child :nth-of-type :only-child :only-of-type :last-of-type :first-of-type :empty :not() First-child() In the following example,selectors match all the first child of div section div.box1 p:first child{ color:blue; } <div class=”box1”> <p>programgrab1</p> <p>programgrab2</p> <div class=”box2”> <p>programgrab1</p> <p>programgrab2</p> </div></div> last-child() In the following example,selectors match all the last child<p> of div section div.box1 p:last child{ color:blue; } <div class=”box1”> <p>programgrab1</p> <p>programgrab2</p> <div class=”box2”> <p>programgrab1</p> <p>programgrab2</p> </div></div> nth-child() In the

  Likewise simple selectors in CSS, we can also combine more than one simple selector is called CSS combinators. There are four types of CSS combinators in the CSS. Descendant selector(space) Child selector(>) Adjacent sibling selectors(+) General sibling selectors(~) Descendant selectors(space) By name, the descendant selectors select all the descendant elements of the specific element. Actually, this is used in the nested elements. Example: div p{ Color: red; } Change the color of all <p> in the div section <div> <p>programgrab</p> <p>programgrab</p> </div> Child selectors(>) This selects all the child element of the specific element Example: div > p{ Color: red; } <div> <p>programgrab</p> <p>programgrab</p> <div class=”header”> <p>programgrab</p> </div> </div> Change the color of all children <p> in the div section and not the second div section. Adjacent sibling sele