ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

A Tutorial Series CSS for Beginners: Specifying CSS in Different Ways and the Resulting Cascading Order Impact

Updated on May 13, 2014

Goals for this Tutorial

The tutorials presented thus far in this series which began with the tutorial entitled, A Tutorial Series CSS for Beginners: Cascading Style Sheets - An Introduction have looked at a number of styling properties without addressing the "formal" structure of their inclusion in the HTML file and we have not really discussed the use of independent Cascading Style Sheets. This will be the major thrust of this tutorial. We will also try to reuse some of the attributes we have previously used as a way of review. We will also introduce some new styling elements to add to our "knowledge base".

Ways to Specify CSS Styling

There are three ways to specify CSS styling.:

  • an external style sheet (which we have not used as yet)
  • an internal style sheet which resides in the HTML file, and
  • "inline" styling.

The following sections discuss each method.


Creating and Using an External Style Sheet

An external style sheet is a great way to create a uniform style for a large number of web pages and can be a way of avoiding problems and conflict in style if it is implemented for a group of web developers. One developer can be a controller and arbiter for the external file.

The way an external file sheet is created is with the use of a plain text editor such as Notepad++ which is completely free. It uses color to highlight language keywords, has line number features, and block beginning and ending recognition which can aid in identifying typos. There are other editors in the marketplace, some have 30-day free trial periods and they work with other languages as well (e.g. HTML, XML, etc.).

To specify a external stylesheet you must use a link in the <head> of the HTML document. The stylesheet should also be specified with the .css type.

The following is a simple example. In the .html file:

<head>

.......whatever precedes it, then the CSS link is specified........

<link rel="stylesheet" type="text/css" href="astylesheet.css" />

......whatever follows

</head>

The contents of the style sheet should be identical to what we have been placing in the internal <style> block in the HTML file. The style sheet should not contain anything other than CSS code or CSS comment. The CSS individual statements (if you remember consist of a selector, followed by a declaration contained in curly braces. Within the declaration, we have CSS properties separated from their values by a colon, and terminated by semi colon. Example:

h1 {color:red; font-family:"Times New Roman", Arial, serif; text-align: center;}

One thing to note about the declarations. They tend to be "space sensitive". Don't leave a space between the property value and unit. Certain terms must be enclosed in quotations (e.g. in out example "Times New Roman" and always end the declaration with a semicolon.

Example of an External Style Sheet

Style sheets can become very complex of large and interactive web site. This example is merely an snippet of one page.
Style sheets can become very complex of large and interactive web site. This example is merely an snippet of one page.

Internal Style Sheets

In our first couple of tutorials we used internal style sheets. The are placed in the HTML header and separated from other header items by <style> and </style> tags.

Using an internal style sheets is not always a bad practice. For example, you are styling a unique page or testing certain style properties They are a convenience. If however you end up having a large number of pages which should have more or less the same style, replicating the style in inline style sheets is not only redundant but also prone to error. Any "one offs" between the web pages are better handled with the use of an id or class attribute in a external style sheet implementation.

Inline Styles

With inline styles, you begin mixing content and style. They can be used effectively for testing different options, but then should really migrate to an internal style sheet or for large web sites to an external sheet. It does not take much styling to "dwarf" the HTML content. Consider a simple header tag, for which you want to specify font family, font size,color and centering the text. It becomes:

. <h1 style="color:#cceeff;text-align:center;font-family:'Times New Roman', Arial, serif;

font-size:40px>This is a paragraph.</h1>.

The content here is lost!

Cascading Order in Styling

From lowest to highest priority in applying styling to an element. One has

  • browser (lowest priority) which is why we often write about "overriding the defaults"
  • the external style sheet. If there are multiple external style sheets specified in the head of a document, the first external sheet is the lowest priority style sheet. The last external style sheet has the highest priority.
  • the internal style sheet has higher priority than the external style sheet(s) with one exception. If the external style sheet definition follows that of the internal style sheet in the <header>, the external style sheet will supersede that of the internal sheet.
  • the inline styling is the final arbiter. It has the highest priority.

Looking at the CSS Style Applied to a Page

A sure way of know what style is in effect on a page is to open the page in a browser and while in the window right click and select "Inspect Element". This works for any page. The following two snapshots illustrate the procedure.

In this case, borrowed from my JavaScript tutorials a change was made to the browser default CSS. Since the styling was changed by a script, it appears inline with the targeted HTML element. Notice on the right bottom corner, font-size show a "strike through". The value 1.5em has been overridden by the CSS value passed by the script.

An Example of Inspecting the CSS Styling Via the "Inspect Element"

Right click anywhere in the web page displayed and select "Inspect element".
Right click anywhere in the web page displayed and select "Inspect element".
Bring into focus the element of interest, in this case the header element whose color was changed. Compare it with the CSS found in the bottom right hand corner.
Bring into focus the element of interest, in this case the header element whose color was changed. Compare it with the CSS found in the bottom right hand corner.

CSS Impacts All Aspects of Page Layout

Margins, padding, and borders are set via CSS attributes. CSS determines the layout of  a page. We will look at the method of laying out "box models" for pages in  future tutorials.
Margins, padding, and borders are set via CSS attributes. CSS determines the layout of a page. We will look at the method of laying out "box models" for pages in future tutorials.

Rate This CSS Tutorial on its Content and Clarity

Cast your vote for Was this tutorial clear and complete?

Wrap Up and What's Next

In this tutorial we covered the three ways of including CSS styling in a web page: an external CSS style sheet or sheets which are linked in via the <header> section of the HTML file; an internal style sheet which is included in the <header> section as well and delineated from other header sections by the <style></style> tags; and, inline styling, where the style attribute is insert within the relevant HTML tag.

The order in which the styling attributes are process was discussed as well. The browser has the lowest priority can can be overridden by the external style sheet. The external style sheet can be overridden succeeding external style sheets or the internal style sheet (with one exception noted above. The internal style sheet can be overridden by inline styling. The way to think of this is the "closer" the styling attributes are located to the target element, the greater the influence on the style imposed.

In our next tutorial we return to "unfinished business" of covering some basic styling: navigation lists, positioning of HTML elements, and understanding how fundamental of HTML and CSS interact.

Comments

    0 of 8192 characters used
    Post Comment

    • aesta1 profile image

      Mary Norton 

      3 years ago from Ontario, Canada

      I am beginning to understand CSS by reading your article and hope to read more to understand it better. Thanks for writing on this.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)