<![CDATA[swapna reddy's team blog]]>https://webarticle.hashnode.devRSS for NodeSun, 11 Oct 2026 17:38:53 GMT60<![CDATA[Media Query in CSS]]>https://webarticle.hashnode.dev/media-query-in-csshttps://webarticle.hashnode.dev/media-query-in-cssSat, 26 Nov 2022 05:51:42 GMTMedia Query

Media query makes responsive web pages. Responsive web design makes web pages look good on different screen sizes. Web pages are viewed on three different devices. That is mobile, tablet, and laptop. We can change the CSS property for all three devices using media query. We can add a breakpoint, and from that point, certain parts of the webpage will behave differently on each side of the breakpoint. Mobile First means designing for mobile before designing for any other device.

Code for media query

body{
            background-color: pink;
            height:100vh;
        }
        .container{
            display:flex;
            gap:10px;
        }
        .circle{
            height: 70px;
            width:70px;
            border-radius: 50px;
            background-color: black;

        }
        @media(max-width:600px) {
            body{
                background-color: green;
            }
            .container{
                display:flex;
                flex-direction: column;
            }

        }

<div class="container">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>

Screenshot (1645).png Screen width above 600px.



Screenshot (1647).png screen width below 600px.



We can define many media queries.

body{
            background-color: pink;
            height:100vh;
        }
        .container{
            display:flex;
            gap:10px;
        }
        .circle{
            height: 70px;
            width:70px;
            border-radius: 50px;
            background-color: black;

        }
        @media(max-width:600px) {
            body{
                background-color: green;
            }
            .container{
                display:flex;
                flex-direction: column;
            }

        }
        @media(min-width:601px ) and (max-width:900px) {
            body{
                background-color: red;
            }
            .container{
                display:flex;
                flex-direction: row-reverse;
            }

        }

<div class="container">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>

When the screen size is above 900px

Screenshot (1648).png


When the screen size is below 900px

Screenshot (1649).png




When the screen size is below 600px

Screenshot (1650).png

]]><![CDATA[Grid in CSS]]>https://webarticle.hashnode.dev/grid-in-csshttps://webarticle.hashnode.dev/grid-in-cssFri, 25 Nov 2022 10:40:31 GMTIntroduction

Grid layout aligns the items in a row and column. It is a two-dimensional layout. It makes responsiveness easy by changing a couple of lines for different screens. Grid property applied on the parent container. Hence, an HTML element becomes a grid container.

.container {
  display: grid;
}

Children inside grid container automatically become grid items.

Grid Columns

Vertical lines of grid items are called columns.

Grid Rows

Horizontal lines of grid items are called rows. images.png

Grid Gaps

The spaces between each column or row are called gaps.

images (1).png

#Grid Container Grid property is set on the parent element to make that element as grid container. Grid container has grid items inside it.

Grid-template-columns

The grid-template-columns property defines the number of columns in the grid layout and defines the width of each column.

.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
        }
        .items{
            background-color: red;
        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

Screenshot (1631).png

Grid-template-rows

Grid-template-row defines the height of each row.

 .container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: 100px 50px 20px;
        }
        .items{
            background-color: red;
        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

Screenshot (1632).png

Justify-content

Justify-content is used to align the items horizontally inside the grid container. Values for justify-content are space-around, space-evenly, space-between, center, start, and end.

space-around

.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: space-around;
            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

Screenshot (1633).png

space-between

.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: space-between;


            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

Screenshot (1634).png

space-evenly

.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: space-evenly;


            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

Screenshot (1635).png

Center

.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: center;


            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

Screenshot (1636).png

start

.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: start;


            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

Screenshot (1637).png

end

.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: end




            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

image.png

Align-content

Align-content aligns the items vertically inside the grid container. Values for align-content are a space-around, space-between, space-evenly, space-between, center, start, and end. 

.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            align-content: center;
            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

Screenshot (1639).png

The rest of the values are the same as the justify-content value.

Grid items

We can style the grid items so that they will span multiple columns and/or rows.

Grid-column

Grid-column property defines how many columns to span. Suppose we want to span column2 use the following line of code.

.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;

            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }
        .item2{
            grid-column: 2/ span 2;
        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

Screenshot (1640).png

Grid-row

Grid-row property defines how many rows to span. Suppose we want to span row1 use the following line of code

.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;

            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }
        .item1{
            grid-row: 1/ span 3

        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

Screenshot (1641).png

order

Order property rearranges the grid items inside the container. By default -1 is considered is the first order.

.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;

            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }

        .item2{
            order:-1;
        }

<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

Screenshot (1643).png

]]><![CDATA[Flexbox]]>https://webarticle.hashnode.dev/flexboxhttps://webarticle.hashnode.dev/flexboxThu, 24 Nov 2022 11:18:41 GMTIntroduction

Flexbox is a one-dimensional layout method to arrange items in rows or columns. Floats and positions features used for creating CSS layouts earlier, using these kinds of features were also limiting and frustrating. It was difficult to vertically center a block of content inside its parent and make all the children of the container take an equal amount of available width and height using floats and positions. Hence flexbox makes a lot of layout tasks in a much easier way.

Example without usage of flex:

In the example shown above, the blocks are placed in row format but we want the blocks to allocate in column format.

Screenshot (1606).png

.html{
            background-color: green;
        }
        .css{
            background-color: red;
        }
        .js{
            background-color: orange;
        }

<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>

        </div>

Example with usage of flex:

The blocks to allocate in column format, we use the display: flex property on the parent element. Here display property is used on the container class.

Screenshot (1607).png

.html{
            background-color: green;
        }
        .css{
            background-color: red;
        }
        .js{
            background-color: orange;
        }
        .container{
            display:flex;
        }

<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>

        </div>

    </div>

Basic terminology

Elements are laid out along two axes. flex_terms.png

  • The main axis is the default axes that are running in the direction the flex items are laid out in. The start and end of this axis are called the main start and main end.

  • The cross axis is the axis running perpendicular to the direction of default axes. The start and end of this axis are called the cross start and cross end.

  • The parent element that has display: flex property is called the flex container.

  • The items laid out as flexible boxes inside the flex container are called flex items.

Flex-direction

Flexbox provides flex-direction property to arrange the items in a row or column. Flex-direction has values like row, row-reverse, column, and column-reverse.

Flex-direction:row

Displays the elements in a row.

.container{
            display:flex;
            flex-direction: row;
        }

Screenshot (1607).png

Flex-direction:row-reverse

Reverse the row elements. In the example, HTML and JS blocks are exchanged.

.container{
            display:flex;
            flex-direction: row-reverse;
        }

Screenshot (1608).png

Flex-direction:column

The elements are arranged in a column.

.container{
            display:flex;
            flex-direction: column;
        }

Screenshot (1606).png

Flex-direction:column-reverse

The column elements are reversed.

.container{
            display:flex;
            flex-direction: column-reverse;
        }

image.png

flex

We can control the child elements available space along the main axis by using the flex property. 

.css{
            flex:2;
        }

<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>

        </div>

    </div>

Screenshot (1611).png

gap

The gap is used to give space between the items.

.container{
            display:flex;
            gap:10px;


        }

<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>

        </div>

    </div>

Screenshot (1613).png

Justify-content

Justify-content property aligns the container's items on the main axis. Flex-start, flex-end, space-between ,space-around, and space-evenly are the few values for the justify-content.

flex-start

Items align from starting of the container.

.container{
            display:flex;
            justify-content: flex-start;
            border:5px solid black;


        }

<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>

        </div>

    </div>

Screenshot (1615).png

flex-end

Items align from ending of the container.

.container{
            display:flex;
            justify-content: flex-end;
            border:5px solid black;


        }

<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>

        </div>

    </div>

Screenshot (1617).png

space-between

Items will have space between.

.container{
            display:flex;
            justify-content: space-between;
            border:5px solid black;


        }

<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>

        </div>

    </div>

Screenshot (1618).png

space-around

Items will have space before, between, and after them.

 .container{
            display:flex;
            justify-content: space-around;
            border:5px solid black;


        }

<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>

        </div>

    </div>

Screenshot (1619).png

space-evenly

Items will have equal space around them

 .container{
            display:flex;
            justify-content: space-evenly;
            border:5px solid black;


        }

<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>

        </div>

    </div>

Screenshot (1620).png

center

Items are positioned in the center of the container.

.container{
            display:flex;
            justify-content: center;
            border:5px solid black;


        }

<div class="container">
        <div class="html">
            <h1>
                HTML
            </h1>
            <p>Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.</p>

        </div>
        <div class="css">
            <h1>CSS</h1>
            <p>CSS is the acronym of “Cascading Style Sheets”. CSS is a computer language for laying out and structuring web pages</p>
        </div>
        <div class="js">
            <h1>JS</h1>
            <p>an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p>

        </div>

    </div>

Screenshot (1622).png

align-items

align-item property aligns the container's items on the cross axis. Center, flex-start and flex-end are the few values for the align-items.

flex-start

.container{
            display:flex;

            border:5px solid black;
            height:500vh;
            align-items: flex-start;


        }

Screenshot (1623).png

flex-end

.container{
            display:flex;

            border:5px solid black;
            height:500vh;
            align-items: flex-end;


        }

Screenshot (1625).png

center

.container{
            display:flex;

            border:5px solid black;
            height:500vh;
            align-items: Center;


        }

Screenshot (1626).png

]]><![CDATA[CSS :Positions]]>https://webarticle.hashnode.dev/css-positionshttps://webarticle.hashnode.dev/css-positionsWed, 23 Nov 2022 12:06:24 GMTIntroduction

The element is positioned in a document by using the CSS position property. The final location of the element is determined by the top, right, bottom, and left. Positioning makes the elements go out of normal document flow and make them behave differently.

There are five types of positions. They are

  • Static
  • Relative
  • Absolute
  • Fixed
  • Sticky

1.Static

Every element gets a static position by default. The top, right, bottom, and left properties do not affect static elements.

code for static:

<style>
        .position{
            display: flex;
            gap:10px;
        }
        .frontend{
            height:100px;
            width:100px;
            background-color: black;
            color:#fff;
            text-align: center;

        }
        .html{
            position:static
        }
    </style>

<div class="position">
        <p class="frontend html">HTML</p>
        <p class="frontend css">CSS</p>
        <p class="frontend js">Javascript</p>
        <p class="frontend react">React</p>
        <p class="frontend angular">Angular</p>
    </div>

Output for static:

Screenshot (1601).png

2.Relative

Relative elements are positioned based on their original position. Top, left, bottom, and right values do not affect the positions of other elements in the document.

code for relative:

.position{
            display: flex;
            gap:10px;
        }
        .frontend{
            height:300px;
            width:300px;
            background-color: black;
            color:#fff;
            text-align: center;
            font-size:20px;

        }
        .html{
            position:static
        }

        .css{
            position: relative;
            top:100px;
            left:100px;
        }

<div class="position">
        <p class="frontend html">HTML</p>
        <p class="frontend css">CSS</p>
        <p class="frontend js">Javascript</p>
        <p class="frontend react">React</p>
        <p class="frontend angular">Angular</p>
    </div>

Output for relative:

Screenshot (1602).png

3.Absolute

Absolute elements are positioned to the parent's element position. Its final position is determined by top, bottom, right, and left values. The original position of the selected element's space will be occupied by the other neighboring elements.

code for absolute:

.position{
            display: flex;
            gap:10px;
        }
        .frontend{
            height:300px;
            width:300px;
            background-color: black;
            color:#fff;
            text-align: center;
            font-size:20px;

        }
        .html{
            position:static
        }

      .js{
            position:absolute;
            left:100px;
            background-color: red;
        }

<div class="position">
        <p class="frontend html">HTML</p>
        <p class="frontend css">CSS</p>
        <p class="frontend js">Javascript</p>
        <p class="frontend react">React</p>
        <p class="frontend angular">Angular</p>
    </div>

output for absolute:

Screenshot (1603).png

4.Fixed

Fixed elements are positioned relative to the viewport which means it always stays in the same place even if the page is lengthy and scrolled. The final position of the element is determined by the top, left, right, and bottom values.

A fixed element does not leave a gap in the page where it was located before.

code for fixed:

.position{
            display: flex;
            gap:10px;
        }
        .frontend{
            height:300px;
            width:300px;
            background-color: black;
            color:#fff;
            text-align: center;
            font-size:20px;

        }
        .html{
            position:static
        }

   .js{
            position:absolute;
            left:100px;
            background-color: red;
        }

        .react{
            position:fixed;
            bottom:100px;
            right:100px;
        }

<div class="position">
        <p class="frontend html">HTML</p>
        <p class="frontend css">CSS</p>
        <p class="frontend js">Javascript</p>
        <p class="frontend react">React</p>
        <p class="frontend angular">Angular</p>
    </div>

output for fixed:

Screenshot (1604).png

5.Sticky

An element with position: sticky; is positioned based on the user's scroll position. A sticky element is between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position: fixed).

]]><![CDATA[Pseudo-Selectors(:: before and ::after)]]>https://webarticle.hashnode.dev/pseudo-selectors-before-and-afterhttps://webarticle.hashnode.dev/pseudo-selectors-before-and-afterTue, 15 Nov 2022 11:28:54 GMTIntroduction

A pseudo selector is used to define a special state of an element like hover, focus, etc. It must have a double semi-colon (::) along with the targeted element name. After selecting the element, it creates a temporary element either before the element or after the element. "content" and "display" attributes are mandatory for the pseudo selectors to work fine.

Example of :: before and ::after

h1::before{
            content:"";
            display:block;
            width:20px;
            height:20px;
            border-radius: 100px;
            background-color: red;
        }

h1::after{
            content:"";
            display:block;
            width:20px;
            height:20px;
            border-radius: 100px;
            background-color: red;

        }

complete code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1::before{
            content:"";
            display:block;
            width:20px;
            height:20px;
            border-radius: 100px;
            background-color: red;
        }

        h1::after{
            content:"";
            display:block;
            width:20px;
            height:20px;
            border-radius: 100px;
            background-color: red;

        }

Screenshot (1598).png

]]><![CDATA[CSS-Cascading style sheet]]> element inside the element or create a separate file with filename.css extension. Inside the filen...]]>https://webarticle.hashnode.dev/css-cascading-style-sheethttps://webarticle.hashnode.dev/css-cascading-style-sheetTue, 15 Nov 2022 08:20:50 GMTIntroduction

The most important in CSS is to learn how to target the HTML elements in a webpage. We can embed CSS in two ways. Either includes <style> element inside the element or create a separate file with filename.css extension. Inside the filename.css, the file contains the CSS properties to design the web page beautifully. If CSS is embedded in a separate file, use the <link> element to link the CSS file with the HTML file.

Example of CSS embedded in the same HTML file.

Screenshot (1561).png

The result of CSS embedded in the same HTML file

Screenshot (1562).png

Example of CSS embedded in a different file with ".CSS" extension.

Screenshot (1564).png

The result of CSS embedded in a different file

Screenshot (1563).png

Both ways will give the same results.

We have different types of selectors. They are

1. Universal selectors:

They select everything on the web page. It is denoted by an asterisk(*). Generally, this type of selector is used to remove the browser's default settings like removing default margin and padding.

Syntax: *{ style properties }

*{
margin:0;
padding:0;
}

Example of Universal selectors:

*{
background-color:blue;
color:white;
}

<p>Learn CSS </p>
<h1>Hello Everyone</h1>

Result of Universal selector:

Screenshot (1566).png

2. Individual selector:

They select the HTML elements by name.

Example of individual selector:

p{
background-color:#841717;
}

<p>Learn CSS</p>
<h1>Hello everyone</h1>

<article>
Nov 14 is celebrated as Children's day</p>
<ul>
      <li>Pizza</li>
       <li>burger</li>
      <li class="bread pizza">sandwich</li>
            <li>chocolates
                <p>Paragrapgh inside List</p>
            </li>
  </ul>


</article>

Result of individual selector Screenshot (1568).png

3. Class and ID selector:

class selector selects the elements based on the class attribute mentioned in an HTML document. It selects multiple elements with the same class name. Class name starts with a dot(.). Example of Class selector:

.list1{
            background-color: #13993b;
            color:black;
        }

<div>
        <ul>
            <li>Inside list 1 
                <li class="list1">HTML</li>
                <li id="inside">CSS</li>
                <li>Javascript</li>
                <br><br>
            </li>
            <li>Inside list 2 <br>
                <li class="list1">Angular</li>
                <li>React</li>
                <li>VueJs</li>
            </li>
        </ul>
    </div>

Result of class selector:

Screenshot (1576).png

ID selector:

The ID selector selects the elements uniquely in an HTML document.Should not have two same id names in the HTML document. ID selector starts with "#".

Example of ID selector:

#inside{
            background-color: #d41795;
        }

<div>
        <ul>
            <li>Inside list 1 
                <li class="list1">HTML</li>
                <li id="inside">CSS</li>
                <li>Javascript</li>
                <br><br>
            </li>
            <li>Inside list 2 <br>
                <li class="list1">Angular</li>
                <li>React</li>
                <li>VueJs</li>
            </li>
        </ul>
    </div>

Screenshot (1576).png

4. Chained selector:

Chained selector is also called as and selector. If we need two conditions to be true use chained selector. Suppose two elements have the same class name. One of the elements has one extra class name. Now you want to select the element which has the extra class name. In that case we need to provide two class names to target the element. Then use the chained selector.

Example of Chained selector:

li.bread.pizza{
            background-color: #08090b;
            color:#FFF;
        }

<article>
        <p>Nov 14 is celebrated as Children's day</p>
        <ul>
            <li class="bread pizza">pizza</li>
            <li class="bread">burger</li>
            <li class="bread pizza">sandwich</li>
            <li>chocolates
                <p>Paragrapgh inside List</p>
            </li>
        </ul>
    </article>

Screenshot (1593).png

5. Combined selector:

Combined selector is used when multiple elements get the same CSS property.

Example of Combined selector:

 h2,h6
        {
            background-color: #fff;
            color:#000;
        }

<h2>Welcome to the first blog</h2>
    <h6>start with the css article</h6>

Result of combined selector

Screenshot (1594).png

6. Inside an element:

It selects the particular child element from the parent element path. Example of inside an element

article ul li p{
            background-color: yellow;
            color:black;
        }

<article>
        <p>Nov 14 is celebrated as Children's day</p>
        <ul>
            <li class="bread pizza">pizza</li>
            <li class="bread">burger</li>
            <li class="bread pizza">sandwich</li>
            <li>chocolates
                <p>Paragrapgh inside List</p>
            </li>
        </ul>
    </article>

Result of inside and element:

Screenshot (1595).png

7.Direct child:

It selects the direct child element from the parent element.> symbol is placed in between the parent and child element. Example of direct child:

article>p{
            background-color: red;
        }

 <article>
        <p>Nov 14 is celebrated as Children's day</p>
        <ul>
            <li class="bread pizza">pizza</li>
            <li class="bread">burger</li>
            <li class="bread pizza">sandwich</li>
            <li>chocolates
                <p>Paragrapgh inside List</p>
            </li>
        </ul>
    </article>

Result of Direct child

Screenshot (1596).png

8.Sibling selector:

A sibling selector is used to target the siblings elements who belong to the same parent element.+ symbol is placed between the sibling elements.

Example of Sibling selector:

.child+li{
            background-color:#6A1B4D;
        }

 <section>

            <li>one</li>
            <li>two</li>
            <li class="child">three</li>
            <li>four</li>
            <li>five</li>

    </section>

Result of Sibling selector:

Screenshot (1597).png

Complete code and result

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS selectors</title>
    <style>
        *{
            background-color: blue;
            color:white;
        }

        p{
            background-color: #841717;
        }

        .list1{
            background-color: #13993b;
            color:black;
        }

        #inside{
            background-color: #d41795;
        }

        li.bread.pizza{
            background-color: #08090b;
            color:#FFF;
        }

         h2,h6
        {
            background-color: #fff;
            color:#000;
        }

        article ul li p{
            background-color: yellow;
            color:black;
        }

        article>p{
            background-color: red;
        } 

        .child+li{
            background-color:#6A1B4D;
        } 








    </style>
</head>
<body>
    <p>Learn CSS</p>
    <h1>Hello everyone</h1>

    <article>
        <p>Nov 14 is celebrated as Children's day</p>
        <ul>
            <li class="bread pizza">pizza</li>
            <li class="bread">burger</li>
            <li class="bread pizza">sandwich</li>
            <li>chocolates
                <p>Paragrapgh inside List</p>
            </li>
        </ul>
    </article>

    <div>
        <ul>
            <li>Inside list 1 
                <li class="list1">HTML</li>
                <li id="inside">CSS</li>
                <li>Javascript</li>
                <br><br>
            </li>
            <li>Inside list 2 <br>
                <li class="list1">Angular</li>
                <li>React</li>
                <li>VueJs</li>
            </li>
        </ul>
    </div>

    <h2>Welcome to the first blog</h2>
    <h6>start with the css article</h6>

    <section>

            <li>one</li>
            <li>two</li>
            <li class="child">three</li>
            <li>four</li>
            <li>five</li>

    </section>






</body>
</html>

Screenshot (1597).png

]]>