Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Hey I am new to HTML AND CSS and I was wondering how one would use HTML AND CSS to create a good stand out header on a website something with a different background to the rest of the page is this possible
So if this is a dumb question
thks
Something Like this,
<!DOCTYPE html>
<html>
<head>
<title>Styling the article element</title>
<script>document.createElement("mHeader")</script>
<style>
Header {
display:block;
background-color:#ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>My first paragraph.</p>
<Header>My First Hero</Header>
</body>
</html>
In your css file, just define a style for the h1 tag. (There are also H2 - H6 if you need them)
h1 {font-weight:bold; background-color:Yellow; ... }
Update with your own colors.
h1 { padding: .5em 1em ; background: #333; color: #fff; overflow: hidden; }
<h1>Title</h1>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I have an HTML section that I am trying to alter with CSS:
<section class="jumbo">
<div class="container">
<h1>THIS IS THE TEXT CONTAINED WITHIN THE JUMBO</h1>
</div>
</section>
However the changes I make in my CSS file, such as changing the color of the text contained in the element are not having any affect:
#jumbo {
background-image: url("../images/carbon.jpeg");
background-position: center center;
min-height: 200px;
text-align: center;
}
#jumbo h1 {
color: white;
font-size: 45px;
padding-top: 15px;
line-height: 1.6em;
}
Do you have any tips for how I can debug an issue like this?
You have to use .jumbo.
More about CSS selectors: https://www.w3schools.com/cssref/css_selectors.asp
#jumbo is an id selector
you should use a class selector
.jumbo and .jumbo h1
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
This is very dumb question. But I do not know how to solve the issue.
I have the following html/css code
<!DOCTYPE html>
<html>
<head>
<title>Selectors and Grouping</title>
<style type=”text/css”>
p {
font-family: Arial;
font-size: 14pt;
}
h1 {
color: black;
border: 5px solid black;
}
h2 {
color: orange;
border: 4px solid orange;
}
h3 {
color: blue;
border: 3px solid blue;
}
h1,
h2,
h3 {
letter-spacing: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h1>
Heading 1
</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<p> Selectors choose the element to apply formatting to. grouped together.
</p>
</body>
</html>
html headings must be enclosed in boxes and have different colours. However, when I open the document in Firefox browser it displays the page without any style applied. Online validators point to no error. So the issue must be related to firefox. Can anybody help me?
Thanks in advance.
The issue comes from this part :
<style type=”text/css”>
Your quotes are not the good ones. Use :
<style type='text/css'>
You have following errors :
1) There were incorrect quotes in <style type=”text/css”>. Change it to proper double quote:
<style type="text/css">
2) You are missing one < in doctype declaration as per above code you have mentioned in question.
3) You haven't closed the <html> tag
look at your style tag :
<style type=”text/css”>
change to normal double quote
<style type="text/css">
and close you html tag at the end
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I'm a newbie to html and CSS, and I've been trying to style my paragraph to have 5px of padding on each side of the text, but whenever I add "padding: 5px;" it gets rid of the background colour (of the paragraph), and the padding makes no effect. I've tried with just the padding and that doesn't work either. Thank you in advance!
HTML and CSS for reference:
body {
background-color: #000000;
font-family: arial;
color: white;
}
a {
color: orange;
}
p {
background-color: #393939
padding: 5px;
}
<!doctype html>
<html>
<head>
<title>spam</title>
</head>
<body>
<link rel = "stylesheet" href="main.css">
<img src = "">
<h1><strong>Website name</strong></h1>
<ul>
Home
News
</ul>
<p>
Man stabbed in ...
</p>
</body>
</html>
In CSS you need to end each property you add with a ; so simply change the code to:
p {
background-color: #393939;
padding: 5px;
}
Not having the ; to show that a property ended meant the browser read the CSS as one big property that doesn't exist, which is why it seemed like your CSS did nothing.
You are missing the ; after background-color: #393939
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have just started learning html and css.
While reading a tutorial from a book I saw how to change the styles
I wrote the same code but there is no effect on the page in the browser.
It appears just the same as without the <style> tag.
Here's the code:
<title> Starbuzz Coffee </title>
<style type=”text/css”>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
Change <style type=”text/css”> to <style type="text/css">.
The key problem here is with your quote. I've just tested using ” which didn't work in my local project.
Your quotation marks are the issue, you need to use " instead of ”
Like this:
<style type="text/css">
Also, lets go to the next level too. Adding styles in the HTML head is ok, but you will find it a lot easier to maintain your HTML and CSS code in the future if you link to a separate stylesheet. To do that, just add the following to your HTML head:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
In this case your stylesheet is called 'mystyle.css' and is located in the same folder as your HTML page...
You can now add all of your CSS goodness into the 'mystyle.css' file like this:
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
Read more about this on W3 Schools.
You can try couple of thing to test
Open a debugger window by pressing F12 and find body tag to see what has overwritten it.
Try inline style on a body tag and see does that make a difference
Change the order of a CSS on your page.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I wrote code.
I can't fill in the blanks in my code.
Why I can't do it?
...
<style type="text/css">
...
#content
{
margin: 0px;
padding: 0px;
width: 100%;
background-color: black;
color: white;
}
...
<div id="content">
AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>AAAAAAAAA<br>
</div>
My site's address is http://www.clover.lrv.jp.
This is due to a browser pre-set margin. Put this at the top of your code, it will reset the margins and padding:
*{margin: 0; padding: 0;}
You need to define your height as well. Note don't add height in percent here. For eg. add this line: height: 200px; in your #content.