Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
I'm attempting to create a CSS template for XHTML 1.0 Strict because I am tired of starting from scratch all the time.
Please comment:
1) Tags that are in the wrong category.
2) Tags that are not supported.
3) Tags that are missing.
4) Tags that should be removed.
5) A section that needs to be split up.
6) Sections that need to be combined.
/* Global
==============================================================================*/
html {}
body {}
/* Form
==============================================================================*/
form {}
select {}
optgroup {}
option {}
textarea {}
label {}
legend {}
input {}
button {}
fieldset {}
/* Heading
==============================================================================*/
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
/* Image
==============================================================================*/
img {}
map {}
area {}
/* Link
==============================================================================*/
a {}
/* List
==============================================================================*/
ol {}
ul {}
li {}
dl {}
dt {}
dd {}
/* Table
==============================================================================*/
table {}
th {}
thead {}
tbody {}
tr {}
td {}
tfoot {}
caption {}
col {}
colgroup {}
/* Text
==============================================================================*/
abbr {}
acronym {}
address {}
bdo {}
pre {}
p {}
blockquote {}
/* Font
==============================================================================*/
b {}
i {}
big {}
small {}
tt {}
sub {}
sup {}
/* Phraze
==============================================================================*/
code {}
dfn {}
em {}
strong {}
samp {}
kbd {}
var {}
cite {}
q {}
del {}
ins {}
/* Miscellaneous
=============================================================================*/
hr {}
br {}
noscript {}
/* Layout
=============================================================================*/
#header {}
#footer {}
/* Navigation
=============================================================================*/
#menu {} -
Personally, I'd add an ol li {} and ul li {} just to make it easier to add styles to li's specific to each kind of list. Just because I've never used exactly the same styling for both (usually either custom bullets or disabling bullets and using background images of ul li etc. which you obviously don't want spilling over into ol lis)
-
- CommentAuthormariachi77
- CommentTimeDec 19th 2005 edited
I don't group my rules that way -- I tend to group by content structure. It's much easier for me to keep track of things that way.
For example:
Header
Navigation
Sub-navigation
Content
Footer
etc. -
here are my suggestions:
- in the font group, I'd go with em and strong instead of i and b respectively.
- in the global group, I'd add the universal selector: * {}
- I handle declarations in their context: menu styles, sidebar styles, footer styles. The reason behind my choice is that, if you make changes to an element of layout and have the stylesheet organized in the way you suggested, you have to look in a dozen different places for the various bits and pieces..
Here's some reading material concerning CSS organization and modularization:
http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html
http://www.contentwithstyle.co.uk/Articles/12
http://www.digital-web.com/articles/architecting_css/
http://web-graphics.com/mtarchive/001649.php
hope they help. (PS: I thought they will turn into hyperlinks when i post them; sorry for the extra copy-paste work :) ) -
Dan Burzo, thank you for your reply. em and strong are in the Phrase group because they don't describe font properties, but phrase properties. I can emphasize text by making it bold and make the text strong by making it blocky or with a bigger size. It just happens that they chose italics and bold, but they don't mean the same thing as b and i.
-
- CommentAuthordpelletier
- CommentTimeDec 20th 2005
Do you think it's beneficial to have every single element in the template?
Myself, I usually start with a pretty basic stylesheet that contains the preset globals I like to work with, and my structural naming conventions. I could see this being useful as a reference, but it seems like an awful lot to look at when starting a site.
As a sidenote, I've never had any experience having to define styles for map and area.
And if you're going to go the whole nine, might want to throw in a:hover {} -
-
CommentAuthoradjustafresh
- CommentTimeDec 22nd 2005
I agree with dpelletier as far as placing every HTML element under the sun in the style sheet. My global CSS file starts out looking like this (I add elements, IDs and Classes as needed):
/***************************************************
HTML ELEMENTS
***************************************************/
body {
margin: 0;
padding: 0;
font-family: "Lucida Sans", "Trebuchet MS", Arial, Verdana, Tahoma, Helvetica, Sans-Serif;
font-size: 100%;
color: #555;
background-color: #FFF;
/* text-align: center; CENTERS A CONTAINER DIV IN IE */
}
* {
margin: 0;
padding: 0;
text-align: left;
}
abbr, acronym, dfn {
border-bottom: dotted 1px #999;
cursor: help;
}
table {
border-collapse: collapse;
border: none;
margin: 0;
padding: 0;
}
a {
color: #F00; /* RED (EDIT COLOR AS NEEDED) */
}
a:visited {
color: #555; /* MATCHES NON-LINK FONT COLOR */
}
a:hover {
text-decoration: none;
color: #00F; /* BLUE (EDIT COLOR AS NEEDED) */
}
a:active {
color: #000; /* BLACK (EDIT COLOR AS NEEDED) */
}
a img {
border: none;
}
/***************************************************
COMMON CLASSES
***************************************************/
.center {
text-align: center;
}
.right {
float: right;
}
.hide {
display: none;
} -
1 to 7 of 7