PDA

View Full Version : Is there a CSS directory around here?


domi0036
10-17-2007, 09:08 PM
I've posted on here a couple times, but I'm very new to dreamweaver. Based on people's advice, everyone basically agreed to not work in tables and use CSS for page design and layout.

So, naturally I took that advice and I'm trying to learn more about CSS so that I can use that to design my pages. Is there anywhere on this site the really does a good job explaining the differences between CSS selector types (class, tags & advanced)?

I'm really having a tough time using CSS for my layouts. It makes great sense for typography, not so much yet for layouts. Anything yall would recommend? I have two videos to refrence, both by lynda.com, CSS for designers and CSS site design. anyone have any suggestions on which one is better for someone (me) with a limited amount of xhtml and css background?

Thanks!

neonfluxx
10-18-2007, 12:14 AM
I will be doing some VTM's on this very soon and other tips and tricks tools.

neonfluxx
10-18-2007, 12:19 AM
Heres a little more:

In web development (http://en.wikipedia.org/wiki/Web_development), Cascading Style Sheets (CSS) is a stylesheet language (http://en.wikipedia.org/wiki/Stylesheet_language) used to describe the presentation of a document written in a markup language (http://en.wikipedia.org/wiki/Markup_language). Its most common application is to style web pages (http://en.wikipedia.org/wiki/Web_page) written in HTML (http://en.wikipedia.org/wiki/HTML) and XHTML (http://en.wikipedia.org/wiki/XHTML), but the language can be applied to any kind of XML (http://en.wikipedia.org/wiki/XML) document, including SVG (http://en.wikipedia.org/wiki/Scalable_Vector_Graphics) and XUL (http://en.wikipedia.org/wiki/XUL).
CSS is used by both the authors and readers of web pages to define colors (http://en.wikipedia.org/wiki/Color), fonts (http://en.wikipedia.org/wiki/Typeface), layout (http://en.wikipedia.org/wiki/Layout), and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility (http://en.wikipedia.org/wiki/Accessibility), provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader (http://en.wikipedia.org/wiki/Screen_reader)) and on Braille (http://en.wikipedia.org/wiki/Braille)-based, tactile (http://en.wikipedia.org/wiki/Tactile) devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade (http://en.wikipedia.org/wiki/Cascade), priorities or weights


Custom CSS (Class) styles: create a customized style with the set attributes. These class styles can be applied to any tag.
HTML Tag styles: redefine the formatting for a particular tag, such as <h1>. All text formatted with the h1 tag is immediately updated.
Advanced CSS Selector styles: redefine the formatting for:
A particular combination of tags (for example, td h2 applies whenever an h2 header appears inside a table cell) and pseudo-class styles (for example, a:link, a:hover, a:visited)
A specific ID attribute (for example, #myStyle applies to all tags that contain the attribute-value pair id="myStyle")

chriskq
10-18-2007, 12:59 PM
css is so powerful

this guy shows it off

http://www.cssplay.co.uk

domi0036
10-19-2007, 08:03 PM
So, here's a question that will hopefully help me get more aquainted with css...

When trying to design a simple page, say...header with nav. bar underneath, then 3 column design...

What type of css selectors do I choose for the layout and positioning of the banner, nav bar & text? Class, Tag or Advanced?

chriskq
10-22-2007, 11:29 AM
you would use a class for most things and id's for elements that you can call from the dom.

if i were to do a 3 column design id break it into 3 main parts

header, content, footer. - all of those could be id's.
then u would classes within them eg: banner, nav and column.

heres some help
http://www.mollio.org/

domedia
10-22-2007, 01:20 PM
What type of css selectors do I choose for the layout and positioning of the banner, nav bar & text? Class, Tag or Advanced? Selectors are just used to select HTML elements. It's the CSS declaration that actually does the styling.

domi0036
10-22-2007, 05:06 PM
you would use a class for most things and id's for elements that you can call from the dom.

if i were to do a 3 column design id break it into 3 main parts

header, content, footer. - all of those could be id's.
then u would classes within them eg: banner, nav and column.

heres some help
http://www.mollio.org/

Selectors are just used to select HTML elements. It's the CSS declaration that actually does the styling.

OK, thanks. Is there anywhere, that you're aware of, that does a good job explaining the differences between class, tags & ID's.

I'm not trying to come off as dense as I must seem. I'm just really trying to get a good understanding between the 3.

Thanks for your help.

domedia
10-22-2007, 05:24 PM
Class:
You can make a css class and assign to any kind of tag. Classes start with a dot in CSS. You can make any kind of classnames and call them whatever you want. Classes are usually assigned to more than one HTML element (thus it's name), but don't have to.
CSS: .name {background-color: red;}
HTML
<p class="name">John Smith</p>
<p class="name">Will Smith</p>


TAGS
This is when you assign some CSS to a HTML tag, and anytime the HTML tag appear it will get the CSS style applied to it.
CSS:
p {color: green}
HTML:
<p>Hello World</p>

ID
Id is like class, but is unique. So only one element can have a certain ID applied to it. You can assign the ID to any HTML element. You can name the ID's whatever you want and they have to start with a pound sign
CSS:
#header {height: 80px;}
HTML:
<div id="header">Hello</div>

domi0036
10-22-2007, 05:31 PM
Class:
You can make a css class and assign to any kind of tag. Classes start with a dot in CSS. You can make any kind of classnames and call them whatever you want. Classes are usually assigned to more than one HTML element (thus it's name), but don't have to.
CSS: .name {background-color: red;}HTML
<p class="name">John Smith</p>
<p class="name">Will Smith</p>
TAGS
This is when you assign some CSS to a HTML tag, and anytime the HTML tag appear it will get the CSS style applied to it.
CSS:
p {color: green}HTML:
<p>Hello World</p>ID
Id is like class, but is unique. So only one element can have a certain ID applied to it. You can assign the ID to any HTML element. You can name the ID's whatever you want and they have to start with a pound sign
CSS:
#header {height: 80px;}HTML:
<div id="header">Hello</div>

You have no idea how helpful that was. Thank you so much! I truly appreciate it. That made about 5 hours worth of CSS videos make sense.

Thanks a lot!

domedia
10-22-2007, 08:09 PM
Hey, glad I could help :)

domi0036
10-22-2007, 08:22 PM
So, here's a dumb question, but why would you ever use ID's over classes? Since they're basically the same thing?

Also, if you were applying style to a navagation bar, what would you use?

domedia
10-22-2007, 09:03 PM
Calling them basically the same thing is going too far. Sometimes you need to find a unique element on a page, and you do that by ID. They're not exclusive of each other, you can add both a class and an ID attribute to the same element.

If you only have one navigation bar of that appearance/function, then it's logic to use ID. Use class for styles you intend to repeat on several elements.

domi0036
10-23-2007, 06:17 PM
Calling them basically the same thing is going too far. Sometimes you need to find a unique element on a page, and you do that by ID. They're not exclusive of each other, you can add both a class and an ID attribute to the same element.

If you only have one navigation bar of that appearance/function, then it's logic to use ID. Use class for styles you intend to repeat on several elements.

Is there any harm in labeling everything with a class versus an ID? I understand that ID's can only appear in one instance, but why couldn't you just create a unique class that only appears once on a page?

I'm really having a tough time understanding the intricacies between Class and ID.

domedia
10-23-2007, 06:56 PM
If you ever need to find a unique element on a page, it has to be a ID, for example. Like Chris said if you wanted to use the DOM (GetElementById) to manipulate the page. You might as well do it and establish a good practice in your coding right away, there's no reason not to.
Creating a unique class that only appears one?!? That is the definition of a unique item (ID) :)

The protocol was created so we could separate unique and common elements. If you start doing it now (coding the 'right' way), it will be soo much easier for you later if you ever plan to work with others or learn more about webdev.

domi0036
10-23-2007, 07:23 PM
If you ever need to find a unique element on a page, it has to be a ID, for example. Like Chris said if you wanted to use the DOM (GetElementById) to manipulate the page. You might as well do it and establish a good practice in your coding right away, there's no reason not to.
Creating a unique class that only appears one?!? That is the definition of a unique item (ID) :)

The protocol was created so we could separate unique and common elements. If you start doing it now (coding the 'right' way), it will be soo much easier for you later if you ever plan to work with others or learn more about webdev.

Gotcha. Thanks.