CSS Example - Beginners Cascading Style Sheet (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

pageoneresults -> CSS Example - Beginners Cascading Style Sheet (5/25/2003 5:04:57)

Okay, I' ve been working on building a [url=" http://www.csstips.com/examples/simple-em.asp" ]Beginner' s Cascading Style Sheet Example[/url] for FrontPage web developers.

Unfortunately, the support for CSS in FrontPage is lacking in some areas, especially when it comes to standards and accessibility support. Elements such as <strong> and <em> are not supported in FP' s sytle dropdown menu. Neither is the ability to apply multiple classes to one element, i.e. <p class=" red ctr" > which would give me a paragraph that has red centered text.

I' ll be working on this as time permits and as feedback comes in from the community. Once we hammer out all the basic details, then we will start working on our NN4.x style sheet so that we can use the @import command and design for backwards compatibility.

Before you fire away with questions, try the style sheet on your own test page and tweak the attributes to meet your requirements. Then come back and ask questions as to why something does this or does that and what should be changed to make it work the way you want it to.

Comments and revisions are welcome from those of you who are knowledgable in CSS and feel that something can be improved. My goal is to make a style sheet that works with the FrontPage style menu and doesn' t require you to do any html editing. Unfortunately, the link above will require that you know how to add <span> elements, <strong> elements and <em> elements to your markup. Once you know how to do that, then you can start adding classes to those elements, i.e. <span class=" blue" > or <strong class=" blue" >.

Note: You can leave the CSS Comments in the style sheet for reference. I put them there to help explain each rule in the style sheet. The comments appear between the hash/asterisk marks in gray...

/* CSS Comments Here */



erinatkins -> RE: CSS Example - Beginners Cascading Style Sheet (5/27/2003 10:24:00)

Pageoneresults,

I think this is a good basic start. I like having the comments available for use so I know step by step what each thing is.

I am going to play around with this.

Thanks
Erin



bobby -> RE: CSS Example - Beginners Cascading Style Sheet (5/27/2003 10:30:27)

quote:

Unfortunately, the support for CSS in FrontPage is lacking in some areas


If your using a linked style sheet and previewing in a browser it doesn' t matter (at least it hasn' t so far for me...)

Using FP' s preview pane is another matter all together... that can be kind of tricky sometimes - but that' s true with a lot of things, not just CSS [;)]

Nice example, btw



paul rayner -> RE: CSS Example - Beginners Cascading Style Sheet (5/28/2003 2:23:40)

Yep - I always use the Preview In browser button in the task bar - seems far more reliable.



pageoneresults -> RE: CSS Example - Beginners Cascading Style Sheet (5/29/2003 21:55:02)

quote:

If your using a linked style sheet and previewing in a browser it doesn' t matter (at least it hasn' t so far for me...)

Hello bobby, actually I was referring to FP' s Formatting Menu. For those who are not familiar with this menu, it sits to the left of your font dropdown menu.

FP does not pick up em or strong rules in the style sheet. What this means is they have to be coded manually. You could of course use the <b> and <i> tags but I' m working towards total accessibilty and the semantics of <strong> and <em> are more accessible.

For those not understanding this, <b> is the same as <strong>. <i> is the same as <em> or emphasis.

The other thing the FP formatting menu will not allow me to do is combine multiple classes. This also needs to be done manually. I don' t mind because I' m at home whether in Normal or HTML mode. But, for the beginner, some of the more advanced CSS features will not be available to them through FP' s interface.

P.S. I think it would be a good idea while we are discussing the more advanced features of FP that we maybe help those who don' t fully understand what we are saying. I sometimes read back through my posts and have to edit them and change the grammar a little bit so they are easier to understand.

Adding little side notes where you think someone might have a questions would help considerably. Even for those of us who may think we know what we are doing! ;)



Sheldon469 -> RE: CSS Example - Beginners Cascading Style Sheet (5/31/2003 19:22:19)

Hi pageoneresults:

I can' t wait until your Beginner' s Guide is available. I' ve been trying to comprehend what ~exactly~ is CCS! Thus far, all I know is, it' s allows you to control the look of your webpge & how it loads???

I would be happy if someone can explain it to me in laymans terms!

Does anyone else have any suggestions?


Thanks ya' ll



JHawkins -> RE: CSS Example - Beginners Cascading Style Sheet (6/3/2003 11:42:31)

quote:

FP does not pick up em or strong rules in the style sheet. What this means is they have to be coded manually. You could of course use the <b> and <i> tags but I' m working towards total accessibilty and the semantics of <strong> and <em> are more accessible.


I' m a little confused. I quit using <b> and <i> quite awhile back, but I still add the <strong> and <em> tags by highlighting my text, clicking on the font dropdown menu and select Strong or Emphasis in the Effects section. Or is that what you mean by manually? It' s not as handy as having a specific button, but it works.


Also, for Sheldon469,
CSS essentially is a way to separate formatting from content, or put another way, how a page looks vs how a page reads. Besides your pages possibly loading faster, they will have a far better chance of being accessible to the growing numbers of visually impaired who depend on the internet as much as the rest of us do. With CSS a screen reader will be able to read the content of your page without having to also read through all of the formatting tags used in basic html. Personally, the more I learn about CSS and the more I use it, the more I like it and appreciate it' s potential.

One of it' s greatest advantages: If you have a specific layout for your entire site, ie. font size, background, etc., you can set all of that up in one stylesheet. Then if you change your mind about some of your layout, like wanting a different background, you just change it in your stylesheet and voila! you' re entire site is changed. Cool, huh?



pageoneresults -> RE: CSS Example - Beginners Cascading Style Sheet (6/3/2003 14:05:10)

JHawkins, you had me going there for a minute...

quote:

Clicking on the font dropdown menu and select Strong or Emphasis in the Effects section.

If you are using pure CSS layouts, you cannot use the Font Effects menu. What happens is as soon as you select <strong> from the effects options, FP wraps that text in a <font></font> tag. You can see this by doing Ctrl + / and then selecting <strong> from the effects menu. You can always go to your font selection menu and select Default from the list which will now take the <font></font> tags away.

Not a perfect solution but one that I will do every now and then. I just prefer to Ctrl + / after selecting the Effect and then put my cursor in front of the opening <font> tag and press delete. That will delete the opening and closing <font> tags.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
7.800293E-02