Jump to content

Css And Linking To Your Content In The Html Document


v8n3t

Recommended Posts

Hello everyone,My question has to do with CSS.I have this very simplistic website www.iofreaks.com , and I am trying to apply CSS’s to it. So that way further down the road it will be easier to manage.Now my first question is this:Q.) When using CSS’s, do you create more than one CSS for the < head> ,< body> and < table>’s?The reason I ask this, is because I thought that using CSS’s intention is to enable to you alter large amounts of information from “ONE” or very few documents?My next question is this:Q.) When specifying the following:table.one {table-layout:fixed} How do you relate to “ table.one ” in your index.html? I know there has to be a way to link them together to apply what you have in the CSS document, but how do you do this? Do you use in index.html to relate to the CSS document? I am very confused on this.I would appreciate any help. I will also include what I have in my css1.css file at the bottom of this page.@charset "utf-8";/* CSS Document */body {background-color:#D5D5D5}table.one {table-layout:fixed}<table class="one" width="510" height="166" border="1" align="center" cellpadding="0">V/RRob

Link to comment
Share on other sites

if I'm reading this right sounds like it should all be very doable with CSSThe basic tutorial would explain most of thishttp://www.w3schools.com/Css/css_syntax.aspIf you go thru the first five pages you'll get the rough idea of how it works.a) Yes you only create one CSS document. Every page can just link to the same CSS document that way you don't have to have one CSS for your home page, one for your contact page, one for your details page. With CSS you make one .css page and everything points to it B)

How do you relate to " table.one " in your index.html?
http://www.w3schools.com/Css/css_syntax.aspcheck out "The class Selector"
Link to comment
Share on other sites

A Table on your page is an 'element'.Each element can be identified several ways in your CSS section, whether it is done in the 'head' section or by using a linked file.

table { boder:1px solid red; }// refers to all tablestable#one { border: 2px solid blue; } // refers to a table with id="one"table.one { border: 3px dotted green; } // refers to all tables with class="one"

Untested on a page, but the point is that css can target ALL elements of the type 'table' with the first rule.Or a specific table with an ID. Classed items can also be targeted and should be used when there might be more than one occurrence of that class on a page.Use Id if there will be only one on the page, class if there will be more than one. No class or id if you want it to affect all tables on the page.Clearer?

Link to comment
Share on other sites

Ok I wanna make sure I understand this.If I want to apply the set atributes to the table listed in my CSS, to all tables in my document I use no ID or Class.Now say I want to specify each table, I would use a Class correct? so that way I can have table.one through table.fifty correct?Or If I wanted to apply the settings in my CSS to just one table, I could use an ID?Can I use a Class and ID for just one? And Classes are better for multiple tables correct?Now lets put this into play. I wanted to make the table in the center of my website have a transparent background, so that way the background image shows through. I would use:table.one {table-layout:fixed} // This is in my CSS file<table class="one" border="1" width="100%"> // Use this in my index.html document<tr><td>My Information here</td></tr></table>Am I refering to the CSS correctly? And yes this is an external CSS so it would be incorperated into the <head>

Link to comment
Share on other sites

Yes, you seem to have a grasp of the concepts for class and ID. Now add the transparent background and you should be good to go. (having said that, I don't 'do' tables, so I have no clue whether the background-color can be transparent for them)

Link to comment
Share on other sites

For some reason the CSS is not working.in my index.html where I am linking the external css document, should it be like:A.) <link rel="stylesheet" type="text/css" href="css1.css" />ORB.) <link rel="stylesheet" type="text/css" href="/css/css1.css" />?I am confused because I think that the CSS file would be called from within the root folder. What I mean is, on my website I place my index.html in my root folder. Now if I make a folder under that, and I place any images or anything else in it it then becomes /whateverthefolderis/css1.css kind of like I am refering it to a external link.So I believe if I just refered to it as A.) then it would look in the root folder and apply the formating. Am I getting this wrong or no?

Link to comment
Share on other sites

You can make a path relative to the current file like this:folder1/file.cssOr relative to the root of the site, by adding a slash to it:/folder1/file.cssIt doesn't matter which method you use, as long as you can access the file. Any references to background images are relative to the location of the stylesheet, not the page.

Link to comment
Share on other sites

ok so if I put:

table.one {table-layout:fixed}

// This is inside the .CSS fileand then somewhere in the index.html I put:

<table class="one" border="1"><tr>  <td>My Content here</td></tr></table>

Then the table with the class would be formatted with whatever specifications I set in the CSS file correct? And does the table have to go in the body? I am new and very un-familiar with limitations on <tags>Thank you again.V/RRob

Link to comment
Share on other sites

ok so if I put:
table.one {table-layout:fixed}

// This is inside the .CSS fileand then somewhere in the index.html I put:

<table class="one" border="1"><tr>  <td>My Content here</td></tr></table>

Then the table with the class would be formatted with whatever specifications I set in the CSS file correct? And does the table have to go in the body? I am new and very un-familiar with limitations on <tags>Thank you again.V/RRob

As long as you load the CSS document correctly, it will work on the elements of the HTML document.Everything that will be displayed goes between <body> tags. Other things, like document information and links to stylesheets, go in the <head> section.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...