Importing .css into html document

Question

I'm learning CSS/HTML and am trying to import a simple css class into the html document, but something appears to have gone awry. Here is Logo.css:

.logo{
  color:rgb(255,232,57);
  background-color:rgb(0,0,75);
  font:ChopinScript;
  font-size:96pt;
}

and my html document:

<head>
  <link rel="stylesheet" href="Logo.css" type="text/css">
</head>

<div class="logo">
  <p class="logo">This text should look like my logo!</p>
</div>
<img src="404-tumblebeast.jpeg" align=center valign=center />

The image shows up fine in Safari, but the text is just generic text. Does the link tag not import as I thought? How would I do the equivalent of #import or #include, if isn't taking care of that?

Does the bg color change correctly? Or does it just not load your css at all? — Jonas m
– Jonas m, Commented Oct 15, 2011 at 16:47
nothing happens at all! Well the picture shows up and the text does, but nothing from my .css — Chris
– Chris, Commented Oct 15, 2011 at 16:54
Does your file exist? Is it served with the right mime-type (text/css)? — Rob W
– Rob W, Commented Oct 15, 2011 at 16:56
First chunk of code was Logo.css, second was 404.html (which is what I'm running in Safari — Chris
– Chris, Commented Oct 15, 2011 at 16:57
@RobW Explain the second part. If the code I put above is all that is in Logo.css, do I need to specify what type it is? the .logo class obviously refers to text — Chris
– Chris, Commented Oct 15, 2011 at 16:59

DwB · Accepted Answer · 2011-10-16 16:03:03Z

2

end the link tag (see below: the /> instead of >).

<link rel="stylesheet" href="Logo.css" type="text/css"/>

Verify that the Logo.css is in the same directory as the html file or use the correct path to the Logo.css file. Just in case you are doing this, you can't put the css under the WEB-INF directory.

You only need the class on the div element or on the p element, not both.

Edit: I was poking around and found some info about embedding fonts in a page: http://jonrohan.me/guide/css/font-face/

edited Oct 16, 2011 at 16:03

answered Oct 15, 2011 at 16:52

DwB

38.6k11 gold badges62 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Chris Over a year ago

Okay I deleted the class from the p element and added the end of the link tag but we are still rocking the default font/color/white background.

Chris Over a year ago

Yes they are sitting right next to each other in the same folder.

Chris Over a year ago

I'm a liar. One was created in another folder. So it now gets the colors and the size correct but not the font

DwB Over a year ago

Put the font inline (in the HTML page) to confirm that it works.

Chris Over a year ago

<p font=ChopinScript>This text should look like my logo!</p> did not change the font :(

|

Collectives™ on Stack Overflow

Importing .css into html document

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related