CSS

CSS - Backgrounds

CSS - Backgrounds

The CSS background property is utilized to characterize the background impacts on the component. Numerous CSS background properties influences the HTML components:

  • background-color

The background-color property is utilized to determine the foundation shade of the component. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{  
    background-color: #b0d4de;  
}  
    </style>
</head>
<body>
    <h1>
        This is CSS
    </h1>
    <div>
        Hello Everyone!
    </div>

  
</body>
</html>
Output:


  • background-image

The background-image property is utilized to set a picture as a foundation of a component. As a matter of course the picture covers the whole component. You can set the foundation picture for a page like this. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{
            background-image: url("https://d3pc1xvrcw35tl.cloudfront.net/ln/feedImages/686x514/great_learning_march_16_202103.jpg");
            margin-left:100px; 
        }
    </style>
</head>
<body>
    <h1>
        This is CSS
    </h1>
    <div>
        Hello Everyone!
    </div>

  
</body>
</html>
Output:

 


 

  • background-repeat

As a matter of course, the background-image property repeats the background-image evenly and in an upward direction. A few pictures are rehashed just evenly or in an upward direction. The background looks better if the picture repeated evenly as it were. For example: 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{
            background-image: url("https://d3pc1xvrcw35tl.cloudfront.net/ln/feedImages/686x514/great_learning_march_16_202103.jpg");
            background-repeat: repeat-x; 
        }
    </style>
</head>
<body>
    <h1>
        This is CSS
    </h1>
    <div>
        Hello Everyone!
    </div>

  
</body>
</html>
Output:
Or
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{
            background-image: url("https://d3pc1xvrcw35tl.cloudfront.net/ln/feedImages/686x514/great_learning_march_16_202103.jpg");
            background-repeat: repeat-y; 
        }
    </style>
</head>
<body>
    <h1>
        This is CSS
    </h1>
    <div>
        Hello Everyone!
    </div>
</body>
</html>
Output:


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{
            background-image: url("https://d3pc1xvrcw35tl.cloudfront.net/ln/feedImages/686x514/great_learning_march_16_202103.jpg");
            background-repeat: no-repeat;  
            background-attachment: fixed;   
        }
    </style>
</head>
<body>
    <h1>
        This is CSS
    </h1>
    <div>
        Hello Everyone!
    </div>

  
</body>
</html>


 

  • background-position

The background-position property is utilized to characterize the underlying situation of the background-image. As a matter of course, the background-image is set on the upper left of the website page. You can set the accompanying positions: center, top, bottom, left, right. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body{
            background-image: url("https://d3pc1xvrcw35tl.cloudfront.net/ln/feedImages/686x514/great_learning_march_16_202103.jpg");
            background-repeat: no-repeat;  
            background-attachment: fixed;
            background-position: center;    
        }
    </style>
</head>
<body>
    <h1>
        This is CSS
    </h1>
    <div>
        Hello Everyone!
    </div>

  
</body>
</html>
Output:

CSS - Fonts

  • The font-family property is utilized to change the substance of a text style. 
  • The text style property is utilized to make a textual style italic or diagonal. 
  • The textual style variation property is utilized to make the impact of a little cover. 
  • The text style weight property is utilized to increment or decline how strong or light a text style shows up. 
  • The text dimension property is utilized to increment or decline the size of a textual style. 
  • The textual style property is utilized as shorthand to determine various other text style properties. 

Set the Font Family 

Following is the model, which shows how to set the textual style group of a component. Conceivable worth could be any font-family name. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <p style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, id excepturi inventore non fugit rerum ratione est assumenda tenetur a! Id voluptas tempora est consequatur excepturi debitis, facere quo laudantium!
    </p>

  
</body>
</html>

Output:

 

Set the Font Style 

Following is the model, which shows how to set the text style of a component. Potential qualities are typical, italic and slanted. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <p style="font-style: italic;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, id excepturi inventore non fugit rerum ratione est assumenda tenetur a! Id voluptas tempora est consequatur excepturi debitis, facere quo laudantium!
    </p>
</body>
</html>
Output:

Set the Font Variant

The accompanying model shows how to set the text style variation of a component. Potential qualities are typical and little covers. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <p style="font-variant: small-caps;">

 

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, id excepturi inventore non fugit rerum ratione est assumenda tenetur a! Id voluptas tempora est consequatur excepturi debitis, facere quo laudantium!

 </p>

  
</body>
</html>
Output:



Set the Font Weight

The accompanying model shows how to set the textual style weight of a component. The textual style weight property gives the usefulness to determine how striking a text style is. Potential qualities could be typical, striking, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <p style="font-weight: bold;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, id excepturi inventore non fugit rerum ratione est assumenda tenetur a! Id voluptas tempora est consequatur excepturi debitis, facere quo laudantium!
    </p>
<br>
<p style="font-weight: bolder;">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quae assumenda nisi deserunt repellendus accusantium dolore expedita, numquam, ut enim tempore sunt dolorem optio odit doloribus, molestiae at obcaecati nemo!
</p>
  <br>
  <p style="font-weight: lighter;">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, enim repellat nobis quisquam aspernatur eos libero ducimus laboriosam repellendus ipsam consectetur. Quaerat libero obcaecati non ex ad laboriosam quisquam cumque.
  </p>
</body>
</html>
Output:


 

Set the Font Size 

The accompanying model shows how to set the text dimension of a component. The text dimension property is utilized to control the size of textual styles. Potential qualities could be xx-little, x-little, little, medium, huge, x-enormous, xx-huge, more modest, bigger, size in pixels, or %. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <p style="font-size: larger;">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, id excepturi inventore non fugit rerum ratione est assumenda tenetur a! Id voluptas tempora est consequatur excepturi debitis, facere quo laudantium!
    </p>
<br>
<p style="font-size: smaller;">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quae assumenda nisi deserunt repellendus accusantium dolore expedita, numquam, ut enim tempore sunt dolorem optio odit doloribus, molestiae at obcaecati nemo!
</p>
  <br>
  <p style="font-size: medium;">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, enim repellat nobis quisquam aspernatur eos libero ducimus laboriosam repellendus ipsam consectetur. Quaerat libero obcaecati non ex ad laboriosam quisquam cumque.
  </p>
</body>
</html>
Output:


Top course recommendations for you

    Mongodb Tutorial
    2 hrs
    Beginner
    25.8K+ Learners
    4.53  (2447)
    Android App with Python
    2 hrs
    Beginner
    34.1K+ Learners
    4.41  (938)
    JavaScript Projects
    2 hrs
    Intermediate
    43.3K+ Learners
    4.49  (2021)
    HTML Attributes and Tags
    2 hrs
    Beginner
    53K+ Learners
    4.52  (3268)
    HTML Tutorial
    6 hrs
    Intermediate
    69.3K+ Learners
    4.55  (4237)
    CSS Properties
    2 hrs
    Beginner
    25.8K+ Learners
    4.46  (1370)
    CSS Tutorial
    2 hrs
    Intermediate
    44.6K+ Learners
    4.51  (2833)
    Docker Best Practices
    2 hrs
    Beginner
    7.2K+ Learners
    4.43  (315)
    Docker for Intermediate Level
    3 hrs
    Beginner
    8.1K+ Learners
    4.4  (271)
    Docker Orchestration
    3 hrs
    Intermediate
    3.9K+ Learners
    4.56  (141)