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"]
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.
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...).
Some letters occupy free space on the left. You can see it by highlighting the first letter "H" after running the snippet.
There is the same margin and padding in both header and paragraph elements, however the header is visibly shifted to the right, due to larger amount of empty space which its letter "H" occupies on the left due to its size, compared to letter "H" of the paragraph.
Is there any way to avoid such shift, except by playing with paddings for each case manually?
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<style>
body {
font-family: Open Sans;
}
</style>
</head>
<body>
<h1>Header</h1>
<p>Hilariously small paragraph.</p>
</body>
That's normal behaviour, but if it really disturbs you that much, you can use a negative text-indent on the h1 element, which will move the whole text a bit to the left:
h1 {
text-indent: -0.05em;
}
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<style>
body {
font-family: Open Sans;
}
</style>
</head>
<body>
<h1>Header</h1>
<p>Hilariously small paragraph.</p>
</body>
There's not really much you can do about that. It will depend on the font you're using.
You'd just have to manually add a 2px padding or move the elements in some other way I suppose.
p {
padding-left: 2px;
}
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:
So this is a weird one, I'm getting a small margin at the very top of my page even though I've applied the standard CSS reset. If I open the inspector in Chrome / Firefox / or even gasp IE, I see that the body is reading my margin:0 reset, but still adding a gap regardless.
Gap:
Chrome Web Inspector that shows margin:0 is being honord:
So, the super duper weird part here is that if throw an important like margin: 0 !important; , the gap goes away. I've used this exact template set up many many times without issue. Hopefully someone sees something that is eluding me right now.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/css/Reset.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/Site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.9.0.js"></script>
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript">var base_url = 'http://localhost:64789/';</script>
</head>
<body>
<div id="wrap">
<h2>Index</h2>
</div>
</body>
</html>
CSS
Note: Site.css is an empty file at this point, as I just started this project.
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form {
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
a {
text-decoration: none;
}
* {
font-family: 'Ubuntu', sans-serif;
}
body {
background: #f0f6e8 url(../images/gradbackground.jpg) repeat-x 0 top;
}
#wrap {
width: 100%;
background: transparent url(../images/leaves.jpg) no-repeat center top;
}
The margin is on the <h2>, not the <body>. There must be some other selector for h2 that is adding the additional top margin. In your own Site.css styles, include margin-top: 0 for the h2
Bootstrap is probably overriding it from another element. Check the elements it is nested in for margin being set in main.css.