As we discussed previously, in the early days of HTML, web pages were composed mostly of text content with a few static images. In this way, web pages were much like the kinds of documents people had been creating in programs like Microsoft Word and Corel WordPerfect for a long time. These programs let you format your document and the text, give it styling such as bold; coloring; italics; different fonts; letting you add margins, headers, and page numbers; etc. Likewise, the early versions of HTML let you add these same features using specialized tags such as:
<b> for bolding – ex: <b>bold</b>
<i> for italics ex: <i>italics</i>
<u> for underline ex: <u>underline</u>
<s> for strikethrough text ex: <s>strikethrough</s>
<center> for centering text or other content on a web page
<font> for specifying the font style, color, and size to one or more words ex: <font color=”orange” face=”Courier” size=”12″>font</font>
HTML files with a lot of text content would be very long and difficult to read due to the number of tags interspersed amongst the text.
Whenever a global text style change was needed, the developer would have to go into each HTML file of a web site and change every instance of applicable text, by hand.
Thus, the problems were readability and understandability of code, which is very important to software and web developers; and of scalability, which is important to executives and clients expecting to see changes or fixes made quickly, across an entire project. These problems, which would become very prominent over the long term, were realized shortly after HTML 2.0 was released in 1995. A new convention known as Cascading Style Sheets, or CSS, was created to deal with these problems.
CSS acts as a directory of all the styles you need, whether it’s for one HTML page or an entire website. Once a style is specified, all a developer has to do is call that style anywhere it is needed in a web page or website, and all of the style’s parameters will be applied. This keeps all the styling code in one place, and it cleans up the rest of the code for development. CSS code is not rendered by a web browser, but you see its outputs in styled text on the web pages you view online.
CSS code can be used in two ways:
Inline a style that is specified within the HTML page and/or the content that uses it.
External one or more styles are defined in a separate file with the extension “.css”, and this file is called by HTML pages using the <link> tag within the <head> tag.
The most common method of applying CSS is to use an external file that contains all the styles as defined by the developers, sometimes in conjunction with marketing, legal, and other departments in an organization. In the following lab, you will start by applying an inline style to text within a web page, and transition that style to an external .css file to be called by your HTML page.
Launch the Notepad++ application.
As we’ve demonstrated in the HTML activities thus far, there are ways to modify text and other types of content at a minute level. Up to this point, that control has been handled in a case-by-case format, highlighting bits of text or individual objects and changing their visual attributes with buttons.
Incorporating CSS into your web pages gives you greater, easier control over your content. Let’s begin trying some CSS code by first learning how to add inline styles into an existing HTML file. Place the cursor in the first <p> tag under the <body> tag.
With the cursor inside the <p> tag, enter a space after the p, and type style=. This is a global attribute, which means it can be used with any HTML tag. The style attribute tells web browsers that CSS needs to be applied to anything between the open <p> tag, and the closing </p> tag.
After style=, type the following (including quotation marks):
color:blue;font-family:Arial;font-size:14px;text-align:center;
Save your file. Then, in the Notepad++ menu bar, click Run > Launch in (browser name). The browser you selected to launch to in the menu should appear after a second or two, and your HTML file should be loaded. Notice what the inline style you typed did to the text in the first <p> tag.
Using inline CSS styles at this level lets you control as many properties of the content in this specific tag as you wish. If you wanted to use this inline style on another <p> tag, or perhaps on a header <h(x)> tag, you could copy the style attribute and paste it wherever you choose. This format does however replicate the scalability problem that the old <font> tag had. So where’s the scalability beef, then?
CSS can also be applied as an internal style sheet. In this implementation, the CSS code is added in the HTML document’s <head> tag. Let’s start applying this method by making sure Notepad++ is open with your HTML file loaded, and placing the cursor at the end of the <title> line in the <head> tag.
Add a carriage return to go down to a blank line, and type the tag <style>. In this CSS method, “style” is not an attribute; it is a tag. Make another carriage return and type the following:
blockquote {
background-color:grey;
color:white;
font-face:Courier;
font-size:11px;
}
</style>
This code states that for every <blockquote> tag used, the style of that element, when rendered, will have a gray background and text in Courier font at 11 point size. Save your file and click Run > Launch in (browser name). You should see this sort of result.
But what if you want some block quotes to look differently than other block quotes? Place the cursor after the closing bracket of the “blockquote” style, and make two more carriage returns. Then, type the following code:
.special_blockquote {
background-color:green;
color:yellow;
font-face:Impact;
font-size:16px;
}
The next step is to choose some text in the HTML file, and place a carriage return before and after it. On the section of text you selected, place the open <blockquote> tag just before it, and the closing </blockquote> tag immediately after it.
Now you will apply your internal style sheet. Place the cursor just after “blockquote” in the opening tag, and add a single space. Type the following code:
class=”special_blockquote”
Adding this code to the <blockquote> tag means that at rendering time, this particular <blockquote> tag will apply the special_blockquote style, whereas the block quote from step 5 will use the default style.
Save your file and open the page in a browser. You should now see one block quote with a gray background and smaller white text, and a second with a green background and larger yellow text.
NOTE: The colors chosen in this exercise for demonstrating CSS have been chosen in the interest of making differences between styles obvious. The properties used are not recommended as color, font, or object styling conventions in the real world.
Return to Notepad++. The third and final method of applying styles is to utilize an external style sheet. This method is exactly as it sounds: using a file outside your HTML page that contains the CSS code that is called and referenced by your HTML file(s) to style the content.
Click File > New in Notepad++ to open a blank file. Save this new file as “teststyles.css” in your My Files > ITC4310 folder. With the new file saved, switch to your HTML file and copy the CSS code for the blockquote style from the internal style sheet. Only copy the CSS code; do not copy the open <style> tag. Switch back to the new CSS file, and paste the style code. Do not copy the special_blockquote style over to the new file; we will make use of that style later on.
Save the CSS file with the blockquote style pasted in. Switch back to your HTML file, and with the mouse cursor just before the “blockquote {” portion of code, type “<!–“. Now move the cursor to the closing bracket of the blockquote style and type “–>”.
Notice that the first style in the internal style sheet has turned green. This means that this code is commented out, meaning it will not be executed by the web browser when you view your page. Commenting is a common convention in coding, and it is used to help others viewing your code understand what your intent or use if for a particular section of code. The special_blockquote style remains black, indicating it will still render wherever it is called.
Presently you have an inline style that is applied on a <p> tag; an internal style sheet that is outlined in the <head> section via the <style> tag; and we have an external CSS file containing a single style. So does the HTML just “know” what file to use if there’s a CSS file present? The answer is no; we must specify via a specific tag that there is a CSS file to use, and which one.
In your HTML file, place your cursor just after the </title> tag, and make a carriage return. Then, type the following code:
<link href=”teststyles.css” rel=”stylesheet”>
The <link> tag you just typed is used to connect your web pages with other files. In this case, the href attribute calls the CSS file’s name directly, so the browser will know to look for this file in the same directory as the HTML file.
NOTE: If the CSS file were in a parent or sub-folder, you would have to include the directory prefixes before the file name in order for the browser to find the file.
The rel attribute must be used for the <link> tag to function. This attribute has several values, all of which tell the browser what kind of file is being requested. Since a CSS file is being called, the rel value should be “stylesheet.” This completes the process of linking your CSS file to your HTML web page.
At this point, ensure that both files are saved. Once that is done, make sure you have the HTML file active in Notepad++, and click Run > Launch in (browser name). Your HTML page should display the same as it did when you tested it in Step 7.
But how can we be certain the external style sheet is being called? Return to Notepad++ and in the <style> tag, highlight and delete the green commented style. Save the HTML file, and re-launch it in the browser. Notice that now, even with the style removed from the HTML <head> section, the gray-with-white-text style is still showing. This demonstrates that your CSS file is linked and being read successfully.
In this Unit’s lab you went into greater detail on your website plan, and practiced writing and modifying HTML code using a WYSIWYG editor. You ended the lab by gaining some experience with one of the most powerful tools there are in web design, CSS. While the scope of the tags, attributes, and properties we’ve used so far may seem small, it is by no means the extent of what’s available. There are literally hundreds of these to discover and experiment with in your web page files. Memorizing them is not important; you need only memorize the most necessary tags for displaying content. The Internet houses vast resources to help you when coding HTML5 and CSS3, and these resources will be readily available when you may need to add specialized content such as video or animations; style elements like <div> tags; and control the behavior of different content objects within your page.
