CSS not applying to XHTML
Question
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.
6 answers
solution1
4 2013-06-16 16:27:49
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 .
solution2
4 2013-06-16 16:47:35
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. IE .borderStyle rather than .borderstyle .
Summary of the other errors, for completeness:
-
borderstylein 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%?
solution3
1 2013-06-16 16:28:26
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, eg
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCSS.css" />
</head>
<body>
<!-- body content omitted for brevity -->
</body>
</html>
solution4
1 2013-06-16 16:30:10
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>
solution5
1 2013-06-16 16:30:25
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>
solution6
0 2013-06-16 16:28:10
For classes
.borderstyle
for ids
#borderstyle
tags
div
type, name or any other attribute
[type="type"]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.