About Css An introduction about CSS

[Coach 0]

Far from being an expert, Iâm only a beginner who is interest to learn the new techniques of websites development and has realized some research. Since the results obtained might help other beginners too, I decided to write this paper âAbout CSS". Itâs assumed that the reader knows how to build web pages with HTML, if not visit: W3Schools' Home Page

 

HTML DISADVANTAGE

 

The development of web pages has experienced an important evolution in the last years due to the need to achieve every time better levels of quality in the web pages appearance and because the weakness of HTML to improve significantly this aspect. Really HTML is much better to programme documentâs structure instead to finishing its appearance.

 

http://forums.xisto.com/no_longer_exists/]HTML, the primary language of the Web, is a subset of SGML, one of the pioneering structured document formats. The goals of SGML and its children HTML are to encode a document's logical structure, not its presentation or final appearance (Lie & Saarela 96).

 

But designers have found ways to bend and shape the original HTML specification to their needs to control the appearance of Web pages. This has resulted in documents weighed down by heavy use of tables and tags. Not only does such coding practice stray from the intent of HTML, it slows page-loading times.

 

Anybody that feels more comfortable with Spanish language can go to: http://www.webestilo.com/css/css00.phtml

 

WHAT TO SEPARATE: STRUCTURE VS APPEARANCE

To precise a bit more on the apparent dilemma of structure vs. appearance we can go back to a document that still validity:

 

[quote name='http://forums.xisto.com/no_longer_exists/ has been around for a long time, but the main problem has not been with CSS, rather, browser support problems for CSS. But with the release of Netscape 6.x browsers, and the prevalence of IE browsers along with somewhat less common but CSS-savvy browsers such as Opera, we can now begin to turn to CSS for at least some of our design concerns.

 

As a result of the growing proliferation of browsers on the Web that can support CSS, there is the growing issue that we as Web designers and developers will be seriously challenged to begin looking at Web design in new ways. The bad news is that for those of us with little experience of CSS, well, we've got to learn how to write a whole new language!

 

Understanding What to Separate

 

When writing documents for structure rather than presentation, you'll likely stick to the basic structural components of a document, including:

⢠DOCTYPE declaration

⢠Html element

⢠Head portion of document with title

⢠Body portion of document

â¢

Within the document body, structural markup includes such things as:

⢠Headers

⢠Paragraphs and breaks

⢠Lists

⢠Divisions

⢠Tables (especially when used as intended: for tabular data)

⢠Forms

 

Some examples of presentational concerns that are ideally separated out into style sheets would include:

⢠Alignment values (right, left, justify)

⢠Colour values

⢠Fonts

⢠Borders

 

There are many more presentational concerns. A good rule of thumb to follow is if an element or attribute it has anything to do with the way something is designed versus the way it is structured, it is likely to be considered presentational.

CSS TUTORIALS

 

Now letâs take a look inside some CSS tutorials:

 

What is CSS?

⢠CSS stands for Cascading Style Sheets

⢠Styles define how to display HTML elements

⢠Styles are normally stored in Style Sheets

⢠Styles were added to HTML 4.0 to solve a problem

⢠External Style Sheets can save you a lot of work

⢠External Style Sheets are stored in CSS files

⢠Multiple style definitions will cascade into one

â¦â¦â¦

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

 

Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority:

1. Browser default

2. External Style Sheet

3. Internal Style Sheet (inside the <head> tag)

4. Inline Style (inside HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value)

 

Another tutorial:

[quote name='http://forums.xisto.com/no_longer_exists/ are many ways to link style sheets to HTML, each carrying its own advantages and disadvantages. New HTML elements and attributes have been introduced to allow easy incorporation of style sheets into HTML documents.

⢠Linking to an External Style Sheet

⢠Embedding a Style Sheet

⢠Importing a Style Sheet

⢠Inlining Style

⢠The CLASS Attribute

⢠The ID Attribute

⢠The SPAN Element

⢠The DIV Element

⢠A Note about Validation

THE ROAD TO ENLIGHTENMENT

 

Finally take a look to an excellent example of what can be accomplished visually through CSS-based design: The beauty of CSS design.

 

[quote name='http://forums.xisto.com/no_longer_exists/ What is This About?

There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.

CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.

[Hercco 0]

While you're (the reader of this topic) are getting into full CSS designing, you might aswell forget the old HTML 4 and get writing XHTML. XHTML is a step towards XML, a document format that it self doesn't contain any style information. XHTML is very close to old HTML, just keep in mind not to write any style information (such as <center></center> or <font>) and every tag must be closed and that's pretty much it!

[Coach 0]

Certain XHTML is close to OLD HTML, for that reason it is right not to forget HTML but to remember the HTML of his beginnings, when everything was much easier. Really XHTML uses the HTML’s vocabulary nevertheless that is an XML application.

XHTML is a stricter and cleaner version of HTML.

----------------------------------------------------------------------------------------------

What Is XHTML?

• XHTML stands for EXtensible HyperText Markup Language

• XHTML is aimed to replace HTML

• XHTML is almost identical to HTML 4.01

• XHTML is a stricter and cleaner version of HTML

• XHTML is HTML defined as an XML application

• XHTML is a W3C Recommendation

----------------------------------------------------------------------------------------------

What You Should Already Know

Before you continue you should have a basic understanding of the following:

• HTML and the basics of building web pages

If you want to study HTML first, please read our HTML tutorial.

---------------------------------------------------------------------------------------------

XHTML is a W3C Recommendation

XHTML 1.0 became a W3C Recommendation January 26, 2000.

A W3C Recommendation means that the specification is stable, that it has been reviewed by the W3C membership, and that the specification is now a Web standard.

W3C defines XHTML as the latest version of HTML. XHTML will gradually replace HTML.

Stay updated with the latest web standards with our W3C tutorial.

---------------------------------------------------------------------------------------------

All New Browsers Support XHTML

XHTML is compatible with HTML 4.01.

All new browsers have support for XHTML.

 

But most important yet is to know how XHTML interacts with CSS:

 

The 3 Document Type Definitions

• DTD specifies the syntax of a web page in SGML.

• DTD is used by SGML applications, such as HTML,

• XHTML is specified in an SGML document type definition or 'DTD'.

• An XHTML DTD describes in precise the allowed syntax and grammar of XHTML markup.

 

There are currently 3 XHTML document types:

• STRICT

• TRANSITIONAL

• FRAMESET

 

XHTML 1.0 specifies three XML document types that correspond to three DTDs: Strict, Transitional, and Frameset.

 

XHTML 1.0 Strict

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://forums.xisto.com/no_longer_exists/;

 

Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.

 

XHTML 1.0 Transitional

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://forums.xisto.com/no_longer_exists/;

 

Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.

 

XHTML 1.0 Frameset

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://forums.xisto.com/no_longer_exists/;

 

Use this when you want to use HTML Frames to partition the browser window into two or more frames.

[Munchie 0]

I have being working with Cascading Style Sheets for almost 2 years, now. Mainly for skinning forums, I have been offered many jobs for skinning but I find it does take its toll on you so if you are thing of starting be advised.I good introduction though, keep it up. I chucked myself in at the deep and didnt take any tutorials, maybe you should try it.~ Munchie ~

[Tobias 0]

I use css to layout my websites. I find them much nicer than tables, and they load quicker also. They're more flexible and you can do more things with them. So if you're a table person and still use tables to layout your sites, I would suggest using CSS. It's easy to learn and easy to use.

[Coach 0]

Thanks a lot for the tips Munchie and Tobias, I'll keep on using CSS to build my webpage. In any case, if I find any problem working with it maybe I’ll contact you to help me solve it.

[mimi_m 0]

Coding may seem pretty straigt-forward, like CSS having a certain place for a site's structure, but honey, the truth is you can do it anyway you like. I started off a self-taught coder, but now that i'm in uni, I understand many different coding conventions.

 

What i'm trying to say, is go about it at your own pace. People would recommend that you use XML with CSS to get better page results, or that you should use CSS to structure a site. These may work for some people, but not for others. I'm still in Uni, but I'm working towards becomming a freelance webdesigner, and having made sites for several clients... and I can tell you, to just go with what's best for you.

 

Personally, I like to stick to the good ol' HTML to structure my site, and only use CSS to set the design properties. I never structure a page with CSS. I find my best designs come when i stick to HTML.

 

When i first learnt, i started off small... so just stick in a few codes here and there to, say, make hover links, or put nifty borders up. And as you go on, you'll be able to tell whether you like CSS and how you like to use it.

 

I'm a practical person, so if you're anything like me, those articles and descriptions wont mean much to you. I suggest to just find a few tutorials or codes you can add to your page, and work from there. A great way to work out how CSS works and where to find great CSS codes is to look at the source of a good webpage. Usually, the CSS will be an external file, but it'll have the link reference so you should be able to find it.

 

Anyway, i hope this helps you to understand how to go about learning CSS (i tend to ramble =S).