body {
background-color: red;
font-family: arial;
}
h1 {
text-align: center;
}
.thumbail {
height: 600px;
width: auto;
}
<!doctype html>
<html>
<head>
<title>Services - Salazar's Stickers</title>
<link rel='stylesheet' type='text/css' href='./style.css'>
</head>
<body>
<header>
<h1>Salazar's Stickers</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<h2>Personalized Name Stickers</h2>
<p>
These stickers can be customized with your name or initials, making it easy to add a personal touch to your belongings.
</p> <br>
<img src="./nameStickers.png" class='thumbnail' alt="Personalized Name Stickers">
<h2>Decorative Sticker Packs</h2>
<p>
Our decorative sticker packs include a variety of designs, perfect for adding a touch of creativity to your notebook, phone case, or any other item.
</p> <br>
<img src="./decStickers.jpg" class='thumbnail' alt="Decorative Stickers">
<h2>Vinyl Wall Decals</h2>
<p>
Our vinyl wall decals are a great way to decorate your living space. They are easy to apply, remove, and won't damage your walls, making it the perfect solution for apartment dwellers or those who prefer not to make permanent changes to their walls.
</p>
<img src="./vinylWallDecal.jpg" class='thumbnail' alt="Vinyl Wall Decals">
<div class='content'> </div>
<footer>© Salazar's Stickers 2023 </footer>
</body>
</html>
It was working initially, but now, any changes that I implement do not seem to work?
I can't change the color or the text-alignment.
The thumbnail class doesn't seem to be working either.
I'm new to CSS and HTML, so I'm probably sure that this is some simple mistake, but I searched the web and nothing seems to be working.
Not sure if this helps, but your css has .thumbail, and your html classes have thumbnail. You are missing the letter n.
Related
In CSS I'm having an issue where the footer isn't being included with the body when in html, the footer is in between the body tags. I have a box-shadow border for the whole body, but the footer doesn't have the box shadow around it. As seen below the footer tags are in between the body tags and in the CSS code the body has box shadows, but the footer doesnt have a box shadow. Here's the code:
body {
font-size: 87.5%;
width: 800px;
display: block;
margin: 0px auto;
box-shadow: 3px 3px 3px black;
border: 3px solid black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> The Halloween Store </title>
<link rel="stylesheet" href="main1.css">
<link rel="stylesheet" href="normalize.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="favicon.ico" alt="Pumpkin" height="80">
<h2>The Halloween Store</h2>
<h3>For the little Goblin in all of us!</h3>
</header>
<main>
<h1> Welcome to my site. Please come in and stay awhile. </h1>
<p>I started this website because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.
</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.
</p>
<h3>Product categories</h3>
<ul>
<li>Props</li>
<li>Costumes</li>
<li>Special Effects</li>
<li>Masks</li>
</ul>
<h3>My guarantee</h3>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b> </p>
</main>
<footer>
<p>© 2016 Ben Murach</p>
</footer>
</body>
</html>
A box-shadow is outside the border. So if it's on the bodyelement, and that body fully fills or even overflows the screen (fully filling the html element), the box-shadow will be cut off, even if box-sizing is defined as border-box, since that only includes the content area, the padding and the border, but not margins and box-shadows.
The snippet area here is less wide than the 800px you defined as width for body, so that already extends the width of the viewport (i.e. the snippet area), and also the height is more than the default height of the snippet area.
However, if you make your body element narrower than the screen or the html element, and apply some padding-bottom to the html element, there will be space for the bodys box-shadow:
html {
padding-bottom: 6px;
}
body {
font-size: 87.5%;
width: 550px;
display: block;
margin: 0px auto;
box-shadow: 3px 3px 3px black;
border: 3px solid black;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> The Halloween Store </title>
<link rel="stylesheet" href="main1.css">
<link rel="stylesheet" href="normalize.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="favicon.ico" alt="Pumpkin" height="80">
<h2>The Halloween Store</h2>
<h3>For the little Goblin in all of us!</h3>
</header>
<main>
<h1> Welcome to my site. Please come in and stay awhile. </h1>
<p>I started this website because Halloween has always been my favorite holiday. But during the last year, I started selling some of my favorite Halloween products, and they've become quite a hit.
</p>
<p>If you click on the Personal link, you can browse my favorite Halloween pictures, stories, and films. And if you join my email list, I will keep you up-to-date on all things Halloween.
</p>
<h3>Product categories</h3>
<ul>
<li>Props</li>
<li>Costumes</li>
<li>Special Effects</li>
<li>Masks</li>
</ul>
<h3>My guarantee</h3>
<p>If you aren't completely satisfied with everything you buy from my site, you can return it for a full refund. <b>No questions asked!</b> </p>
</main>
<footer>
<p>© 2016 Ben Murach</p>
</footer>
</body>
</html>
I was doing research and found out that you are only supposed to have one <body> tag, which after learning that I proceeded to clean up my code because I had 3 different set of body tags and by removing the tags to where I only had one set I messed it up to where it no longer aligns my footer properly.
Sorry if this is a silly issue, I am 15 and I started learning html 3 days ago at this point.
I have tried putting the footer outside of the boundary of the <body> tag and tried putting the class within a div tag right after the first footer tag.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<title> Hub </title>
<h2 style="text-align:center">Home</h2>
<p style="text-align:center"> Welcome to my test website.
<i><b><br> (Currently Under construction) </b></i>
</p>
<p> </p>
<p style="text-align:center">
<a href="https://youtube.com">
<img border=0 src="youtube.png" width="100" height="70"> </a>
</p>
<p></p>
<p class="center">
<img src="razer.jpg" width="640" height=360>
</p>
<br>
<footer class="footer">
Home
About
Contact
Projects
</footer>
</body>
</html>
Here is the css class
.footer {
background-color: white;
color: Orange;
margin: 20px;
padding: 20px;
align-items: center;
text-decoration: none;
}
I expected it to stay aligned with the center, but it ended up reverting to text with no alignment.
Welcome!
Here's a little jsFiddle to help simplify the code a bit - and just to show you how that works.
https://jsfiddle.net/sheriffderek/5Lros2h4/
Here's the basic HTML structure:
<!doctype html>
<html>
<head>
<title>My project</title>
<link rel="stylesheet" href="styles.css">
<style>
.site-footer {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Header stuff</h1>
</header>
<main>
<p>Stuff</p>
</main>
<footer class="site-footer">
<nav class="main-menu">
Home
About
</nav>
</footer>
</body>
</html>
You'll spend most of your time in the body - and like you said - you wouldn't have more than one of those tags.
I suggest you keep you css in the css file - or in the styles tag in the head.
For your question - we basically just need to see this in order to help:
<footer class="site-footer">
<nav class="main-menu">
Home
About
</nav>
</footer>
Your align-items: center is a flex-box declaration. You might mean text-align: center
Check out these resources:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Learn about the box-model and the display types first - and then position and you'll be on the right path. Join a chat-room for something like CSS https://discord.gg/pFc6XmH
and later... when you're feeling ready - watch this: https://flexbox.io
Keep your examples as simple as possible and you'll get the most help. : )
I'm not actually what you mean, but if you want to make the a-tag to be in the middle, you can use
footer{text-align:center;}
But if you want to make each of your a-tag to be separated and in the middle. you should just make the a-tag a block element. You can put it by adding in css
a{ display:block; }
body { background-color: bisque;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
I have tried many styles to see what's wrong, but I can't seem to change the background color. This webpage works, but it's just plain. I am required to use CSS in order to compare both styles.
I copy and paste you're code and its working fine
i guess the problem is that you didn't refresh the page
try to do hard reload
CTRL+ F5 or in mac command+R
It actually does. I edited your question so it should be a snippet, and it worked in your source too. The only change I made was to change the p tag into div tag since p tag is meant for a paragraph, and what you wanted is a block.
Look how I changed the background color to blue:
body {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Reading</title>
</head>
<body>
<h1>
<button>Home</button>
<button>Reading<br/></button>
<button>Coffee</button>
</h1>
<div>
<h1>I usually drink three to four cups of coffee on weekdays</h1>
<img src="cof1.JPG" height="171" width="294"
alt="Coffee"/>
<img src="cof2.JPG" height="168" width="300"
alt="Coffee"/>
<h2>Some of my favorite coffees are: </h2>
<OL>
<LI> Cafe Crema</LI>
<LI>Yaucono</LI>
<LI>Arabigo</LI>
<LI>Cafe Lareño</LI>
<LI>Mami</LI>
</OL>
</div>
</body>
</html>
Maybe the page is not refreshing right
PRESS Ctrl + F5
body{
margin:0;
padding:0;
background-color:white;
font-family:sans-serif;
font-size:14px;
}
#wrapper{
margin-top:10px;
margin-bottom:50px;
margin-left:auto;
margin-right:auto;
width:550px;
}
<!DOCTYPE html>
<html>
<head>
<title>advanced website one</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="advanced1.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<img id="logo" src="images/logo.png" alt="logo image"/>
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<content>
<h2>About Blue Micro</h2>
<p>Blue Micro is meant for a site that doesn't necessarily need a huge amount of content. I've found that trying to put a small amount of text onto a large template ends up in a site that looks slightly off. So this template is for those that need a quick and simple site</p>
<h2>Titles are H1 Tags</h2>
<p>Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
<h2>Background Image</h2>
<p>I debated using a fancy background for this template, but ultimately just decided to keep it blank. I did however create all the images with Alpha transparency, which means that regardless of what background you choose, it will always look good. So keep it white, or experiment with it if you please.</p>
<h2>XHTML 1.1</h2>
<p>This template validates as XHTML 1.1 - this is to ensure it'll work for many years to come, and it makes it really easy for you to modify.
Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
</content>
<footer>
free xhtml template by web page designer
<!-- begin snippet: js hide: false console: true babel: false -->
</footer>
</div>
</body>
</html>
I want to do this "see border" border in css, its not that hard but i'm newbie at web development. This border is linear gradient and has radius and i think internal radius
here is the logo image logo image
border
.border {
float: left;
background-image: url(gradient_rectangle_back.png);
background-repeat: repeat-x;
background-color: #4586F1;
width: 547px;
margin-left: 14px;
clear: both;
margin: 0 auto 0 auto;
}
You also need to download this graphic
http://www.quackit.com/html/templates/download/bryantsmith/bluemicro/gradient_rectangle_back.png
The problem I am having with my website is that I am trying to make different sections of background colors on one page. I was able to get the main background color, but then I want a portion of the rest of the site to be another, and the footer to also be a different color. Here is the html code and css that I tried. I couldn't for the life of me figure out what I was doing wrong so if you know what I'm doing wrong that would help a ton! thanks!
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Travel</title>
</head>
<body bgcolor="#045889">
<table>
<tr>
<th><font color="white"><strong>Share Your Travels</strong>
</font> </header></th>
</table>
<table>
<td> <font color="white">Let Us Know Where You've Been</font></td>
</table>
<section>
<h2>Description</h2>
<p>
<i>Photo by Randy Connolly</i>
</p>
<p>
This photo of Conservatory Pond in
Central Park in
New York City
was taken on October 22, 2014 with a Cannon EOS 30D camera.
</p>
<p><img src="images_Travel/large-central-park.jpg" alt="Travel"/></p>
<p><i>Conservatory Pond in Central Park</i></p>
<p>
Share: <img src="images_Travel/social/email_16.png" alt="Travel"/>
<img src="images_Travel/social/rss_16.png" alt="Travel"/>
<img src="images_Travel/social/twitter_16.png" alt="Travel"/>
<img src="images_Travel/social/facebook_16.png" alt="Travel"/>
<img src="images_Travel/social/flickr_16.png" alt="Travel"/>
</p>
</section>
<h2>Related Photos</h2>
<p>
<img src="images_Travel/related-square1.jpg"alt="Travel"/>
<img src="images_Travel/related-square2.jpg"alt="Travel"/>
<img src="images_Travel/related-square3.jpg"alt="Travel"/>
</p>
<h2>Reviews</h2>
<p>
<i>by Ricardo on September 25th, 2015 </i>
</p>
<p>Easy on the HDR Buddy</p>
<p><i>by Susan on October 1, 2015</i>
</p>
<p>I Love Central Park.</p>
<footer>
Copyright ©
</footer>
</body>
</html>
CSS:
body {
background-color: #045889;
}
table{
font color= ''white'';
text-wrap: normal;
}
Ok, first off we need to clean up your HTML:
Tables are a Really Bad thing to use for formatting (almost always). Instead, it's best to use other html elements as appropriate. However, if you are going to use them make sure to put the <th> first (that's your Table Header), then <tr> (that's your Table Rows), then put <td> (your Table Data) inside of those as cells.
But a better solution than <table> is a <header> with <h1> and <h2> tags in it. Cleaner to style.
You need to double check that all of your opening tags have closing tags, and vice versa (see the </header> tag in your original code)
The font tag really isn't used anymore. Your CSS for the table shows that you can format that text color in a better way - we just have to get it to work!
I've also enclosed the rest of your content in another <section> tag so we can target that with CSS separate from the body.
Formatting your code can seem a bit of a waste of time, especially when you're just working on something for yourself, but it's REALLY helpful when you have a problem you can't sort out. Generally, you indent 1 tab/a few spaces each time you go a level deeper (nested) into the HTML. This makes it super easy to see when you've missed closing a tag.
<header>
<h1>Share Your Travels</h1>
<h2>Let Us Know Where You've Been</h2>
</header>
<section>
<h2>Description</h2>
<p>
<i>Photo by Randy Connolly</i>
</p>
<p>
This photo of Conservatory Pond in Central Park in New York City was taken on October 22, 2014 with a Cannon EOS 30D camera.
</p>
<p>
<img src="images_Travel/large-central-park.jpg" alt="Travel"/>
</p>
<p>
<i>Conservatory Pond in Central Park</i>
</p>
<p>
Share: <img src="images_Travel/social/email_16.png" alt="Travel"/>
<img src="images_Travel/social/rss_16.png" alt="Travel"/>
<img src="images_Travel/social/twitter_16.png" alt="Travel"/>
<img src="images_Travel/social/facebook_16.png" alt="Travel"/>
<img src="images_Travel/social/flickr_16.png" alt="Travel"/>
</p>
</section>
<section>
<h2>Related Photos</h2>
<p>
<img src="images_Travel/related-square1.jpg"alt="Travel"/>
<img src="images_Travel/related-square2.jpg"alt="Travel"/>
<img src="images_Travel/related-square3.jpg"alt="Travel"/>
</p>
<h2>Reviews</h2>
<p>
<i>by Ricardo on September 25th, 2015 </i>
</p>
<p>Easy on the HDR Buddy</p>
<p>
<i>by Susan on October 1, 2015</i>
</p>
<p>I Love Central Park.</p>
</section>
<footer>
Copyright ©
</footer>
For the CSS, there are a couple of fixes and some new styles
font color = ''white''; isn't proper CSS. It should be color: white; as is mentioned in the comments already.
To get the background color to change on elements, you just need to assign classes or ids to those elements, then style them appropriately (background-color: red; for example will do it).
That * is a wildcard: it applies the following styles to everything on the page. Needed to get rid of some default margins on the HTML elements
CSS:
* {
margin: 0;
}
body {
background-color: #045889;
}
header {
color: white;
background-color: green;
text-wrap: normal;
}
section {
background-color: yellow;
}
footer {
background-color: red;
}
In the parts where you want a different color, try adding a style
<footer style="background-color:green">
Copyright ©
</footer>
Your code has several errors, and you may want to have a look through it first. Here is a good tool to help you with that: W3C Markup Validator and CSS Validator
To change the background color of an element, simply use: background-color: followed by the color you want.
So for example, to change your footer to red, and your section to green, you can do:
footer {
background-color: #ff0000;
}
section {
background-color: #00ff00;
}
You can also use classes or ids' to mark sections of your page that you want to style. W3Schools - CSS Selectors