How to add CSS to HTML code

**Cal-q-late** · Jul 30, 2012 10:50

Hello,

Click on the link below:

http://jsfiddle.net/dYxYs/ (Just hover over the "150x100" image).
This is what I need to happen with one of my images...
I have tried copying in the code from that jsfiddle page but I don't know where to put in the CSS.

How do I add that css into the html code?

Thanks alot

**Ryum** · Jul 30, 2012 15:17

CSS is separate from HTML. Specifically, what you want to do here, can't be done using only HTML. You either need:

a) A seperate "style.css"-file.
This is the best solution. Simply create a file named style.css, paste the CSS-code, and save it. You then need to link in it in your HTML-file.'

In the <head>-section of your page, add the following line:

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

b) A CSS-section of your HTML-file
You can also add CSS directly in your HTML-file.

<style type="text/css">
INSERT CSS CODE HERE
</style>

**ralph.m** · Jul 30, 2012 17:08

Hi Cal-q-late. Welcome to the forums.

Originally Posted by Ryum

b) A CSS-section of your HTML-file
You can also add CSS directly in your HTML-file.

Just to add, you place that code inside the <head> </head> section of your page:

Code:

<head>
  <style type="text/css">
      INSERT CSS CODE HERE
  </style>
</head>

**Cal-q-late** · Jul 31, 2012 11:23

"b) A CSS-section of your HTML-file
You can also add CSS directly in your HTML-file.

<style type="text/css">
INSERT CSS CODE HERE
</style>

So the code would look like this:

<html>
<body>
<div class="thumb">
<img src="http://mylink.com" />
<span class="text">my text</span>
</div>
<head>
<style type="text/css">
.thumb {
position: relative;
width: 150px;
height: 100px;
border: 2px dashed #444;
margin: 10px;
float: left
}
.text {
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #999;
background: rgba(0,0,0,0.3);
text-align: center
}
.thumb:hover .text {
display: block
}
</style>
</head>
</body>
</html>

Thanks alot!
Cal

**kohoutek** · Jul 31, 2012 11:42

No, if you want to have the CSS inside your HTML document (bad idea), then the proper way would be to do it like this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

     <title>My site title</title>

     <style type="text/css">

     /** == Add your CSS here == **/

     </style>

  </head>

  <body>

    <!-- Add your HTML markup here -->

  </body>

</html>

The inline CSS needs to be inside the <head> element whereas the HTML markup needs to be enclosed inside <body> element.

**Cal-q-late** · Jul 31, 2012 11:50

Hmmm... well all I want to do is have a text overlay on an image when you hover over it (like what happens on this link: http://jsfiddle.net/dYxYs/) If you can do this with HTML alone then that would be much better

**kohoutek** · Jul 31, 2012 11:54

No, I think you misunderstood.

What I meant with my "bad idea" comment was in regards to having your CSS inside your HTML document. You still need CSS but, as has been said by Ryum, it's better to have a separate stylesheet for it, simply because it's cleaner (separate markup (HTML) from presentation (CSS)) and because it's easier to maintain.

**Cal-q-late** · Jul 31, 2012 12:02

Okay, well, if there really is no other way to do it... the thing is, I really have no clue about how to create a CSS style sheet

How would I start the stylesheet? How would I include the stylesheet within the html code? something like "<a href="stylesheet.css>?

This is going to be on a website so the html is going to be inserted directly on a page (therefore it is not going to be a separate file)... the css obviously would be a file... where would I put it in the site files?

**kohoutek** · Jul 31, 2012 12:14

Your logic is correct, though the syntax is a bit different (see below).

If you use a separate stylesheet, then you need to host that stylesheet on your server. You could store it in the same directory where you have your HTML document, so your directory structure would look like:

- www/root/index.html
- www/root/main.css

Your CSS file ends with .css. You simply add the CSS into that stylesheet like you would add text to a text editor.

Contents of main.css:

Code css:

.thumb {
    position: relative;
    width: 150px;
    height: 100px;
    border: 2px dashed #444;
    margin: 10px;
    float: left
}
.text {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #999;
    background: rgba(0,0,0,0.3);
    text-align: center
}
.thumb:hover .text {
    display: block
}

The contents of your HTML file would be:

Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html> 
 
 <head> 
 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
  <title>My site title</title>
 
  <link rel="stylesheet" href="main.css" media="screen, projection">
 
 </head>
 
  <body> 
 
<div class="thumb">
    <img src="http://dummyimage.com/150x100/ccc/fff" />
    <span class="text">text text text text text text text</span>
  </div>
 
  <div class="thumb">
   <img src="http://dummyimage.com/150x100/ccc/fff" />
   <span class="text">text text text text text text text</span>
  </div>
 
</body>
 
</html>

In your HTML document's <head> you've now linked to the stylesheet.

So, you have two documents, your HTML document (.html) and your corresponding stylesheet (.css).

**Cal-q-late** · Jul 31, 2012 12:29

Okay thanks... I'll do my best to decode all that and I'll let you know if I have any more questions

Thanks

**dresden_phoenix** · Aug 2, 2012 14:52

Allow me to simplify:

First you have two OPTIONS for adding CSS:
1) LINK to an external .css file: <link rel="stylesheet" href="main.css" >
2) STYLE tags in your HTML document: <style type="text/css"> /** == Add your CSS here == **/</style>
Either way you need to put the link or style tag WITHIN THE HEAD tag of your HTML document
External CSS is far more efficient in the long run so the following applies to that method.

1) make a plain text file and save it with the suffix .css (eg.: main.css),
2) make sure this file is in the same folder as your HTML documents and WITHIN THE HEAD tag of your HTML document put: <link rel="stylesheet" href="main.css" >
3) create your CSS rules in the main.css. No need to worry about anything else.. just experiment with your CSS
example:
P{color:red; }/* will turn the text in all your paragraphs red*/
h1, div{color:green; }/* will turn the text in all your div AND you h1 tags green*/
.test{background: pink; }/* will add a pink bg to any element in your HTML file which has class="test"*/
#someID{background: pink;}/* will add a pink bg to any element in your HTML file which has id="someID"*/

That's it!
You need to make sure about are : that you have your link pointing to the right direction RELATIVE TO THE HTML DOCUMENT

if the CSS file (main.css) is in the same directory as the HTML document the HREF should be like : "main.css"
if the CSS file (main.css) is in a directory that's a direct child of the one that contains your HTML document the HREF should be like: "child_directory_name/main.css"
if the CSS file (main.css) is in a directory that's a child of the PARENT of the directory that contains your HTML document the HREF should be like: "../parent_directory_name/main.css"
and so forth...

The rest is just macing sure that you add the class="whatever" or id="whatever" to the targeted elements

Hope that helps

User Tag List

Thread: How to add CSS to HTML code

Thread Tools

Display

How to add CSS to HTML code

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions