Testing Site, where stuff gets tested

[wrldwzrd89]

Hello all-

I have a test site set up here. I wish to jazz up the output of that PHP script but I'm a total newbie to CSS. I have a book about the subject, but I still struggle to wrap my brain around how it works. Can anyone offer some advice? Note, the download links do NOT work at this time, I intend to fix this eventually.

 

[Super Macho Man]

CSS is the easiest thing ever. The people who try to explain it make it unnecessarily difficult when it really isn't. Here is a 20 second example.

The HTML way, 1 file called page.html:

<p><font color="red">This text is red</font></p>

The ideal CSS way, 2 files:
page.html:

<link rel="stylesheet" type="text/css" href="page.css" />
<p class="myColoredText">This text is red</p>

page.css:

.myColoredText { color:red; }

With plain HTML, what do you do if you have 100 <p>s to change? You have to go through them all one-by-one and change them. With CSS, page.html will link to page.css. Change the color of the .myColoredText class in page.css, and every <p> of class "myColoredText" will get updated automatically.

Classes are very useful but you can also apply styles to every certain element, like, for example, all <h4> elements:

h4 {font-weight:bold}

So I want a bunch of red <p>s, but I want one of them to be italic. Let's use inline CSS for that:

<p class="myColoredText">Some colored text</p>
<p class="myColoredText">Some colored text</p>
<p class="myColoredText" style="font-style:italic">Some colored text</p>
<p class="myColoredText">Some colored text</p>

Of course beyond color, CSS can control font size, widths, margins, etc. of everything.

There is of course more to it, but that is the basic idea. Separate content from presentation. Content = what is in the HTML file(s). Presentation = what is in the CSS file(s).

 

[wrldwzrd89]

CSS is the easiest thing ever. The people who try to explain it make it unnecessarily difficult when it really isn't. Here is a 20 second example.

The HTML way, 1 file called page.html:

<p><font color="red">This text is red</font></p>

The ideal CSS way, 2 files:
page.html:

<link rel="stylesheet" type="text/css" href="page.css" />
<p class="myColoredText">This text is red</p>

page.css:

.myColoredText { color:red; }

With plain HTML, what do you do if you have 100 <p>s to change? You have to go through them all one-by-one and change them. With CSS, page.html will link to page.css. Change the color of the .myColoredText class in page.css, and every <p> of class "myColoredText" will get updated automatically.

Classes are very useful but you can also apply styles to every certain element, like, for example, all <h4> elements:

h4 {font-weight:bold}

So I want a bunch of red <p>s, but I want one of them to be italic. Let's use inline CSS for that:

<p class="myColoredText">Some colored text</p>
<p class="myColoredText">Some colored text</p>
<p class="myColoredText" style="font-style:italic">Some colored text</p>
<p class="myColoredText">Some colored text</p>

Of course beyond color, CSS can control font size, widths, margins, etc. of everything.

There is of course more to it, but that is the basic idea. Separate content from presentation. Content = what is in the HTML file(s). Presentation = what is in the CSS file(s).

Thanks, that helps a LOT.

 

[SrWebDeveloper]

Beyond what was stated, with excellent examples (bravo!), I can "summarize" the key aspects of CSS for you so you get the BIG picture:

Before CSS was standardized web developers integrated styles (colors, fonts, graphics and cosmetic enhancements) directly into the HTML. This was done using attributes to various HTML elements, i.e. see code from the other user above.

People then realized wouldn't it be better (more efficient, faster, sensible) if the content was separated from the visual style? And wouldn't it be nice if you could globally apply styling to the whole document, then to groups of elements within the document, then elements individually, each inheriting settings so you only have to declare a change from one level to the next?

Well, CSS it intended to do both - separate content from style, and do it in such a way that settings are inherited as you define elements ("Cascading"). There are built in CSS styles that match popular HTML tags such as "body", "div", "p", "table" and so on. You can also define your own styles. That's what the "class" and "ID" stuff is all about - your own custom style applied to HTML which references the classname or ID. Again, great examples listed above by the previous poster for each type. All you need to remember is use the "ID" form when you need to reference one specific instance of any element on the page with its own unique identifier. This is more restrictive than the "class" form intended for multiple occurences of the element on the same page. This determines which is used and when. The rest is learning the syntax, how to externalize the CSS (store it in a CSS file using <style> tags to import them into your page) and some exceptions for older browsers. As you get more experienced you'll learn about how CSS styles are referenced by JavaScript. And you'll also learn more about inheritence, i.e. more than one class can reference the same styles, and HTML attributes can be included in directives so that you can target specific content with simple rules (for example: only DIV's with an ID of "makeblue" will have a blue font color)

CSS allows for liquid layouts, absolute position of elements, and of course one simple change in a CSS file can affect the entire page, or possibly the entire web site. This is power in the hands of a skilled developer.

Hope this explains the basics of how CSS works and why it exists.

For a great tutorial:

http://www.csstutorial.net/

-Jim

 

[Coolnat2004]

Along with CSS, I might add icons to that site. Attractive icons can make a plain website 3 times more visually pleasing, and useful.

But, please, use CSS to format it all!

You might also use some Javascript to make that page easier to navigate.

<script type="text/javascript">
function expandGroup(groupId) {
    if (document.getElementById(groupId).style.display=='none') {
        document.getElementById(groupId).style.display = '';
    } else {
        document.getElementById(groupId).style.display = 'none';
    }
}
</script>

<a href="#" onclick="expandGroup('macos')">Macintosh</a>
<div id="macos" style="display:none;">
    v1.3<br />
    v1.2<br />
    v1.1
</div>