gravity4Tech: CSS Tutorial

CSS Pseudo Classes

Filed Under: CSS Tutorial on Wednesday, September 30, 2020

CSS Pseudo-Classes

§ In this tutorial we are trying to understand CSS pseudo class selector and also we will learn how we can use them in our HTML pages.

§ I am going to discuss pseudo class selector with respect to navigation that is with respect to hyperlinks.

§ CSS pseudo-classes are used to add special effects to some selectors

A simple syntax of pseudo-classes is as follows –

selector: pseudo-class 
{
property: value
}

The :link pseudo-class

§ Use this class to add special style to an unvisited link

Selector: link  
{
   Declaration list;
}

§ It selects any html element targeted by the selector, if its status is un-visited (or default)

Example:

a:link
{
 text-decoration : none;
}

§ It selects any anchor element, if its status is un-visited.

Let’s create an example here

<html>
    <head>
    </head>
    <body>
        <a href="contactus.html">Visit Contact US Page</a>
        <br/>
        <br/>
        <a href="aboutus.html">Visit About US Page</a>
    </body>
</html>

§ For example here you can see that as I told anchor elements if they are in unvisited state they are going to have by default blue color text and text decoration underline what if you want to remove this underline then we have to identify the anchor elements which are in unvisited state and apply the text decoration none.

<html>
    <head>
        <style>
            a:link{
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <a href="contactus.html">Visit Contact US Page</a>
        <br/>
        <br/>
        <a href="aboutus.html">Visit About US Page</a>
    </body>
</html>

§ Save the file and go to browser and refresh you can see that both of them are in unvisited state its reason text-decoration is set to none they don't have underline.

The :hover pseudo-class

§ Use this class to add special style to an element when you mouse over it.

selector : hover
{
 declaration list;
}

§ It selects any html element targeted by the selector, if its status is hovered (on mouse over)

a:hover
{
border: 5px solid red;
}

§ It selects any anchor element, if its status is hovered.

§ I am telling to the browser that when we move the mouse cursor over any anchor element state changes to the hover then apply the border : 5px solid red;

§ when we move the mouse cursor over any anchor element then state changes to the hover state.

<html>
    <head>
        <style>
            a:link{
                text-decoration: none;
            }
            a:hover{
                border : 5px solid red;
            }

        </style>
    </head>
    <body>
        <a href="contactus.html">Visit Contact US Page</a>
        <br/>
        <br/>
        <a href="aboutus.html">Visit About US Page</a>
    </body>
</html>

§ save the file and go to browser and refresh you can see now both links are in unvisited state when I move the mouse cursor you can see that now the first anchor state is changed to hover state so it has a border: 5px solid red; if I move the mouse cursor on the second hyperlink then you can see the second hyperlink is also has border: 5px solid red; when we go away you can see that the underlined is remove they are back to unvisited state. Now both are of them are in unvisited state and hover state.

§ hover pseudo class selector is very very useful pseudo class that you can use it on almost every HTML element that means on mouseover if you want to apply some styles on any HTML element you can use this pseudo class selectors.

The :visited pseudo-class

§ Use this class to add special style to a visited link.

selector : visited
{
 declaration list;
}

§ It selects any html element targeted by the selector, if its status is visited (on click and
page visit)

a:visited

{
color : green;
} 

§ It selects any anchor element, if its status is visited

<html>
    <head>
        <style>
            a:link{
                text-decoration: none;
            }
            a:hover{
                border : 5px solid red;
            }
            a:visited{
                color: green;
            }

        </style>
    </head>
    <body>
        <a href="contactus.html">Visit Contact US Page</a>
        <br/>
        <br/>
        <a href="aboutus.html">Visit About US Page</a>
    </body>
</html>

§ when I click on this Visit Contact US Page of course we know that we go to the contactus.html page let’s go contact us page open if I come back you can see that the first hyperlink text color is changed to Purple color by default visited hyperlinks are going to have a purple color what if you want the green color instead of purple color if you have visited hyperlink and their color should be green.

§ then we have to write this code file a:visited{color: green;}save file and go to browser and refresh you can see that the first hyperlink color is changed to green color that indicate that we have visited the contact us page we have not visited to about us page hence it is still having the blue color because it is in unvisited state if I click on it we are visited to about us page and once I come back it is also going to have the green color now both of them are in visited state.

Navigation pseudo classes | :target

Using the :target pseudo-class in selectors

§ The pseudo-class: target is used to style the target element of a URL containing a fragment identifier.

selector : target
{
 declaration list;
}

§ It selects any html element targeted by the selector, if its status is targeted (Only when element id or name appears as targeted fragment identifier in the page URI.).

§ Let me explain what is the targeted fragment identifier go to the browser.in the URL

here you can see it is showing /default.html#bottom

.

§ We have #bottom right what is the meaning of that #bottom is actually known as targeted fragment identifier.

§ When we click on the middle section then #middle you can see as middle that is actually known as fragment identifier.

§ When we click on the top section then #top you can see as top that is actually known as fragment identifier.

§ If you see the targeted fragment identifier with the name top then maybe we want to apply some border around the top section here around this paragraph if I click on the middle section I want something to be highlighted that the middle section is now a targeted fragment identifier if I click on bottom section I want the border around it so that I can tell to the user that how the bottom section is the targeted fragment identifier how do we do that.

Example:-

<html>
    <head>
        <style>
            p:target{
                border: 2px solid greenyellow;
            }

        </style>
    </head>
    <body>
        <p id="top">Top Section</p>
        <a href="#middle">Middle Section</a><br/><br/>
        <a href="#bottom">Bottom Section</a><br/><br/>
        
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <p id="middle">Middle Section</p>
        <a href="#top">Top Section</a><br/><br/>
        <a href="#bottom">Bottom Section</a><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <p id="bottom">Bottm Section</p>
        <a href="#top">Top Section</a><br/><br/>
        <a href="#middle">Middle Section</a><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/>
    </body>
</html>

CSS import Rule

Filed Under: CSS Tutorial on Tuesday, September 29, 2020

What is CSS @import Rule?

§ Using CSS @import rule we can include one CSS file in another?

§ The import rule is used to import style sheets into other style sheets and any documents where @import can be applied.

§ The @import rule is used to import style rules from other style sheets.

§ The @import keyword must be followed by the URL of the style sheet to include, and a semicolon.

Syntax:

@import url("url_path");

Example:-

§ Let’s here we create an index.html page and two CSS files example1.css and example2.css.

index.html

<html>
    <head></head>
    <body>
        <h1>Welcome to CSS Import Rule:</h1>
    </body>
</html>

example1.css

body
{
    background: papayawhip;
}

example2.css

h1 {
     color: red; font-size: 50px;
}

Now we embedded example1.css into index.html page

<html>
    <head>
            <link href="example1.css" rel="stylesheet" >
    </head>
    <body>
        <h1>Welcome to CSS Import Rule:</h1>
    </body>
</html>

Output

Now we include example2.css in example1.css file.

@import url("example2.css");
body
{
    background: papayawhip;
}

Now Run this code again and check the changes

<html>
    <head>
            <link href="example1.css" rel="stylesheet" >
    </head>
    <body>
        <h1>Welcome to CSS Import Rule:</h1>
    </body>
</html>

Output

This example shows how to import style sheets into index.html directly.

<html>
    <head>
            <style>
                    @import url("example1.css");
                    @import url("example2.css");
            </style>   
    </head>
    <body>
        <h1>Welcome to CSS Import Rule:</h1>
    </body>
</html>

Output

CSS background property

Filed Under: CSS Tutorial on Wednesday, September 16, 2020

CSS background property :

§ This property is used to define the background effects on Html element. There are 5 CSS background properties that affect the Html elements.

· background-color

· background-image

· background-repeat

· background-attachment

· background-position

CSS background-color

§ It is used to set the background color for an html element.

§ values for background-color property can be provide as

color_name |hex color value |rgb(0-255,0-255,0-255)

|rgba(0-255,0-255,0-255,0-1)|transparent

CSS Syntax

background-color: color|transparent|initial|inherit;

Value	Description
color	Specifies the name of color
transparent	Specifies that the background color should be transparent.
inherit	Inherits this property from its parent element.

Example:-

<html>
<head>
<style>
h3{
    background-color:yellow;
}
p{
    background-color:cyan;
}
div{
    background-color: bisque;
}
</style>
</head>
<body>
    <div>
        This is a div Element
    </div>
    <p>This is paragraph</p>
    <h3>This is h3 Heading</h3>
</body>
</html>

Output:

Specify The background Color with different types values:-

§ Let’s see here what different way to provide a color value.

§ Specify the background color with a HEX value.

background-color: #2060d6;

§ Specify the background color with an RGB value:

§ What is RGB-

§ The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors.

background-color: rgb(red, green, blue);

background-color: rgb(209, 25, 25);

§ Specify the background color with an RGBA value:

§ What is RGBA-

§ RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

background-color: rgba(13, 212, 40, 0.3);

§ Specify the background color with a HSL value:

§ What is HSL-

§ HSL color values are specified with: hsl(hue, saturation, lightness) . Hue. Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.

background-color: hsl(352, 43%, 51%);

§ Specify the background color with a HSLA value:

§ What is HSLA-

§ HSLA stands for Hue, Saturation, Lightness, and alpha. This HSLa Color Values method is much more intuitive than RGBA or Hex values.

background-color: hsla(hue, saturation, lightness, alpha)

§ background-color: hsla(165, 43%, 51%, 0.3);

Setting the different background Color with different types values:-

<html>
<head>
<style>
#div1{
     /* Specify the background color with a HEX value:*/
     background-color: #b6d192;
}
#div2{
    /* Specify the background color with an RGB value:*/
    background-color:rgb(201, 76, 118);
}
#div3{
    /* Specify the background color with an RGBA value:*/
    background-color: rgba(201, 76, 93, 0.3);
}
#div4{
    /* Specify the background color with a HSL value::*/
    background-color: hsl(162, 43%, 51%);
}
#div5{
    /* Specify the background color with a HSL value::*/
    background-color: hsla(89, 90%, 49%, 0.3);
}
</style>
</head>
<body>
   <div id="div1">
    This is DIV-1
   </div>
   <div id="div2">
        This is DIV-2
    </div>
    <div id="div3">
        This is DIV-3
    </div>
    <div id="div4">
         This is DIV-4
    </div>
    <div id="div5">
        This is DIV-5
    </div>
</body>
</html>

Output:

Example:-

§ Set the background color for a page:

<html>
<head>
<style>
body{
    background-color: aquamarine;
}
</style>
</head>
<body>
</body>
</html>

Output:-

CSS background-image Property

§ It is used to set the image in background of the Html element..

CSS Syntax

background-image: url|none|initial|inherit;

values:url('image-path')|none

§ Values that we can assign none or we can assign a URL function having a image path or image name URL stands for uniform resource locator.

Example

§ Setting a background-image for the <body> element:

§ Here we have one HTML_CODE folder with-in this folder we have images folder and images folder contains images.

Example:-

<html>

    <head>
        <style>
            /* specifies the background image*/
            body{
                background-image: url('images/india.jpg')
            }
        </style>
    </head>
    <body>
    </body>
</html>

Output:-

§So watch the output here background image repeated. If image size is less than browser size then by default, the background-image property repeats the background image horizontally and vertically.

CSS background-repeat Property

§ It is used to specify, how the background image to be repeated.

§ By default, the background-image property repeats the background image horizontally and vertically.

§ If you do not want to repeat background image then set no-repeat.

CSS Syntax

background-repeat: repeat|repeat-x|repeat-y|no-

repeat|initial|inherit;

Example: repeat in x-axis

<html>
    <head>
        <style>
            /* specifies the background image*/
            body{
                background-image:url('images/india.jpg'); 
                background-repeat: repeat-x;  
            }
        </style>
    </head>
    <body>
    </body>
</html>

Output:-

Example: repeat in y-axis

<html>
    <head>
        <style>
            /* specifies the background image*/
            body{
                background-image:url('images/india.jpg'); 
                background-repeat: repeat-y;  
            }
        </style>
    </head>
    <body>
    </body>
</html>

Output:-

Example: no-repeat

<html>
    <head>
        <style>
            /* specifies the background image*/
            body{
                background-image:url('images/india.jpg'); 
                background-repeat: no-repeat;  
            }
        </style>
    </head>
    <body>

    </body>
</html>

Output:-

CSS background- attachment

§ It is used to specify, how the background image is to be attached to the wall of a web page.

§ By using this property we can Defines how the background image will behave when scrolling the page.

Syntax:- background-attachment: scroll | fixed | inherit

background-attachment: fixed;

§ The background image will not scroll with the page or against the containing block.

background-attachment: scroll;

§ The background image will scroll with the page or against the containing block.

Example

<html>
    <head>
        <style>
            /* specifies the background image*/
            body{
                background-color: aliceblue;
                background-image:url('images/flower.jpg'); 
                
            }
            p{
                font-weight: bold;
            }
            
        </style>
    </head>
    <body>
         <p> this is Paragraph-1</p>
         <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <p> this is Paragraph-2</p>
         <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
         <p> this is Paragraph-3</p>
         <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
         <p> this is Paragraph-4</p>
         <br/><br/><br/><br/><br/><br/><br/><br/><br/>
         <p> this is Paragraph-5</p>
         <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </body>
</html>

§ Here you can observe the behavior of the image when I start scrolling with the text image also gets scroll can see that images also moving up with the text and also you can observe the image is getting repeated right image is getting repeated but i move the text down the image is also moving down so images scrolling with the text as a default behavior I can stop that I can fix the image first thing what I do if I stop this repeating behavior of the image by applying background-repeat:no-repeat.

body{
      background-image:url('images/flower.jpg'); 
      background-repeat: no-repeat;          
    }

§ Save the file and refresh the browser in this time the text is moving up and scrolling images also moving up and scrolling but the images is not getting repeated .you can see with the text images scrolling but it is not repeating so we stop the repeating behavior so now stopping the scrolling behavior how do I do that by using the background-attachment property.

body{
      background-image:url('images/flower.jpg'); 
      background-repeat: no-repeat;
      background-attachment: fixed;          
    }

§ Save your browser and refresh this time the background image is going to be fixed to the wall of a page only the text is going to be scrolled you can see that only text is moving up and down only text is getting scrolled not the background image the background images fixed at the most of the time we fix the background image sometimes we might need the background image also to be scrolled then we can sign here value scroll.

            body{
                background-image:url('images/flower.jpg'); 
                background-repeat: no-repeat;
                background-attachment: scroll;
            }

gravity4Tech

Featured Posts

CSS Pseudo Classes

The :link pseudo-class

The :hover pseudo-class

CSS import Rule

CSS background property

Popular Posts

Categories

Contact Form

www.CodeNirvana.in

Blog Archive

About

Site Links

About Me

Popular Posts

Translate

Total Pageviews