Basic Cascading Style Sheets

Red Zorro sm
RedZorro.com
sm
We’ll hit the mark for you. sm

Basic Cascading Style Sheets (CSS)

Cascading style sheets are the wardrobe designer for HTML.  These style sheets can light-up your text, elements and webpages like models light-up runways on any given day or night of the week on Broadway in New York.  They can greatly reduce website design and programming time too.  These cascading style sheets are known as inline, internal and external style sheets.

 

Inline Style Sheet

The inline style sheet is the first type of style sheet.  It is a very simple style sheet that employs the style attribute, and affects only the line of code where it is embedded.  Two examples of a inline style sheet is stated directly below:

The first inline style sheet affects the h1 heading tag in where it is embedded, and prints it h1 heading in the Helvetica font:

  • <h1 style=”font-family: Helvetica; “>

The second inline style sheet affects the sentence or entire paragraph where the style is embedded; it prints in the sentence or paragraph in the Helvetica font and the font-size of 12pt:

  • <p style=”font-family: Helvetica; font-size: 12pt; “>Study HTML at least one hour per day.</p>

 

Internal Style Sheet

The internal style sheet is the second type of style sheet.  The differences between the internal style sheet and the inline style sheet is the internal style sheet employs the opening <style> and closing </style> tags, resides between the opening <head> and closing </head> tags, and affects all of the targeted code on a single webpage by employing selectors and declarations.  Together, selectors and declarations are known as a rule set.  The internal style sheet below contains two rule sets.

  • <head>
    <style type=”text/css”>
    h1 {font-family: Helvetica;}
    p
    {font-family: Helvetica; font-size: 12pt;}
    </style>
    </head>

When programming a lot of code on a single webpage, the internal style sheet is more handy than the inline style sheet.

 

External Style Sheet

The external style sheet is the most powerful style sheet of the three style sheets.  It can format the text, headers, lists, links, tables and forms on all of its associated webpages in a website at the same time.  To accomplish this massive task, it employs the link tag, which references the file your.css that contains the style sheet code that will affect all of the targeted code on one or all of the associated pages in the website.  An external style sheet is stated directly below:

  • <link rel=”stylesheet” type=”text/css” href=”your.css” />
  • h1 {font-family: Helvetica;}
  • p {font-family: Helvetica; font-size: 12pt;}

This external style sheet employs the same two rule sets as does the internal style sheet we discussed earlier, and it will accomplish the exact same task.  But this external sheet is just one type of external style sheet.  You’ll learn about another type of external style sheet later in the article.

But the beauty of style sheets is not just their ability to style the webpages and the content of webpages.  They can greatly reduce website design and programming time too.  and when it comes to reducing website design and programming time, the external style sheet is the number one method when employing style sheets.

For example, the external style sheet can code the 150 webpages where 1,500 paragraphs of your novel exist with the greatest of ease.  It can also handle the other 300 pages (3000 paragraphs) of your novel immediately upon the pasting of them into the webpages of your website where an external style sheet is employed.  This external style sheet could handle the coding and styling of the total 600 web pages in the time it would take to write the style sheet, which would probably be about five minutes or so.  In other words, the external style sheet can be the last one called, face unexpected turbulence, and get the job done in record time.

But if you employed an internal style sheet to code the 4,500 paragraphs, it would take you about 2 hours to do so, and an eternity to do so with an inline style sheet – we’ll leave the food in the oven for you.

And website design and programming time can further be reduced by employing pre-installed style sheets and the shorthand method of writing them.

Let’s say, for example, you’re working on a large website project, and suddenly you receive calls from several of your website design clients who are requesting immediate upgrades to their static websites in the area of tables, forms, links and lists.  To manage time with these website requests, you could have pre-installed style sheets, even if the rule sets of these style sheets would not have immediately affected the website at the time of its initial uploading to the internet; meaning, you could have designed styles sheets with preinstalled rule sets to manage tables, forms, links and lists via an internal or external style sheets because the code will not affect the tables, forms, links and lists until these elements are actually placed into the webpages and then uploaded to the internet.

The other means of reducing programming time employing style sheets is via the shorthand method, but I’ll leave the fun of researching the shorthand writing of style sheets to you.

So now when you receive calls from website clients requesting immediate upgrades to their websites, doing so would be a breeze, because the only thing that would be required is the insertion of the code into the webpages.  And once the code insertion has been completed, the pre-installed rule sets would automatically act on the newly inserted code in the webpage(s) upon the uploading of the webpages to the server, and clicking the refresh button on the browser.

 

Now that you know the potency and reach of style sheets, let’s clarify the order in which these three style sheets affect webpages.

Inline, internal and eternal style sheets can simultaneously exist on the same webpage.  In the event that this style sheet situation occurs within your website projects, the order in which these three style sheets will affect the webpages are stated below:

  1. Inline style sheets overrule internal style sheets.
  2. Inline style sheets also overrule external style sheets.
  3. Internal style sheets overrule external style sheets.

This is the order in which style sheets affect webpages, which brings to mind the style sheet backup protocol H</ssBp>h.  This style sheet backup protocol was just created by me after stating the priority in which style sheets affect webpages.

H</ssBp>h

What if your internal style sheets on several of your webpages suddenly became invalid, or your external style sheet file suddenly became invalid, would it be great to have a backup style sheet in place so that your webpages would still display as you would want them to display?  The answer is yes.

Activating the style sheet backup protocol is a very simple.  Simply place both the internal and the external style sheets that share the exact same rule sets inside of the head tags of the associated webpages and your style sheet backup protocol will immediately take affect upon the saving of the webpage to the internet connected server.  Activating your style sheet backup protocol H</ssBp>h is just this simple.

 

So now that you know that style sheets can save you a lot of website design and programming time, and, too, style sheet backup protocol is cool, lets move forward to increasing your understanding of writing inline, internal and external style sheets.

Take a look at the two inline style sheets below.  These two style sheets employ the style attribute and its attribute value to style HTML code.  When employing the style attribute method, you must place a space between the tag and the attribute, place an equal sign between the attribute and the attribute value with no space between them, place a colon and a space between the, in this case, the font-family and the font, place the entire attribute value inside of double quotation marks with a semicolon at the end and no space, and then add the closing header tag.  The two inline style sheets below are written correctly.

  1. <h1 style=”font-family: Helvetica; “>
  2. <p style=”font-family: Helvetica; font-size: 12pt; “>Study HTML at least one hour per day.</p>

 

Now let’s look at writing an internal style sheet.

An internal style sheet employs a selector and a declaration that could consist of a single selector, a single property and property value, or more than one selector, property and property value, where the selector is stated first and the enclosed property and property value enclosed in curly brackets are stated next, and then housed between the opening and closing style tags.  Take a look at the generic style sheet below:

  • <style attribute=”attribute value”>
    Selector {property: property value;}
    </style>

When writing an internal style sheet, you must first place the opening <style> tag, create a space, insert the attribute and attribute value with a equal sign separating them, enclosed the entire attribute value inside of double quotation marks, and then apply a temporary closing tag.  Next, drop down one line and add the selector, create a space, and then add the opening curly bracket and the property followed directly by colon, create a space, and then add the property value followed directly by a semicolon, and then add the closing curly bracket, Finally, drop down one line and add the closing </style> tag.  This style sheet will change the text of every paragraph to the Arial font.

  • <style type=”text/css”>
    p {font-family: Arial;}
    </style>

The internal style sheet directly below is a complete internal style sheet.  It consist of three rule sets, with each rule set containing one selector and a declaration that consist of two properties and two property values.  When placed between the opening and closing head tags, and uploaded to the internet, each paragraph on the webpage will be written in the Arial font and the font-size of 12pt; each h3 header tag on the page will be written in the Helvetica font and the font-size of 12pt; and all data in the table on the webpage will be written in the Helvetica font and the font-size of 8pt.

  • <head>
    <style type=”text/css” >
    p {font-family: Arial; font-size: 12pt;}
    h3 {font-family: Helvetica; font-size: 12pt;}
    table {font-family: Helvetica; font-size: 8pt;}
    </style>
    </head>

And when writing your style sheets, keep them simple and organized, so that anyone on your programming team can easily follow their structure.

For example, take a look at the five internal style sheets below.  Style sheets 1 and 2 are written in a sentence-like format.  Style sheets three (3) and four (4) are written in a stacked style sheet format, and style sheet five (5) is written in an altered stacked style sheet format where the last curly bracket in the declaration resides below the declaration.  Style sheets three, four and five are the preferred style sheet formats, but when writing style sheets for the first time, employ the sentence-like style sheets of 1 and 2 to keep the process of writing style sheets simple and organized, and once you have completed writing the rules sets of the style sheets, only then should you stacked them.  As for which style sheet preference works for me,  the stacked style sheet formation (Pancake Stack) of three and four is the choice for me.

  1. <style type=”text/css”>p {font-family: Helvetica; font-size: 10pt;} h1 {font-family: Helvetica; font-size: 8pt;} table {font-family: Helvetica; font-size: 8pt;}
    </style>
  2. <style type=”txt/css”> p {font-family: Helvetica; font-size: 12pt;} h2 {font-family: Helvetica; font-size: 10pt;} table {font-family: Helvetica; font-size: 8pt;}
    </style>
  3. <style type=”text/css”>
    p {font-family: Arial; font-size: 12pt;}
    h3 {font-family: Helvetica; font-size: 12pt;}
    table {font-family: Helvetica; font-size: 8pt;}
    </style>
  4. <style type=”text/css”>
    p {font-family: Courier New; font-size: 10pt;}
    h4 {font-family: Helvetica font-size: 14pt;}
    table {font-family: Helvetica; font-size: 8pt;}
    </style>
  5. <style type=”text/css”>
    p {font-family: Courier New; font-size: 12pt;
    }
    h5 {font-family: Helvetica; font-size: 16pt;
    }
    table {font-family: Helvetica; font-size: 8pt;
    }
    </style>

 

Now let’s look at writing an external style sheet.

The external style sheet below employs the link tag, but the rule sets, unlike in the internal style sheet, resides in another file such as your.css.  The style sheet consist of the link tag, three attributes, three attribute values and the closing tag that consist of the forward slash and greater than carrot symbol minus the word link.  A space is place between the file name and the closing tag.

  • <head>
    <link rel=”stylesheet” type=”text/css” href=”your.css” />
    </head>

The rule sets for the external style sheet above are stated below.  In the style sheet, there are eight (8) rule sets that consist of 8 selectors and 8 declarations.  These rule will affect all of the webpages associated with the external style sheet directly above:

body {background-color: white;}
h6 {font-family: Helvetica;
font-family: Arial;
font-family: Calibri;
font-family: Corbel;
font-size: 18 pt;}
p {font-family: Helvetica; font-size: 10pt;}
table {font-family: Helvetica; font-size: 8pt;}
td {height: opx ;  width: opx ; background-color: white;}
a: link {color: blue;}
a: visited {color: purple;}
a: active {color: green;}

 

The last external style sheet we will discuss is the imported style sheet.

The imported external style sheet employs the opening and closing style tags and the @import statement.  The @import external style sheet is stated below, and though only one file is required, this external style sheet imports two external style sheets at the same time to manage its associated webpages.  These two style sheet resides in the styles folder (stylefolder) and employs the maintenance.css and the picturesque.css files.  The maintenance.css file handles the code, and the picturesque.css file handles the look and fill of the webpage:

  • <head>
    <style type=”text/css” media=”screen”>
    @import “/stylefolder/maintenance.css”;
    @import “/stylefolder/picturesque.css”;
    </style>

    </head>

So when working with any style sheet, ensure that the style sheet is written correctly, so that it will affect its associated pages correctly and display correctly in its targeted browsers.

The cascading styles sheet (CSS) module concludes our article on Basic HTML Programming.  If the article has motivated you to become a startup website designer and programmer, purchase this beginner’s HTML reference guide, or purchase the HTML and Cascading Style Sheets reference guides of your choice to further your understanding of Basic HTML and Cascading Style Sheets.

Finally, we hope this article has served you and its purpose well. 

 

Copyright 2018       RedZorro.com       All Rights Reserved.