SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to add CSS to HTML code

    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

  2. #2
    SitePoint Member Ryum's Avatar
    Join Date
    Jul 2012
    Location
    Oslo, Norway
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Cal-q-late. Welcome to the forums.

    Quote Originally Posted by Ryum View Post
    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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "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

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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).
    Maleika E. A. | Rockatee | Twitter | Dribbble



  10. #10
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay thanks... I'll do my best to decode all that and I'll let you know if I have any more questions Thanks

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •