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.
Related
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.
Here is my HTML and CSS , the h1 title appears in blue , and not in red , and i don't know why ? and how to fix it ? thanks a lot
<!doctype html>
<h1>les planètes du système solaire <h1>
<h1><style type='text/css'>
body{
color:red;
background-color: black}
</style><h1>
<img src ='https://(jpeg link ....)'>
<h2>comme nous pouvons le constater<h2>
<h2><style type='text/css'>
body{
color:blue;
background-color:black}
</style><h2>
<h1 style="color: red;">My Heading</h1>
It's because you shouldn't declare your styling per heading element, but preferably one time only.
You only need to declare a heading element (like <h1> or <h2>) once and close the tag as well. Here is the updated code where I added a <style> block at the top, so it's applicable for all the elements declared in the HTML file.
Please read more about document and website structure at MDN.
<!doctype html>
<style type='text/css'>
body {
background-color: black
}
h1 {
color: red;
}
h2 {
color: blue;
}
</style>
<h1>les planètes du système solaire</h1>
<img src='https://(jpeg link ....)'>
<h2>comme nous pouvons le constater</h2>
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...).
I have some text and would like to make it more narrow so it doesn't span right across the screen. I have typed:
<body style="margin:20">
<body>
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
<body/>
However it doesn't seem to be doing anything to the text. Do I need to close my body style tag? Is margin the correct operator to use? (I am a very beginner, this is literally the first time trying HTML)
The basic syntax of an HTML page is
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
There is only one body for HTML.
So use div, span, p tags within the body for wrapping your content.
<body style="margin:20"> is bad code
Try <body style="margin:20px"> or <body style="margin:1%">
body {
margin: 20px;
}
<div>
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
</div>
add css on your html,
<style>
body {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
Without css just add style property on your body tag,
<body style="margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;">
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
</body>
Remove second <body> tag
Add unit to margin (i.e. px)
<body style="margin:20px">
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
<body/>
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: