Practical Implementation of CSS

Responsiveness of Web Page: The web page will change its color, font-size, and width of the image according to the size of the device. For doing this we are using media query which helps us to implement the responsiveness of a web page.

Examples: In this example, we are using the explained approach, in order to create the Responsive Webpage.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link rel="stylesheet" 
          href="./style.css"> 
</head> 
  
<body> 
    <div> 
        <h2>GeekForGeeks</h2> 
        <img src= 
"https://media.w3wiki.org/wp-content/uploads/20231106133657/gfg_logo.png" /> 
    </div> 
</body> 
  
</html>

CSS

/* style.css*/
body { 
    background-color: wheat; 
} 
  
h2 { 
    font-size: 60px; 
} 
  
@media only screen and (max-width: 1000px) { 
    body { 
        background-color: rgb(61, 239, 224); 
    } 
  
    h2 { 
        font-size: 45px; 
    } 
  
    img { 
        width: 350px; 
        height: 350px; 
    } 
} 
  
@media only screen and (max-width: 600px) { 
    body { 
        background-color: green; 
    } 
  
    h2 { 
        font-size: 35px; 
    } 
  
    img { 
        width: 250px; 
        height: 250px; 
    } 
}

Output:

Responsiveness using CSS

Add Styles on Link using CSS: In this approach, we are displaying how the link will change its color according to the activity on the web page. The hyperlink has three basic features that show different behaviors according to the attribute for eg: active, visited, and hover.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>link behaviour</title> 
    <link rel="stylesheet" 
          href="./style.css"> 
  
</head> 
  
<body> 
    <div> 
  
        <a href="https://www.w3wiki.org/" 
           target="_blank"> 
            GeekForGeeks 
        </a> 
        <p> 
            A Computer Science portal for geeks.  
            It contains well written, well thought  
            and well explained computer 
            science and programming articles 
        </p> 
  
    </div> 
  
</body> 
  
</html>

CSS

/* style.css*/
* { 
    text-align: center; 
    margin: auto; 
    padding: 15px; 
} 
  
p { 
    font-size: 24px; 
    width: 800px; 
    text-align: center; 
} 
  
a { 
    color: green; 
    font-size: 26px; 
} 
  
a:visited { 
    color: purple; 
} 
  
a:hover { 
    color: coral; 
} 
  
a:active { 
    color: blue; 
}

Output:

Links in CSS

HTML

CSS

HTML

CSS

Uses of CSS

Contact Us

Practical Implementation of CSS

HTML

CSS

HTML

CSS

Uses of CSS

Similar Reads

Contact Us