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...).
Related
Currently having an issue using a .css file in combination with an html script. Currently my index.html looks like the following:
<!DOCTYPE html>
<html>
<head>
<title>Bellamy Terminal</title>
<link rel = "stylesheet" type = "text/css" href = "../CSS/style.css">
</head>
<body class="css-theme">
<h1><strong>Bellamy Terminal</strong></h1>
</body>
</html>
To follow that up, in another directory/folder I have labeled CSS the following css script follows:
/* Theme of Site */
.css-theme {
color: lime;
background-color: black;
font-family: Lucida Sans Typewriter;
}
/* Theme of Site End */
h1 {
text-align: center;
}
The main issue is that my h1 element will not center which is a "wonderful" start for the beginning of my site lol. Would appreciate some help! Im using firefox
There is no float: center; - use text-align: center instead. And use h1 in the selector, not .h1 - that's not a class. So your complete rule is:
h1 {
text-align: center;
}
And another note: You don't have a class called css-theme anywhere in your HTML code, so you can't expect that rule to be applied anywhere.
ADDITIONS:
1.) There might additionally be a filepath issue (in the link to the stylesheet), but without knowing your file structure it's impossible to give you exact instructions for that. You might try href = ../CSS/style.css (note the two dots before the first slash), but that's just a guess.
2.) Your <style> and <title> tags should be wrapped in a <head> tag (which usually contains more than that), and the <link> tag should not be inside a <style> tag to make that valid HTML code.
First, the doctype should have the bang (!) before the word doctype.
Next, the link element does belong in the head, but not inside of style.
Also, while it's ok to add class to the body element, you can achieve the same result by setting up a CSS selector for body and eliminate the class from the HTML, which is generally preferred so that the HTML is less cluttered.
Additionally, strong is meant to convey importance semantically and usually causes the element it's used with to appear bolded. If all you are after is the bolding, strong isn't needed here because all heading elements will be bolded by default.
And, if you preface a relative URL with /, it will always look for the that resource at the root of your site, which may or may not be what you want. If the CSS folder is a child of the current page, don't preface the URL with /, just say the name of your folder as in: CSS/style.css.
/* Theme of Site */
/* If you make a tag selector, you don't have to add a class to the element */
body {
color: lime;
background-color: black;
font-family: Lucida Sans Typewriter;
}
/* Theme of Site End */
h1 {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Bellamy Terminal</title>
<link rel = "stylesheet" type = "text/css" href = "/CSS/style.css">
</head>
<body>
<h1>Bellamy Terminal</h1>
</body>
</html>
I have this very simple file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>We're learning selectors!</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 id="yay">Yay</h1>
<body>
</html>
While the stylesheet is style.css
h1 {
.color: blue;
.font-style: italic;
}
Both the files are in same directory but still it doesnt work. Tried all browsers. But when I open dev-tools in chrome , i can change the color to blue shade under the "style-section"
h1 {
color: rgb(0, 15, 173);
}
But then why isnt the style.css getting loaded, while Im using the same correct code as above.
Already referred to CSS not working in stylesheet didnt help either
Just remove the "." from your style style.css ie
h1 {
color: blue;
font-style: italic;
}
You are defining css attributes as class names.
Ur code:
h1 {
.color: blue;
.font-style: italic;
}
How it should be:
h1{
color:blue;
font-style: italic;
}
The dott, which you used infront of the css attributes does just get used with classnames. For example:
Html:
<div class="ClassName"></div>
<div id="ClassName"></div>
CSS:
.ClassName{
font-size:12px;
}
#ClassName{
font-size:12px;
}
<!-- #className = div id -->
<!-- .className = div class -->
I'll give a tip how to divide and conquer problems like this:
First, you need to validate if the script is loaded at all. Trust me, if you're gonna do JavaScript, you'll need to narrow down your possible errors. A great tool for narrowing down could be Chrome's developer-tap, and check the console. It will tell, if a file was not loaded (if the path was incorrect or alike).
Second, validate your CSS! If you know the stylesheet is loaded, validate if the CSS is typed correctly. You could use a tool like CSSlint.
And.. That's about it - now you know that you're CSS is loaded AND that it's typed correctly. Displayed correctly is a whole other concern which I won't touch upon here.
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"]
Event after a CSS reset, I've found that IE is apparently attaching a some default styling to the SUP tag. In the following example, the SUP tag is still slightly smaller than the styled SPAN tag. does anyone know a tweak for this?
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"/>
<style type="text/css">
sup { font-size: 16px; vertical-align: super; }
.trademark { font-size: 16px; vertical-align: super; }
</style>
</head>
<body>
<h1>This is a <sup>®</sup> test</h1>
<h1>This is a <span class="trademark">®</span> test</h1>
</body>
</html>
http://jsfiddle.net/utwSv/
You should get in habit of give percentage size to fonts, expecially after using a CSS reset which sets fonts size in percentage.
In the example above, it works ok for me if I set a font-size of 120% for sub elements. But after that I also changed the size of the h1 tags. If I use a fixed font-size in pixels, the sub element still presents a smaller font. Instead, if I set it in a percentage value it will display correctly.
Note I also included YUI reset for CSS Fonts.