Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Junk: Junk: Connecting HTML or PHP files to the CSS - Tutorial.
#1
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.

[Image: OU1IVrqDYC.png]

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:

[Image: i3qUOmpVpc.png]

Notice that in this code, this part:

[Image: UKGyNc44hS.png]

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:

[Image: EXp9lTYQb7.png]

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:

http://icap.me/i/46i98KW1fl.png

Note, this is my example. Where it says, div id="header-wrapper">

the header-wrapper then connects to my css code.

So this:

[Image: MbZHchTVUS.png]

then connects to this:

[Image: 0DKXpveGyM.png]

line of code.

[Image: MbZHchTVUS.png]

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.

Code:
<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.
#2
Very nice tutorial, jord ive learnt a lot from this
#3
No problem, Smile! Happy css'ing. Confuseduperman:
#4
nice tutorial jord. lol at "css'ing" Confuseduperman:
#5
Nice tutorial... But I could do better ^_^
#6
There is NO BETTER way.. I made this tutorial like I was teaching a baby!
#7
Nice Tutorial Jord. Wanna add this.
CSS Validator ( http://jigsaw.w3.org/css-validator/ ) is pretty cool. It's not always useful, but what it is good for is finding when you make a mistake, such as forgetting a semicolon after a line.
#8
(06-04-2012, 10:43 AM)Jord Wrote: There is NO BETTER way.. I made this tutorial like I was teaching a baby!

Well, I could modify as if I was teaching a Retarded Baby Tongue
#9
(06-06-2012, 04:12 PM)xKore Wrote:
(06-04-2012, 10:43 AM)Jord Wrote: There is NO BETTER way.. I made this tutorial like I was teaching a baby!

Well, I could modify as if I was teaching a Retarded Baby Tongue
Kudos to you. Hey Jord, add the links I suggested please.
#10
This thread has been junked!


Forum Jump:


Users browsing this thread: 1 Guest(s)