Skip to main content
G
Gabby5FED
Participant
August 30, 2020
Question

Changing text size and backgrounds

  • August 30, 2020
  • 3 replies
  • 230 views

hi im doing coding for an elective assessment that's due soon and I'm not sure hot to make the h1 title size smaller as my title is too big I also would like to know if I could change the green background to an image is so can someone please tell me how thank you!

    This topic has been closed for replies.

    3 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    August 31, 2020

    CSS is the way to do this.

    Work through the tutorials here: https://www.w3schools.com/css/ while not as comprehensive as some would like, the basic information is presented well and gives you the opportunity to learn by doing, right in the site itself.

    Once you have a basic understanding of how CSS works within HTML, you can do pretty much anything you want to modify the look of your page.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      August 30, 2020

      Style your site with CSS code.  See screenshot and code example below.

       

       

      <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grids - Vertical Centering</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
height: 100%;
display: grid;
background: #333 url(https://placeimg.com/1200/900/nature) no-repeat center center;
background-size: cover;
}
.container {
padding: 2%;
width: 80%;
text-align: center;
margin: auto;
background-color: rgba(0,0,0,0.5);
color: #FFF;
}
/* Special Rules for Tablets & Higher */
@media only screen and (min-width: 500px){
h1 {font-size:5vw}
h2 {font-size:4vw}
h3 {font-size:3vw}
 p {font-size:2vw}
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to CSS Grids!</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>I'm vertically &amp; horizontally centered text over a full-sized page background-image.</p>
</div>
</body>
</html>

       

      Nancy O'Shea— Product User & Community Expert
        hans-g.
        hans-g.
        Legend
        August 30, 2020

        Hello,

        please send us a link to your website in question, so we can better help.

        Hans-Günter

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices