CSS/HTML

zjosie729

Can someone explain (and teach) me how a page is constructed using mainly CSS and mainly the <div> tag in the HTML?

And is it better to link to the stylesheet or just write it in the page?

And anything about "floating tables" or "floating divs" would be helpful. I have no clue what they are and how to create them, but they seem pretty useful.

Stubru Freak

You make a div, give it an position: absolute; value, then you just change the top, left, right and bottom values, for example:

DoctorBeaver

I would suggest you use an online tutorial such as
http://www.w3schools.com/css/default.asp

Then use somewhere like http://www.oswd.org to download a few templates to see how others do things.

That's how I learned CSS & I got the hang of it pretty quick. There are plenty of people here & at OSWD who are willing to help & offer tips, but learn the basics 1st.

DoctorBeaver

As for whether to include the CSS code in the HTML or have a separate file, I always use a separate file. That way, if you want to change the style of an entire site you just edit the 1 file. It's also quicker to load & save a bit of bandwidth as the style sheet gets downloaded once and then stored in cache. If you include the CSS on the page, the whole lot has to download everytime.

bladesage

Here's the deal: If you want to use the same theme for every page on your site, use an external style sheet. If you want something specific for just one page, it's best to just use a style tag where neccesary. That's the big factor, hope it helps you.

zjosie729

if my site is mostly based on CSS, and i use an external stylesheet, if someone got to my site, and the CSS couldn't be loaded or something, wouldn't my site look awful? (Would that happen at all)?

Can I give widths/heights to divs? I see a lot of websites depend on CSS and use a lot of divs.

??

Kaneda · Last edited by Kaneda on Tue Mar 14, 2006 1:15 am; edited 1 time in total

bladesage

riv

Also, for some good examples on how to do colum layouts using div's and float's (or absolute's, though I'd recommend float's), check out the layout reservoir at http://www.bluerobot.com/web/layouts/.

azianninja

yer i had trouble with htmls and gettin each of the codes right, and i found that
http://www.w3schools.com/css/default.asp
is EXTREMELY useful,
it had everything that i needed to know and after going through the tutorial i knew exactly where i had gone wrong, so that web is the way to go

bladesage

I recommend a book, it covers html, css, some java, and some perl. It is a very useful book, I find myself quite frequently refering back to it. I knew literally nothing about css and javascript, but I now quite successfully manage a web site.

The book is HTML For The World Wide Web: A Visual Quickstart Guide, by Elizabeth Castro. If you want to see my web skills right now, I display quite a bit of cascading style sheets' flexibility right here.

On the other hand, could anyone please give me suggestions for an affordable book on javascript? I am very familiar with the capabilities and limitations of css now, but I need to learn javascript.

Back on topic, css is a miracle idea, and a very convenient webtool. I use it on absolutely every site I run, and I'm very good at it right now. I very much love the interactivity it provides my users, such as with this excerpt from my site here:

sinaryuda

Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did.

Style sheets are a very powerful tool for the Web site developer. They give you the chance to be completely consistent with the look and feel of your pages, while giving you much more control over the layout and design than straight HTML ever did.

Invented in 1997, Cascading Style Sheets (CSS) are just now starting to be widely used among browsers and Web developers are learning to be more comfortable with them. Those of you who use HomeSite 4.0 know that they are eventually going to take the place of tags such as <FONT>, which have been deprecated in HTML 4.0.

There are three parts to CSS: the styles, their placement, and the fact that they can cascade.

The Styles

One of the more common styles applied to HTML is the color and size of text. In HTML 3.2 you would create a blue H4 headline like this:

<font color="#0000ff"><h4>a blue headline</h4></font>

Which would look like:

a blue headline

However, there was no way to ensure that all H4 headlines were blue except by typing in the font tag before and after each one. With CSS, you simply declare that all H4 headlines are blue, and for all pages that use that style sheet and all elements that use that style, they will be blue:

H4 { color: #0000ff; }
<h4>another blue headline</h4>

Which would look like:

another blue headline

Style rules are comprised of two things, the selector and the declaration.

• selector - The HTML tag that will be affected by the rule

• declaration - The specific style calls that will affect the selector

The complete syntax for a style rule is:

selector {property : value;}

So, to set all bold text to be the color red, you would write:

b {color: red;}

One of the things that makes CSS so easy to use, is that you can group together components that you would like to have the same style. For example, if you wanted all the H1, H2 and bold text red, you could write:

b {color: red;}
h1 {color: red;}
h2 {color: red;}

But with grouping, you put them all on the same line:

b, h1, h2 {color: red;}

You can also group together rules (separated by a semi-colon ( Wink

). For example, to make all h3 text blue and Arial font, you would write:

h3 {
font-family: Arial;
color: blue;
}

By convention, we put separate rules on separate lines, but this is not required.

Style sheets can be place in three places in a document, in the <head>, in an external file, or within an individual tag. Style calls placed within an individual tag will only affect that tag, while other style calls affect the entire page or any page that loads the style sheet. For the above example, while the demonstration showed a style call used within a style sheet created either in the head of the document or on another page, the actual style use was within the H4 tag itself. For example:

<h4 style="color: #0000ff;">another blue headline</h4>

Creating styles as an attribute of a tag is a quick way to generate the style you would like without impacting your entire page. One common way this is used is to hide random links throughout the page. For the links you would like hidden, you would give them a style of "text-decoration: none". For example:

This link has the default decoration

This link, while still a link, is not underlined and has a color of black.

(Editor's note: The above two lines are not links.)

To create a style sheet within the header of your HTML document, you enclose it in <STYLE> tags. It is a good idea to define the mime type of the styles you are creating (usually text/css), and then to put the style rules within comment tags so that older browsers do not display them as text on the page. For example:

<head>
<style type="text/css">

</style>
</head>

Finally, you can create a separate document with all of your style information in it and either link or import it into your document. If you have a large site and would like to maintain consistency across it, then external style sheets are the way to go. They provide you with a simple way to dictate how all instances of various tags will be displayed.

Linking a Style Sheet

The benefit to linking a style sheet into your document is that it is supported by both the major 4.0 browsers. You call a linked style sheet like this:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

Importing a Style Sheet

Importing style sheets are only currently supported by Internet Explorer 4.0. They allow you to keep all your style information in the same place, within the <style> element, while also loading external files as style commands. For example:

<style>
@import URL (http://yoursite.com/stylesheet.css);
H4 { color: #0000ff; }
</style>

Cascading is something that makes CSS even more powerful. Style sheets cascade when The Web Writer or user (or both) have created an order of precedence for the browser to apply the style rules in multiple sheets. The style rule or sheet that has the highest precedence is the one that is used. The following list is a simplification of how your browser decides precedence for a style:

1. Look for the style element that is created, if it is not in the document, use the default rules in the browser.
2. Determine if any of the style rules are marked as important and apply those to the appropriate elements.
3. Any style rules in the document will have precedence over the default browser settings.
4. The more specific the style rule, the higher the precedence it will have.
5. Finally, if two rules apply to the same element, the one that was loaded last will have the highest precedence.

As HTML becomes more and more a description of the content of Web pages and less the look and feel, you need a tool to describe how your pages should look. That's where Cascading Style Sheets (CSS) come in.

CSS is not hard, in some ways it's almost easier than HTML. The trickiest part is remembering the many different choices you have to choose from. Let's start with a simple style sheet that includes some of the more common styles.

Fonts

The most common adjustment to Web pages is to the fonts on the page. You can change the color, style, size, and face of your fonts, and you can do it all with CSS.

Creating a Style Sheet

The first key to writing a style sheet is to decide what you want your text to look like. You should decide the color, the font, the style and so on. You also need to decide what the different styles should be for the different tags, headings, and so on.

My Proposed Styles

* Standard paragraph text should be black, arial narrow, and medium sized
* Top level (h1) headings should be red, bold, and small-caps
* Second level headings (h2) should be blue and italic
* Notations should be standard text with a yellow background

These are the CSS elements that can change the font:

* font-family - Change the actual face of the font. You can use specific font names or generic terms such as serif, sans-serif, monospace, courier, fantasy.

font-family : arial, geneva, helvetica;

* font-size - Change the size of the font. Define the size as an absolute size, relative size, percentage, or length.

font-size : small

* font-style - Changes the style from normal to italics or oblique.

font-style : italic

* font-variant - Change the look of the text from normal to small-caps.

font-variant : small-caps

* font-weight - Change the font to bold.

font-weight : bold

* color - Change the color of your text. Use either named colors or hexadecimal codes.

color : #ff0000

* background-color - Change the color behind the text. Use either named colors or hexadecimal codes.

background-color : yellow;

Once you've decided on the styles you want, you need to write your style sheet. Place the following in the <head> of your HTML document:

<style type="text/css">

</style>

The first three of the above styles will be set by using the tags: <p></p>, <h1></h1>, and <h2><h2>. The final style notation is used with the class attribute. Since it is a notation, it would usually be used with the <span></span> tag. For example:

<p>
This paragraph would be in the p style. <span class="note">Note: inheritance means that this text will have the same styles as the paragraph itself</span>
</p>

The styles set by the first tag will be inherited by any tag that is within it. This is why we don't have to redefine the font color or size for the note.

bsnyder

I have a question : Is the <div> tag basically a container that can be used anywhere within a HTML webpage. I have heard that it can be used to make columns when used in conjunction with cascading style sheets. I have also heard that the HTML <font> tag is outdated and should be replaced with CSS rules.

Kaneda

openpowwow

Just to affirm what everyone else has said, you should get some books and use the many MANY tools out there. w3schools is awesom and can teach you some of the basics and a little more. It gives you real example and its just reallt great.

Css...external external external! for th emost part, people use external becuase, like many other has said before, it loads fatser and it is SOO much easier editing things. Things are declared based on name and type of object and it makes things so much easier to find the things you need and want to change. The layout of css and the rules of formatting are easy to learn so mamig sure its all correct and spotless is not that hard to learn quickly. Plus, you can do more with css plike doing things to ALL the tables or ALL the divs quickly an with a lot less code, thus making for smaller file size with thus means faster download time. CSS is just a powerfull tool that you HAVE to learn and learn how to utilize when creating websites now.