Jump to content

Template for structure, comments etc re CSS


Lulu

Recommended Posts

Hi

 

I would like to put together a template for a stylesheet that I can use as a starting point again and again to ensure that I cover everyting. I'm thinking of headings, structure/order etc., along with what type of comments are helpful, where people place the comments.

 

If anyone has any thoughts on this, or perhaps a stylesheet that wouldn't mind sharing which illustrates the kind of things I need to think about, I would really appreciate it.

 

Thank you.

Link to comment
Share on other sites

It's often recommended to start with reset styles like all those shown in Meyer's reset:-

http://meyerweb.com/eric/tools/css/reset/

Copy those to the top of your stylesheet and it will make all browsers work the same way, getting rid of their different default margins, padding, etc.

 

Themn you will have to code the styles for your page. As you have made all margins and padding 0 using the reset, you will have to add back margins and padding where you want them. I normally start with the body, then all the h1 to h6 and p tags, then the divs, ul tags and other main elements including working from the top of the page with header, navbar, content and footer, then link styles and special menu styles, perhaps for a dropdown menu.

Link to comment
Share on other sites

It's often recommended to start with reset styles like all those shown in Meyer's reset:-

http://meyerweb.com/eric/tools/css/reset/

Copy those to the top of your stylesheet and it will make all browsers work the same way, getting rid of their different default margins, padding, etc.

 

Themn you will have to code the styles for your page. As you have made all margins and padding 0 using the reset, you will have to add back margins and padding where you want them. I normally start with the body, then all the h1 to h6 and p tags, then the divs, ul tags and other main elements including working from the top of the page with header, navbar, content and footer, then link styles and special menu styles, perhaps for a dropdown menu.

 

Thanks for your post Wickham. I've got the reset in there, and have made a note of the various 'sections' you've mentioned.

 

I would be really interested to see what a few completed stylesheets look like in terms of the comments people have made on the sheet to help them in future, whether they've used /*Headings*/ etc for the different sections and wotnot. I've looked online for templates and such like, but don't come up with a great deal.

Link to comment
Share on other sites

People layout stylesheets differently, but there should be some logic and neatness to them.

Here's one using Meyer's Reset:-

http://www.broadchalke.info/broadchalkehtml5.css

This one dates from 2005 before I knew about reset styles, but it shows the order that I used:-

http://www.wickham43.net/tutorial.css

This one

http://www.broadchalke.info/history/css/history.css

has a shorter version of Meyer's reset, based on what shelfimage posted on the old Killersites forum

http://www.killersites.com/mvnforum/mvnforum/viewthread_thread,10970

 

The Meyer reset is OK but it has more than I usually need, so I sometimes cut bits out of it.

Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...