Remember The Order of Margin/Padding Shorthand with TROUBLE

Quite often when I am working on a site or designing templates for others, I use the following set of style rules which is considered css shorthand.

.imgrgt {
	padding: 5px 0px 5px 10px;
	float: right;
}

The question came up recently on one of the forums as to what do each of these px’s refer to? 

Remember The Order of Margin/Padding Shorthand with TROUBLE is an old article by Chris Coyier, but it remains a good reminder.

Use the word TROUBLE to remember the order of padding/margin amounts in CSS shorthand. The trick is that the first four consonants in the word are the first letters of "Top", "Right", "Bottom" and "Left". He even includes a small graphic you can print out as a reminder.

If all of the units of measurement are the same, you can use the following shorthand:

padding: 5px;
 

One DWT – Two Separate “Looks”

On a recent makeover of the Migrating from FrontPage to Expression Web site, we wanted to use the same DWT but give the site two distinctive looks. WHY? Because Migrating from FrontPage to Expression Web consists of two separate parts:

  • The main site which supports the Migrating from FrontPage to Expression Web E-Book AND
  • Expression Web Site Templates which offers a series of generic templates for various layouts that can be added to your Expression Web software to give you a wider selection of default templates to build your sites

After designing the template and experimenting with various color combinations, we decided on stick with the current green for the main part of the site and a brown/orange combination for the site templates section. The same menus which are includes would serve both sections with a separate color combination. Because the sidebar is also an editable region, they could be arranged a bit differently for each of the sections.

The easiest way to achieve this was to develop the one DWT and use a separate style sheet for the two sections.

Besides the normal editable regions for the template, we added editable regions for the  meta tag to attach the style sheet as well as the banner area where the site name (graphic image) was inserted.

Code used:

<!– #BeginEditable “stylesheet” –>
<link href=”../styles/tem-project-site.css” rel=”stylesheet” type=”text/css” />
<!– #EndEditable –>

<!– #BeginEditable “bannerimg” –>
<div class=”banner”>
<img alt=”” class=”dynasize” src=”../images/orange-logo.gif” /></div>
<!– #EndEditable –>

End Result:

Screenshot Migrating from FrontPage to Expression Web.

Screenshot Migrating from FrontPage to Expression Web

Screenshot Expression Web Site Templates.

Screenshot Expression Web Site Templates

So if you are looking for an easy way to give a site the same but different looks, you might try this approach – one dynamic web template and two different style sheets.

How to adjust the spacing of the

paragraph tag using CSS

The <p> tag defines a paragraph. The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet. Suppose you want to  custom adjust the automatic spacing added around a paragraph of text in HTML. You can easily do that by creating style rules for the p tag itself or create a class with style rules to apply to the <p> tag.

Example:

This  style rule p { margin-bottom: 1em; margin-top: 1em; } added to your external style sheet, would add a top and bottom margin of 1em to ALL of your paragraphs.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus accumsan dolor ac orci? Pellentesque vitae libero in lacus tincidunt ultricies! Nam eleifend ultricies dui! Quisque mattis tempus ligula. Nulla non diam in arcu adipiscing porttitor. Nulla libero mi, suscipit id, semper eu, lobortis non, metus! Sed dui pede, consectetuer vitae, adipiscing et, posuere quis, nulla. Mauris ornare semper justo. Morbi at libero ut justo ultrices dignissim? Cras nunc. Sed metus quam, consequat vel, euismod et, pulvinar ut, sem. Vestibulum euismod massa posuere massa.

Example:

This style rule  p { margin: 50px;  } would add a top, right, bottom, and left,  margin of 50px to ALL of your paragraphs.

Quisque imperdiet turpis vitae metus. Vivamus consectetuer mauris non massa. In pretium, turpis et adipiscing elementum, ligula ipsum elementum risus, eget rhoncus nunc orci vel mi. Cras nunc. In ac eros nec tellus blandit suscipit. Sed aliquet luctus lectus. Nunc eleifend iaculis arcu. Phasellus mollis elementum pede. Integer et quam eu velit interdum laoreet. Sed sapien dolor, gravida non, congue eget, consequat sed, enim. Sed bibendum orci in nisl. Suspendisse elit? Sed ut magna. In dignissim. Nulla ornare pharetra libero. Praesent nunc magna, placerat congue, pretium et, ultricies sit amet, elit? Morbi enim nisl, sagittis ut, lobortis eget, blandit tincidunt, urna. In rutrum, diam vel dignissim consectetuer, libero pede pulvinar tortor; semper tincidunt massa nibh quis ipsum. Donec id nisl nec nisl varius porta. Cras ac purus.

If you do not want the style rules to apply to all paragraphs within your site, then create a class and apply the class to the <p> tag.

Example:

p.smspace {margin: 2px 0px}

<p class=”smlspace”>Paragraph of text would go here.</p>

Quisque imperdiet turpis vitae metus. Vivamus consectetuer mauris non massa. In pretium, turpis et adipiscing elementum, ligula ipsum elementum risus, eget rhoncus nunc orci vel mi. Cras nunc. In ac eros nec tellus blandit suscipit. Sed aliquet luctus lectus. Nunc eleifend iaculis arcu. Phasellus mollis elementum pede. Integer et quam eu velit interdum laoreet. Sed sapien dolor, gravida non, congue eget, consequat sed, enim. Sed bibendum orci in nisl. Suspendisse elit? Sed ut magna. In dignissim. Nulla ornare pharetra libero. Praesent nunc magna, placerat congue, pretium et, ultricies sit amet, elit? Morbi enim nisl, sagittis ut, lobortis eget, blandit tincidunt, urna. In rutrum, diam vel dignissim consectetuer, libero pede pulvinar tortor; semper tincidunt massa nibh quis ipsum. Donec id nisl nec nisl varius porta. Cras ac purus.

Quisque imperdiet turpis vitae metus. Vivamus consectetuer mauris non massa. In pretium, turpis et adipiscing elementum, ligula ipsum elementum risus, eget rhoncus nunc orci vel mi. Cras nunc. In ac eros nec tellus blandit suscipit. Sed aliquet luctus lectus. Nunc eleifend iaculis arcu. Phasellus mollis elementum pede. Integer et quam eu velit interdum laoreet. Sed sapien dolor, gravida non, congue eget, consequat sed, enim. Sed bibendum orci in nisl. Suspendisse elit? Sed ut magna. In dignissim. Nulla ornare pharetra libero. Praesent nunc magna, placerat congue, pretium et, ultricies sit amet, elit? Morbi enim nisl, sagittis ut, lobortis eget, blandit tincidunt, urna. In rutrum, diam vel dignissim consectetuer, libero pede pulvinar tortor; semper tincidunt massa nibh quis ipsum. Donec id nisl nec nisl varius porta. Cras ac purus.

Experiment with the various styles you create to get the look you want.

7 tips to organize your CSS

Always on the lookout for articles on Cascading Style Sheets – CSS for short – I ran across this one this morning, 7 tips to organize your CSS. Do you already have a method for organizing your CSS? If not, try following these simple tips.

  1. Group your CSS files into a folder – Perhaps in additional to your main style sheet, you have one for print styles and one for your menu. Create a folder for all of your style sheets. Name it css or styles and make sure you save each of the style sheets within that folder. It may help you improved your website structure.
  2. Use efficient selectors – Understand how browsers read your css selectors, from right to left. Note that the use of efficient CSS selectors is a nowadays requirement.
  3. Comment and separate your CSS rules –  Do you remember what each of the style rules you created within your css are meant to be used for? Most style sheets contain some reset styles, styles for the header, navigation, content and footer. You can easily separate these and add comments to make them easier for you to work with. If you are using Expression Web and see a lot of style1, style2, style3, etc, etc, this is especially true.
  4. Create a simple color scheme to use for your styles – Your css file may use a lot common styles and colors. A css comment as simple as
    /* Colors: Light Gray #eaeaea, Dark Gray #828282, Red #c60000 */
    can be helpful to you.
  5. Use a meaningful naming convention for your selectors An example might include #header for the container for your masthead. #header for the imageg that appears within the masthead OR #header .title and #header .tagline.
  6. Create your own small CSS framework – By doing this you will be able to use these common CSS classes at any time for any elements from your markup.
  7. Simple is better

Read 7 tips to organize your CSS complete with more examples.  And while you are there, explore some of his other articles  and tutorials.

Structural Naming Convention in CSS

Found this interesting and informative post on the Six Revisions blog which is part of his CSS Tips series.

Structural naming convention means that you name elements by describing what they are, rather than where they are or how the look. You do this by assigning a class (dot) or id (# hash mark) to the element.  Presentational naming describes the location and/or appearance of web page elements.

The post discusses the concept of structural naming conventions, the benefits of using this convention, and shares some guidelines on practical applications of structural naming conventions.

First he gives an example (1) of a presentational naming layout and then discusses what is wrong with this approach. The presentational naming layout inlcudes:

  • #top-div
  • #left-col
  • #right-col
  • #bottom-div

The next example (2) uses a structural naming convention and includes the following:

  • #header
  • #main-content
  • #secondary-content
  • #footer

Example 3 really uses structural naming conventions which includes:

  • #branding
  • #main-content
  • #secondary-content
  • #site-info

The last example,using  fully-structural in naming conventions,  describes what the div’s and other elements are for, instead of where they are or how they look.

The second part of the post offers a few guidelines which include:

  1. When assigning a class or id, ask yourself “What is this element for?”
  2. Avoid using names that rely on locational or visual aspects of the particular element.
  3. Use names that are intuitive to you.

He also includes some Further reading resources on this same topic:

You can read  CSS Tip #2: Structural Naming Convention in CSS in its entirety.