Css???

GeekDragon · Jul 4, 2008

OK, well, i am new here and i joined this forum so that i could learn faster what it takes to create my own website. And while running along my program *Microsoft 2007 Expression Web* I see CSS properties and Tags. Well, I looked at myself and said, "Wha???" i dont' understand what it's supposed to be or how to use them. Can anyone help me???

rayzur · Jul 5, 2008

Hi,
CSS and HTML always work together. You will need to have a good understanding of HTML before CSS will ever make sense to you. All of the syntaxes in a stylesheet will always be pointing to an HTML element within the document. HTML controls the structural elements of a document whereas CSS defines the presentation (size,color,font,positioning,etc.)of those elements.

To really understand how all this works it is best to break away from WYSIWYG editors and learn how to hand code your documents. If you stay with Dreamweaver or Frontpage you will never really learn what is going on, not to mention the bloated code that they produce.

I use PsPad and Notepad++ which are both found here at Majorgeeks.

Here are some good CSS learning resources:

http://www.w3schools.com/css/css_intro.asp
http://reference.sitepoint.com/
http://www.cssbasics.com/
http://www.html.net/tutorials/css/introduction.asp
http://www.mako4css.com/Basics.htm

This is a collection of webdesign resources I have on my site.

Let me give you a demo of a simple Two-Column layout, copy and paste this code into a text editor like notepad or notepad++ and save it as demo.html , This document has an internal stylesheet only because it is a one page example. If you will study #id's in the css you will see how they effect the html.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Two Column Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="generator" content="PSPad editor, www.pspad.com"/>
<style type="text/css">
<!--

body {
    margin:10px;
    padding:10px;
    background:#FFF;
    color:#000;
    text-align:center;/*centre for ie5 */
}
#container {
    width:750px;
    background:#D1DCE9;/*this colour will be left column colour */
    margin:auto;/* centre for compliant browsers*/
    text-align:left;
    border:1px solid #000;
}
#header {
    height:50px;
    border-bottom:1px solid #000;
    background:#ffffCC;
    text-align:center;
}
#left {
    margin-left:-169px;/*must be 1 pixel less than width */
    float:left;
    width:170px;/* this width is the same as the margin on #middle */
    position:relative;
    left:-2px;/* line it up exactly without losing pressure on footer*/
}
#left p {padding-left:5px}
#middle {
    border-left:1px solid #000;
    background:#6FACD0;/* background colour of right column */
    margin-left:170px;/*this is the space for the left column */
}
#inner{width:100%;float:left;margin-right:-1px}/* contain cleared elements from clearing other floats*/

#footer {
    clear:both;
    border-top:1px solid #000;
    height:50px;
    background:yellow;
    text-align:center;
}
h1,h2,h3,p {margin-top:0}

/* clear without structural mark-up from PIE website*/
.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}

  /* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/* do not change or amalgamate clearfix styles*/

-->
</style>
</head>
<body>
    <div id="container">
        <div id="header">
            <h1>Header</h1>
        </div>
            <div id="middle" class="clearfix">
                <div id="left">
                    <p>Left Content : Left Content : Left Content : Left Content : Left
                    Content : Left Content :</p>
                    <p>Left Content :</p>
                    <p>Left Content :</p>
                    <p>Left Content :</p>
                    <p>Left Content :</p>
                </div>
                <div id="inner">
                    <h2>Main Content</h2>
                    <p>2 column layout with borders and 2 column colours (no background
                    images required). Either column can be the longest and the columns
                    will equalise.</p>
                    <p style="clear: both;">Middle Content : Middle Content : Middle
                    Content : Middle Content : Middle Content : Middle Content : Middle
                    Content : Middle Content : Middle Content : Middle Content : Middle
                    Content : Middle Content : Middle Content : Middle Content : Middle
                    Content : Middle Content : Middle Content : Middle Content :</p>
                </div>
            </div>
        <div id="footer">
            <h3>Footer | <a href=
            "http://www.pmob.co.uk/temp/3colfixedtest_4.htm">Back to Main
            Demo</a> | Footer</h3>
        </div>
    </div>
</body>
</html>

GeekDragon · Jul 5, 2008

OOOHH! 0.0 Thanks alot! And i see what you mean about CSS and HTML, it makes sense now. Ok, well, thanks again, i will definitely read up on those sites. :dancer:

rayzur · Jul 5, 2008

Glad you found that helpful!

As you enter into this area of CSS you will encounter many bugs within different browsers. What may look perfect on Firefox will be butchered by Internet Explorer 6 and under. That's because IE6 doesn't properly support CSS2, a quick explanation of it can be found here. I am just giving you a heads up so you don't panic when you encounter these bugs.

One of the best places for CSS Examples is Paul O'Briens site. I have learned more from him about advanced techniques than anywhere else.

Paul is one of main CSS Gurus around the web today and he wrote the SitePoint Reference that I linked to in the first post. He is one of the moderators of this CSS Focused Forum. I spend a lot of my time there helping others with their CSS problems. We love killing browser bugs, especially MS Internet Exploder bugs. :-D

Have a look through the CSS Zen Garden for some examples of what can be accomplished!

GeekDragon · Jul 5, 2008

well, heh, i don't have Explorere 6 or lower, i have internet explorer 7. so what exactly would happen with that?

rayzur · Jul 5, 2008

IE 7 was a major improvement although there are weaknesses in it as there are in every browser. All browsers have their own default settings and apply margins and paddings differently. The way to handle that is to apply the universal reset at the top of your stylesheet. Like this below:

* {margin:0; padding:0;}

This gets all browsers zeroed out and on the same playing field.

It's not so much about what browser you are using, but building a site that is accessible to everyone. From a Web Developers perspective we still have to cater to IE6 because unfortunately there are many people who are still using it. With IE8 on the horizon though we will be able to drop support for IE6 within a year maybe. IT has caused many problems and we will be glad when we can bury it.

Don't let all that scare you, I'm just giving you the facts so you won't be surprised when you encounter bugs. Even Firefox and Opera have issues of their own but no where near in comparison to IE.

This is a more advanced reset
Code:
/*----------  Resets ----------*/
body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
    margin:0;
    padding:0;
}
Here is a Three-Column Demo of mine that uses that reset above, view the page source and you will see it at the top of the stylesheet. Also you will see javascript expressions in the code that are givin to IE6 only because it does not support min-max widths. But IE7 does support min-max widths.

That Demo is called an Elastic Layout because it grows with the font size when the user changes it in their browser, and when you size your browser window down it will shrink to fit until it reaches it's min-width. That is to accomodate people who have their screen resolutions set at 800 x 600.

It is best to make websites that are flexible and adaptable to any condition that the user may have their browsers set at. The user is the one that should be in complete control of their settings, not the designer.

GeekDragon · Jul 6, 2008

well, you didn't scare me, just made me more aware of things. and i thank you greatly for the help you gave me. it means alot especially since i want to create my own therian website.

Log in or Sign up

Css???

GeekDragon Private E-2

rayzur Private First Class

GeekDragon Private E-2

rayzur Private First Class

GeekDragon Private E-2

rayzur Private First Class

GeekDragon Private E-2