Understanding CSS

1. Understanding CSS
Using the Internal Method, External Method,
and Inline Style to Insert CSS Code
Engr. Esmeraldo T. Guimbarda Jr.

2. What is CSS
CSS 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

3. 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).

4. 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.

5. • 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.

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

7. • 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.

8. • 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.

9. 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.

10. 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:

11. INHERITANCE
When 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.

12. 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.

13. Combining Selectors
You 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.

14. Comment Tags
Comments 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:

15. Inserting a CSS Code
Internal 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:

16. External Style Sheet
An 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:

17. 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.

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

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

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

21. 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.

23. 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.

24. 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.

26. 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).

27. 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.

28. 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.

30. 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>

31. 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:

32. 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.

34. 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:

35. 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" />

37. 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:

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