You are viewing our Forum Archives. To view or take place in current topics click here.
Connecting HTML or PHP files to the CSS - Tutorial.
Posted:
Connecting HTML or PHP files to the CSS - Tutorial.Posted:
Status: Offline
Joined: Jan 11, 201212Year Member
Posts: 228
Reputation Power: 12
Status: Offline
Joined: Jan 11, 201212Year Member
Posts: 228
Reputation Power: 12
I see that some people struggle with CSS and are confused about how it actually
works, so.. I thought I'd make a quick tutorial.
First of all, I'd just like to point out that CSS stands for Cascading Style Sheets.
Now, on to the tutorial.
I'd just like to point out, in this tutorial, my CSS file is in a css directory/ folder.
[ Register or Signin to view external links. ]
For example, you have your HTML or PHP file open and you're ready to do some styling.
You then do your styling on a Cascading Style Sheet.
You will then have something similar to this in your CSS:
[ Register or Signin to view external links. ]
Notice that in this code, this part:
[ Register or Signin to view external links. ]
is the part to remember. The text you see here is how you are going to connect
your HTML or PHP file to this line of code in your CSS file.
in your HTML or PHP file, you want to put something like this:
[ Register or Signin to view external links. ]
Notice that I put:
href="./css/style.css"
This is because my css file is in the css directory/ folder and the css file is called
style.css.
If you have your css file called "ttg.css" and it's in a folder named, "TTGStyling".
It would then be:
href="./TTGStyling/ttg.css"
NOTE: This line of code can be put anywhere in HTML or PHP file
above the /head. In other word, above the <body> tag.
You would then type this line of code where you plan to syle:
[ Register or Signin to view external links. ]
Note, this is my example. Where it says, div id="header-wrapper">
the header-wrapper then connects to my css code.
So this:
[ Register or Signin to view external links. ]
then connects to this:
[ Register or Signin to view external links. ]
line of code.
[ Register or Signin to view external links. ]
after this line, you then type the code you want styling. You then end the div tag with
a </div>
Here is an example of what I have styled from that css.
I hope this tutorial taught you something, please message me for any help!
I found it quite hard to put this tutorial in any other form/ words.
works, so.. I thought I'd make a quick tutorial.
First of all, I'd just like to point out that CSS stands for Cascading Style Sheets.
Now, on to the tutorial.
I'd just like to point out, in this tutorial, my CSS file is in a css directory/ folder.
[ Register or Signin to view external links. ]
For example, you have your HTML or PHP file open and you're ready to do some styling.
You then do your styling on a Cascading Style Sheet.
You will then have something similar to this in your CSS:
[ Register or Signin to view external links. ]
Notice that in this code, this part:
[ Register or Signin to view external links. ]
is the part to remember. The text you see here is how you are going to connect
your HTML or PHP file to this line of code in your CSS file.
in your HTML or PHP file, you want to put something like this:
[ Register or Signin to view external links. ]
Notice that I put:
href="./css/style.css"
This is because my css file is in the css directory/ folder and the css file is called
style.css.
If you have your css file called "ttg.css" and it's in a folder named, "TTGStyling".
It would then be:
href="./TTGStyling/ttg.css"
NOTE: This line of code can be put anywhere in HTML or PHP file
above the /head. In other word, above the <body> tag.
You would then type this line of code where you plan to syle:
[ Register or Signin to view external links. ]
Note, this is my example. Where it says, div id="header-wrapper">
the header-wrapper then connects to my css code.
So this:
[ Register or Signin to view external links. ]
then connects to this:
[ Register or Signin to view external links. ]
line of code.
[ Register or Signin to view external links. ]
after this line, you then type the code you want styling. You then end the div tag with
a </div>
Here is an example of what I have styled from that css.
<div id="header-wrapper">
<!-- BEGIN HEADER -->
<div id="header">
<!-- BEGIN TOP NAVIGATION -->
<ul id="top-navigation" class="sf-js-enabled sf-shadow">
<?php if($_SESSION['userloggedin'] != "" && $currentuser['usergroup'] == "1") { ?>
<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69" style="color:#F00;">
<a href="./administrator" style="color:#F00;"><strong>AdminCP</strong></a>
</li>
<? } ?>
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-5">
<?php if($_SESSION['userloggedin'] == "") { ?>
<a href="./login"><strong>Login</strong></a>
<? }else{ ?>
<a href="./<?=$_SESSION['userloggedin'];?>"><strong>Welcome back <? if($currentuser['usergroup'] == "1" || $currentuser['usergroup'] == "2" || $currentuser['usergroup'] == "4") { ?><font color="<?=$currentuser['username_color'];?>"><?=$_SESSION['userloggedin'];?>!</font><? }else{ ?><?=$_SESSION['userloggedin'];?>!<? } ?></strong></a>
<? } ?>
</li>
<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69">
<?php if($_SESSION['userloggedin'] == "") { ?>
<a href="./register"><strong>Don't have an account? Click here to register...</strong></a>
<? }else{ ?>
<a href="./myaccount"><strong>My Account</strong></a>
<? } ?>
</li>
<?php if($_SESSION['userloggedin'] != "") { ?>
<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69">
<a href="./logout"><strong>Logout</strong></a>
</li>
<? } ?>
</div>
I hope this tutorial taught you something, please message me for any help!
I found it quite hard to put this tutorial in any other form/ words.
The following 1 user thanked irJord for this useful post:
-ScHmIdTy (04-01-2012)
#2. Posted:
Status: Offline
Joined: Apr 16, 201014Year Member
Posts: 4,309
Reputation Power: 179
Status: Offline
Joined: Apr 16, 201014Year Member
Posts: 4,309
Reputation Power: 179
this shouldn't be stickied, its basic knowledge to any web programmer.
- 3useful
- 2not useful
#3. Posted:
Status: Offline
Joined: Oct 26, 201013Year Member
Posts: 3,869
Reputation Power: 177
Status: Offline
Joined: Oct 26, 201013Year Member
Posts: 3,869
Reputation Power: 177
It's a bit detailed for such a simple tag really, but helpful none the less.
- 1useful
- 0not useful
#4. Posted:
Status: Offline
Joined: Jan 11, 201212Year Member
Posts: 228
Reputation Power: 12
Status: Offline
Joined: Jan 11, 201212Year Member
Posts: 228
Reputation Power: 12
Z61 wrote this shouldn't be stickied, its basic knowledge to any web programmer.
I totally agree. This thread was only made for support reasons. I just thought I'd make this tutorial
To help people out.
But someone writing that this thread should be stickied was a nice jester.
- 0useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.