tm 1st quarter - 3rd meeting

Understanding CSSUsing the Internal Method, External Method,

and Inline Style to Insert CSS Code

Engr. Esmeraldo T. Guimbarda Jr.

What is CSSCSS stands for Cascading Style Sheets. They are a way to control the look and feel of your HTML documents in an organized and efficient manner. With CSS you will be able to:

• Add new looks to your old HTML

• Completely restyle a web site with only a few changes to your CSS code

• Use the “style” you created on other webpages/websites

A style sheet can, and should be, completely separate from your HTML documents. When you have mastered CSS and HTML, you will be able to separate your website’s design and formatting (CSS) from the content (HTML).

BENEFITS OF USING CSS

• Consistency

If you make one change to your website’s CSS style sheet, the change can automatically apply to every page of the website. The bigger your website, the more time CSS saves you.

• Bandwidth Reduction

When CSS separates your website's content from its design language, you dramatically reduce your file transfer size. Your reduced bandwidth needs will result in a faster load time and could cut your web hosting costs.

• Search Engines

CSS is considered a clean coding technique, which means search engines won't have to struggle to "read" its content.

• Browser Compatibility

CSS stylesheets increase your website's adaptability and ensure that more visitors will be able to view your website in the way you intended.

• Viewing Options

Another common web design concern is the increasing need to make websites available for different media. CSS can help you tackle this challenge by allowing the same markup page to be presented in different viewing styles —— for example, you may create a separate stylesheet for print or for a mobile device.

CSS SYNTAX

The CSS syntax is different from that of HTML, though it is not too confusing once you take a look at it. It consists of 3 parts.

Each selector can have multiple properties, and each property within that selector can have independent values. The property and value are separated with a colon and contained within curly brackets. Multiple properties are separated by a semi colon. Multiple values within a property are sperated by commas, and if an individual value contains more than one word you surround it with quotation marks, as shown below:

INHERITANCEWhen you nest one element inside another, the nested element will inherit the properties assigned to the containing element. Unless you modify the inner elements values independently.For example, a font declared in the body will be inherited by all text in the file no matter the containing element, unless you declare another font for a specific nested element.

Now all text within the HTML file will be set to Verdana.

If you wanted to style certain text with another font, like an h1 or a paragraph then you could do the following:

Now all <h1> tags within the file will be set to Georgia and all <p> tags are set to Tahoma, leaving text within other elements unchanged from the body declaration of Verdana.

Combining SelectorsYou can combine elements within one selector in the following fashion:

As you can see in the above code, The header elements have been grouped into one selector. Each one is separated by a comma. The final result of the above code sets all headers to green and to the specified font.

Comment TagsComments can be used to explain why you added certain selectors within your css file. They are also used to help others who may see your file, or to help you remember what you we’re thinking at a later date. You can add comments that will be ignored by browsers in the following manner:

Inserting a CSS CodeInternal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

External Style SheetAn external CSS file can be created with any text or HTML editor such as Notepad or Dreamweaver. A CSS file contains no HTML code, only CSS. You simply save it with the .css file extension. You can link to the file externally by placing one of the following links in the head section of every HTML file you want to style with the CSS file:

Or you can also use the @import method as shown below:

By using an external style sheet, all of your HTML files link to one CSS file in order to style the pages. This means that if you need to alter the design of all your pages, you only need to edit one .css file to make global changes to your entire website.

CSS vs. Inline Styles

Inline styles are defined right in the HTML file alongside the element you want to style. See example below:

Activity

1. Open Notepad++. Click on Start > All Programs > Notepad++ folder > Notepad++.

2. Create a new HTML file by clicking File > New, or pressing Ctrl+N on your keyboard.

3. Save the HTML file

* Create a folder named “songs” and go to that folder

* Save the file as “index.html”.

Note: To save the file, go to File > Save As. Type “index.html” in the File name box. Select Hypertext Markup Language file in the Save as type selection menu. Save the file in your desktop.

4. Type the basic skeleton code of an HTML document in index.html. Define the title as “’s Songs”. In this case, we’ll use “The Script’s Songs” as an example.

5. Let’s put the content of the body. Add a heading using the < h1 > tag and define it as “< Your Favorite Band >’s Songs”, similar to what you’ve typed in the title. Display three of your favorite band’s songs as links using the href attribute. Each of them should link to an html file whose file name is identical to the song title.

6. Create the html files for the three songs you have listed. For every song, click File > New, then File > Save As. Type the song title in the File name box. Select Hypertext Markup Language file in the Save as type selection menu. Save the file on the folder created (song folder).

7. Type the basic skeleton code of an HTML document in the html file of each song. Define the title as the actual song title.

8. Encode the lyrics of each song (chorus) , and place them on the body of the corresponding html file using a paragraph tag (< p >). Add a heading and define it as “< Band Name > - < Song Title >”. Add a line break (< /br >) after every line of the lyrics.

9. At the end of each lyrics, add a link that goes back to index.html and name it “Back”. Sample code:

< a href = “index.html>Back< /a>

10. Insert CSS code using the internal method to modify the appearance of the first song’s page. The code should be placed between the < head > and < /head > tags. The code should be able to change the body’s background and font family. Sample code:

11. To modify the appearance of the second song’s page using the external method, you must first create an External Style Sheet. Click File > New, then File > Save As. Type “style.css” on the File name box. Select Cascade Style Sheets File in the Save as type selection menu. Save the file on your songs folder.

12. Add CSS code to your External Style Sheet. The file should not contain any HTML tags. The code should be able to change the body’s background and font family. Sample code:

13. Link the second song’s html file to the external stylesheet. Add this code between the < head > and < /head > tags:

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

14. Insert CSS code using the inline style to modify the appearance of the third song’s page. The code should be able to change the body’s background and font family, therefore the code should be inserted in the < body > tag. Sample code:

15. Save the file by clicking the Save all icon . Open the index.html file in a web browser.