Jump to content

Little confused about css


xoligy

Recommended Posts

Ok ive been having a look arounf at 2col layouts and i see how there coded etc etc and think ok i can learn that no problem!

 

Anyway here is my confusion, do i need the css on EVERY page or can i have one page and then call the pages tha i require? and it opens in the content area? Or is that still limited to the sexy tables.. yes im css noob  :shrug:

Link to comment
Share on other sites

you can create one single external css stylesheet and then between the <head></head> tags on every page you can mention it

 

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

 

after this you can call and apply the classes that you created in your stylesheet to the element you need styled.

 

vineet

Link to comment
Share on other sites

Yeh i understand that but this is what i mean below is the code im considering using which is from http://www.maxdesign.com.au now do i need to repeat that on to every page then insert my data into the "content-container" everytime, or is there a way for my main content to appear there somehow when the appropiate link is clicked? thats whats confusing me sorry. The site will be php and css hopefully, just getting fed up of a white page with all data lol

<div id="container">
<div id="header">
	<h1>
		Site name
	</h1>
</div>
<div id="navigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact us</a></li>
	</ul>
</div>
<div id="content-container">
	<div id="content">
		<h2>
			Page heading
		</h2>
		<p>
			Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		</p>
		<p>
			Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
		</p>
		<p>
			Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
		</p>
	</div>
	<div id="aside">
		<h3>
			Aside heading
		</h3>
		<p>
			Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
		</p>
	</div>
	<div id="footer">
		Copyright © Site name, 20XX
	</div>
</div>
</div>

Link to comment
Share on other sites

I'f you like php. There are lots of ways to minimize your css. Build one header and one footer. Fore example you can use a switch statment to get the content of your page. You can break up the css in multiple css files for the content.

Your code looks better and is more practical.

Hope it helps. :)

Link to comment
Share on other sites

HTML = HTML. CSS = CSS. They are very different things.

 

HTML looks like this:

 

<a>
<div>
<span>
<p>
<acronym>
...

 

If it's surrounded by < and >, it's *probably* (X)HTML (there are exceptions).

 

CSS looks like this:

 

div#footer
{
   // some stuff
}
a.top
{
  // some stuff
}

del
{
  // some stuff
}

 

If you see a bunch of # marks, periods, and stuff surrounded by { and }, it's *probably* CSS.

 

They do different things. HTML creates elements and CSS affects how those elements look, and where they are placed.

Link to comment
Share on other sites

I'f you like php. There are lots of ways to minimize your css. Build one header and one footer. Fore example you can use a switch statment to get the content of your page. You can break up the css in multiple css files for the content.

Your code looks better and is more practical.

Hope it helps. :)

 

Thanks for that will look it up.

 

@Haku, like i said i thought a div would class as a css question.

Divs are more or less useless without any css! What would be the point in me using div tags without any css? answer... there would be no use!

Link to comment
Share on other sites

The CSS rules dictate how the HTML tags will look to the viewer.

 

<div class="header">Blah Blah</div>

 

The class="header" references your CSS file for how wide, how tall, background colors, fonts, placement, etc. that you dictated in your CSS file:

 

.header {

width: 1000px;

height: 100px;

padding: 10px;

background-color: #000000;

font-family: Georgia;

font-size: 24pt;

color: #ffffff;

font-weight: bold;

text-align: center;

border: 1px #cccccc solid;

}

 

Now, I just set all the rules for the header and by assigning that class name to the div in your HTML document associates all this styling to it.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.