I'm taking a beginner web development class and the assignment I'm working on is asking me to recreate a markup for a page. I am given a .html file and I am only allowed to make changes using CSS. The goal of the assignment is to make the .HTML file I'm given look exactly like the markup.
My issue is that there are 2 h1/h2 tags, one pair is in the header and one is in the main. I want to make an alteration to the first pair of h1/h2 tags that are in the header. For some reason, both pairs are inside of the header tag and I don't know how to change that through CSS.
in the provided screenshot the markup is on the left and my progress is on the right.[ https://www.dropbox.com/s/ghdl3p1n311vs4q/Screenshot%202020-05-17%2017.28.40.png?dl=0 ]
Can someone please explain why both tags are affected by the header even though only one pair resides there? as well explanation of how to alter just one pair?
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href= "reset.css" rel = "stylesheet" />
<link href= "hw2-problem2.css" rel = "Stylesheet" >
<meta charset="utf-8">
<title>Art Store</title>
<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>Art Store</h1>
<h2>Super cool tagline will go here</h2>
</header>
<main>
<h2>Still waiting</h2>
<p id="announcement">Our website will be live in</p>
<p id="timeline">4 years, 3 months, and 2 days<sup>*</sup></p>
<p id="footnote"><sup>*</sup>hopefully</p>
</main>
<footer>
<h2>Recent Acquisitions</h2>
<div>
<img src="images/07020.jpg" alt="Liberty Leading the People">
<img src="images/05030.jpg" alt="The Death of Marat">
<img src="images/106020.jpg" alt="Girl with a Pearl Earring">
</div>
</footer>
</body>
</html>
CSS Code:
body {
background-image: url("images/art-background4.jpg");
background-size: 100% 100%;
padding: 12.55em 6.27em;
margin: 6.27;
}
header{
position:absolute;
top:2em;
left:2em;
padding: 2em;
background-color: hsla(0, 0%, 0%, 0.473);
}
h1{
font-size: 6em;
color: white;
margin-bottom: 2em;
}
h2{
margin: 2em;
}
h1 selector refers to all h1 tags on your site.
When you want to refer to h1 tags inside header you write:
header h1 {
/* CSS properties */
}
You can change the header h1/h2 with the following CSS selectors.
header > h1 {
/* Put your styles here */
}
header > h2 {
/* Put your styles here */
}
You may learn more about CSS selectors at w3schools.
Related
I'm trying to add a background color to my header but it's not adding it when i have it written in the css file.
HTML Code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="CSSPage.css">
</head>
<!--
<style media="screen">
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
</style>
-->
<header id="background-color">
<hr>
<p>Sample</p>
<hr>
</header>
</html>
CSS Code: CSSPage.css
#background-color {
background-color: hsl(120, 1%, 79%);
padding-top: 20px;
padding-bottom: 20px;
}
It only works when it's on HTML but not when it's on the css file.
I've also tried adding !important but it didn't do anything.
The rest of the styles for other id works except this one.
Just change style class(#background-color{...}) as well as id to some other name if possible (other than background-color) and try.
I'm an idiot. Apparently the CSS file doesn't get applied even if you add new things to it if you don't manually save. I'm sorry for wasting everyone's time. It works now. Thank you for pointing me into JsFiddle's direction. Since it worked perfectly there.
So I am having an issue with setting up my styles.css file and attaching it to my index.html file.
For some reason the body in the css file is overriding the h1 css.
Here's the code, and sorry if there's any glaring mistakes. I am brand new to this stuff.
h1 {
font-style: Georgia;
font-size: 48px;
color: red:
}
body {
font-style: Georgia;
font-size: 14px;
}
and my html index
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<head>
<title>rdhamill's personal github page. </title>
</head>
<h1> Github.io page for Rdhamill </h1>
<body>
This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.
</body>
</html>
Edit: thanks for the help and sorry for the obvious issues!
Firstly, your h1 tag is outside the body, put that inside.
And in addition to that put the link tag inside the head tag.
And in addition to that remove : from the end of the color attribute in h1 style.
All your elements need to be inside the head or body tags. See the snippet below to see where your elements belong. The text inside the p tag is just to clean it up a bit.
edit: as per Dude Coder's above comment, fixed the CSS declaration. Make sure they always end in semi-colons, instead of colons.
Also changed font-style to font-family, which only needs to be set on the body (in this case, as all descendants will inherit it until it's changed elsewhere).
h1 {
font-size: 48px;
color: red;
}
body {
font-family: Georgia;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<title>rdhamill's personal github page. </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Github.io page for Rdhamill </h1>
<p>This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.</p>
</body>
</html>
Your HTML is too complex for an old browser to understand and render correctly. <h1> should be placed inside <body>. <link> should be placed inside <head>. Your CSS also has a typographical error. Either drop the final colon in color: red or type a semicolon; a colon won't work.
Back to the main subject:
The browser (a modern one) automatically places <h1> inside <body> and <link> inside <head>. And according to W3C, when you define the same style for an element and its child, the style defined for the child has priority over that defined for the parent element. Therefore, your body rule is not overriding h1. The problem is typographical: you typed a : instead of a ;
h1 {
font-family: Georgia;
font-size: 48px;
color: red;
}
body {
font-family: Georgia;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<title>rdhamill's personal github page. </title>
</head>
<body>
<h1> Github.io page for Rdhamill </h1>
This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.
</body>
</html>
One a side note: I replaced font-style with font-family. To specify the font, use font-family. font-style is used for enhancements (italic, underline, etc...).
Just started out with CSS and I'm currently trying to replicate a website based of a JPEG and the HTML-code for the gives site. I have a problem when it comes to the Header of the page and can't figure out how it's suppose to work.
The extract of the HTML code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>
</title>
</head>
<body>
<header id="overskrift">
<h1>Informatikeren</h1>
<br>
Din største kilde til nyheter som allerede er skrevet på online.ntnu.no
</header>
And the CSS I currently have is:
#overskrift {
background-color: black;
color: white;
text-align: center;
height: 100px;
display: block;
}
With my CSS it currently looks like this:
Using my CSS
This is how it's supposed to look: The finished result
The font layout is not of importance and sorry for the text being in Norwegian.
Have tried using several different line heights etc, but that seems to make it worse.
Anyone got a good idea of how to code it correctly in the CSS? Altering the HTML isn't and option.
Thanks!
Regards,
Your HTML should not contain a <br>. In addition to that you want to remove some of your CSS and add a global reset for margin and padding.
Note: For the example below, since you said changing the HTML was not an option, I’ve left the <br> in and am negating it with CSS. Again your HTML should not contain a <br> for this kind of UI.
* { margin:0; padding:0 }
#overskrift {
background-color: black;
color: white;
text-align: center;
}
br {
display: none;
}
<header id="overskrift">
<h1>Informatikeren</h1>
<br>
Din største kilde til nyheter som allerede er skrevet på online.ntnu.no
</header>
You will need to apply styles to the H1 element directly. For example:
#overskrift h1 {
font-family: Arial,sans-serif;
font-size: 20px;
}
You might also declare "line-height" and "letter-spacing" properties to further style your text to match.
For some crazy reason my body tag is not working at all. It is the only CSS that isn't working. I am trying to have a background behind the content of my website and have the content be about 80% of the body. So that I can have two bars on either side of my website which kind of acts as a border. Kind of how there seems to be two white bars on either side of stack overflow.
<style type="text/css">
body{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000;
margin: 0;
padding: 0;
color: #000;
}
#content {
font: 14px/1.4 'Times New Roman', sans-serif;
width: 80%;
max-width:1260px;
min-width: 780px;
background-color: #89837A;
margin-left: auto;
margin-right: auto;
}
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<!--Replace link with good web font you want.<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' /> - See more at: http://www.newthinktank.com/2011/09/how-to-layout-a-website/#sthash.lWAaNgcS.dpuf -->
<link rel="stylesheet" type="text/css" href="CPLS_Stylesheet.css">
<!--<div class='error' style='display:none'>Event Created</div>-->
<title>MyWebsite</title>
</head>
<body>
<div id="content">
HEADER
<div id="contentBackground">
CONTENT
</div><!--End of contentBackground-->
</div> <!--End of content-->
</body>
</html>
No matter what color I change the body tag to the background always stays white. The content is the correct color.
Don't put style link at the top of the some other link. that's why body design is not working. Put style link under the all the link
Is this: <style type="text/css"> in your CSS or is that just a mistake?
Unless that's an accident when your wrote that code, that's not valid CSS. The only time that's allowed is using the style tags within a HTML document to wrap CSS code.
Okay:
index.html
<style>
body {
background-color: white;
}
</style>
Not okay:
style.css
<style>
body {
background-color: white;
}
Since there's no closing tag, it looks like you accidentally copied that from a tutorial using the <style> tag inside a HTML document.
If you are using some kind of CSS framework make sure you place your custom CSS files, at last, the same thing happened with me I adjusted the order of the files that I
was including and it worked fine.
I don't know the exact reason why this problem is occurring.
The same problem has been occurred to me. However, I tackled it by using !important after the property in body in CSS file.
e.g. body{ background:black !important;}
If you found the actual reason do share it with me.
I know this was asked long ago but here is one solution. Put your css file link as the last one in the part of your html.
I know this was asked long ago, but I have just had the exact same issue.
Add a fake element style in your stylesheet before the body.
e.g.
#myFakeElement { color:red ; }
body{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000;
margin: 0;
padding: 0;
color: #000;
}
Remove from the style sheet....
I just copied the code to my editor and it worked:
I am learning CSS/XHTML. I have a stylesheet defined externally, and am trying to use it in my HTML file.
The contents of the .css file are simply:
borderstyle {
font-family:"Times New Roman", Times, serif;
font-size: 20%;
font-style:normal;
border: blue dotted medium;
display: inline;
}
Here is where I am attempting to use it in my HTML:
<body>
<link rel="stylesheet" type="text/css" href="myCSS.css" />
<center>
<div class ="borderStyle">
Welcome
</div>
</center>
</body>
The Welcome text is appearing centered, but with normal formatting, and no border.
Update: This is an XHTML file, I forgot to mention that.
borderstyle is a class, not an element, the selector should be prepended by a period, use:
.borderstyle {
/* CSS here */
}
Further, I'd suggest wrapping the Times New Roman font-name with quotes ('Times New Roman'), and center is deprecated, use CSS auto for the left, and right, margins, or text-align: center; on the parent element, as you've assigned display: inline.
The other answers are all valid. You should correct all the errors they mention.
But there is one additional error that hasn't been mentioned: the class name, "borderStyle". If you target that with CSS, you should use the same casing. I.E. .borderStyle rather than .borderstyle.
Summary of the other errors, for completeness:
borderstyle in the css needs a period
The <link> element should be in the head
<center> shouldn't be used
In addition, I'd say 20% for a font size is awfully small. On most browsers, this amounts to about 3px. Did you mean 200%?
add . befor class and center the text through css, and add style link in head area
.borderstyle {
font-family:"Times New Roman, Times, serif";
font-size: 20%;
font-style:normal;
border: blue dotted medium;
display: inline;
text-align: center;
}
and this the html without center tag and still the text centered
<head>
<link rel="stylesheet" type="text/css" href="myCSS.css" />
<head>
<body>
<div class ="borderStyle">
Welcome
</div>
</body>
Link to CSS file should be put in the head section, not in the body.
Ex:
<html>
<head>
<title> title
</title>
<link rel="stylesheet" type="text/css" href="myCSS.css" />
</head>
<body>
</body>
</html>
You're missing a . in the selector of your CSS rule and the class name should be spelled borderStyle rather than borderstyle in order to match the class name in the HTML. Try this instead:
.borderStyle {
font-family:"Times New Roman", Times, serif;
font-size: 20%;
font-style:normal;
border: blue dotted medium;
display: inline;
}
Also, you should move the link to your CSS file into the <head> section of the webpage, e.g.
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCSS.css" />
</head>
<body>
<!-- body content omitted for brevity -->
</body>
</html>
For classes
.borderstyle
for ids
#borderstyle
tags
div
type, name or any other attribute
[type="type"]