How to add CSS to HTML code

Cal_q_late · July 30, 2012, 5:50pm

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 · July 30, 2012, 10:17pm

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:

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

ralphm · July 31, 2012, 12:08am

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

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

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

Cal_q_late · July 31, 2012, 6:23pm

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

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 · July 31, 2012, 6:42pm

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:


<!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 · July 31, 2012, 6:50pm

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 · July 31, 2012, 6:54pm

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 · July 31, 2012, 7:02pm

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 · July 31, 2012, 7:14pm

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:

[FONT=courier new]- www/root/index.html

www/root/main.css[/FONT]

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:


.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:


<!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 · July 31, 2012, 7:29pm

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 · August 2, 2012, 9:52pm

Allow me to simplify:

First you have two OPTIONS for adding CSS:

LINK to an external .css file: <link rel=“stylesheet” href=“main.css” >
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.
make a plain text file and save it with the suffix .css (eg.: main.css),
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” >
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

anilvermasblog · October 7, 2014, 10:11am

I do agree with Ryum.

There are 3 different ways to add CSS to any HTML document.
1). In-line
2). Internal or Embedded
3). External or Link a CSS File or Import a CSS File