Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2005
    Posts
    217
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy help on css based websites ??

    Hello frens n seniors of codingforums
    I haven't made a fully css based websites. Now i am planning to implement the css very effectively n efficiently. i tried once but wasn't successful. I want to make the whole site customizable just by editing a single css file, no need
    to go thro each page and edit the pages style. Please help me on this topic and explain clearly of using basics of css contains to be used in such sites, which one to use id or classes etc..
    Hope to have a good response from the gr8 helpers over there..
    would like to thanks in advance

  • #2
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Perhaps if you upload the following files to your server and then play a bit with them, re-upload, etc, you'll get an idea of how to proceed on your own. The idea is to create an HTML file with a link to a CSS file. Then you can create as many additional HTML files and link to the single CSS file, so that in this way, when you make a single change to the CSS, it will be picked up by all HTML pages.

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>My First XHTML/CSS Page</title>
    	<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
    </head>
    <body>
    	<div id="wrapper">
    		<div class="headfoot">
    			<h1>Header text here</h1>
    			<h5>Subheading text and link to: <a href="mailto:address@mail.com">address@mail.com</a></h5>
    		</div>
    		<div class="content">
    			<p><strong>This block is done as a <em>class</em></strong><br />
    			As a <em>class</em>, we can reuse it as many times as we wish per page. If it were in <em>id</em> we would be limited to a single use per page.
    			</p>
    		</div>
    		<div class="content">
    			<p><strong>This block is of the same class as the block above</strong><br />
    			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque in pede. Phasellus pulvinar dui ac est. Cras vel elit. Fusce tellus erat, iaculis faucibus, vehicula gravida, dapibus non, neque. Suspendisse mi nisl, facilisis nec, porta ut, imperdiet sagittis, nulla. Nunc pellentesque, erat et rutrum pulvinar, lectus nulla tempus lacus, non vulputate mi ligula ultricies urna. Nulla lorem lectus, eleifend in, vehicula nonummy, auctor sed, quam.
    			</p>
    		</div>
    		<div class="headfoot">
    			<p>Footer text here</p>
    		</div>
    	</div>
    </body>
    </html>
    CSS
    Code:
    	body {
    		background-color: #111;
    		color: #D3D9E2;
    		font: small Verdana, Arial, Helvetica, sans-serif;
    	}
    	h1 {
    		font-family: Georgia, serif;
    	}
    	hr {
    		color: #D3D9E2;
    		height: 1px;
    	}
    	a {
    		color: #D3D9E2;
    		text-decoration: none;
    	}
    	#wrapper {
    		width: 760px;
    		margin: 0 auto;
    		background-color: #000;
    	}
    	.headfoot {
    		border: 1px dashed #FFF;
    		margin-bottom: 10px;
    		padding: 0 20px;
    		text-align: center;
    	}
    	.content {
    		border: 1px dashed #FFF;
    		margin-bottom: 10px;
    		padding: 0 20px;
    	}
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #3
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I must be the only member here who ever recommends this site:

    Select tutorial

    But it is a seriously good resource on beginning with CSS.

    Also, to use css to full advantage, you need to get to grips with 'semantic' html, that is: using the right html tags to properly describe your content.

    Kind regards,

    Gary

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Selectutorial

    must be the only member here who ever recommends this site
    No, your not...

    PHPycho,

    Your questions are a bit too general to give concrete answers to; however, the tutorial Graft-Creative mentioned covers one of the more important aspects of CSS, so that's a good start.
    To get more ideas on how to apply CSS effectively, go over some of the articles on A List Apart.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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