Highlighted

Changing text size and backgrounds

New Here ,
Aug 29, 2020

Copy link to clipboard

Copied

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!

Views

55

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Changing text size and backgrounds

New Here ,
Aug 29, 2020

Copy link to clipboard

Copied

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!

Views

56

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 29, 2020 0
Adobe Community Professional ,
Aug 30, 2020

Copy link to clipboard

Copied

Hello,

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

Hans-Günter

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 30, 2020 0
Adobe Community Professional ,
Aug 30, 2020

Copy link to clipboard

Copied

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

 

image.png

 

<!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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 30, 2020 1
Adobe Community Professional ,
Aug 31, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 31, 2020 1