Fundamentals of CSS by Lynda – CSS Authoring options

When authoring your CSS, you have a few options available to you as to where you can write your styles.

External Style Sheet

You can place styles in their own separate CSS file. This is usually referred to as an External Styles Sheet.

17.jpeg

External Style Sheets are simply text files with a .css extension. Typically they’ll hold multiple styles that are designed to control an entire site or section of a site.

You apply these styles to pages by using a link tag in the head of a document. Using a link tag, you can even specify what type of media you would like to apply the styles to giving you a way to apply different sets of styles to printers, desktops, and mobile devices.

19.jpeg

Using External Style Sheets is the most efficient way of applying styles across an entire site.

Embedded Style

You can also place styles in the head of an existing HTML document. This is usually referred to as an Embedded Style.

Embedded Styles only apply to the documents they’re found in which make them inefficient for site-wide styling, but perfect for targeted styles that are specific for that page.

18.jpeg

Authoring Considerations

  • Most projects will rely heavily on external styles
  • Embedded styles are mainly used to overwrite external styles
  • You should plan an overall site strategy for style placement

 

You’ll find almost all of your projects will rely heavily on external CSS files with the occasional embedded style used to overwrite global styles.

Regardless of where you place your styles, the most important thing is to have an overall strategy that controls styling site-wide, and makes it easy for you to maintain or edit the styles when necessary.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s