CODEWITHSUNDEEP
htmlcss
user1154644
user1154644

Reputation: 4609

CSS not applying to XHTML

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.

Upvotes: 0

Views: 289

Answers (6)

D&#243;nal
D&#243;nal

Reputation: 187499

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>

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46539

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%?

Upvotes: 4

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 4

Gimmy
Gimmy

Reputation: 3911

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>

Upvotes: 1

D&#233;j&#224; Bond
D&#233;j&#224; Bond

Reputation: 301

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>

Upvotes: 1

ccd580ac6753941c6f84fe2e19f229
ccd580ac6753941c6f84fe2e19f229

Reputation: 598

For classes 

.borderstyle

for ids

#borderstyle

tags 

div

type, name or any other attribute

[type="type"]

Upvotes: 0

Related Questions