DBTI Grade 8: September 2013

Wednesday, September 18, 2013

Introduction to CSS

What is CSS?

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

CSS Demo

An HTML document can be displayed with different styles:See how it works

Styles Solved a Big Problem

HTML was never intended to contain tags for formatting a document.
HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.
All browsers support CSS today.

CSS Saves a Lot of Work!

CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

First Quarter Activity

"Personal Info"
<HTML>
<HEAD>
<TITLE> PERSONAL INFO </TITLE>
</HEAD>
<BODY BGCOLOR="GREEN">
<P> <H2> MY NAME IS COBAIN D. GONZALES AND I AM AN 8TH GRADER. I WAS BORN IN OLONGAPO ON MAY 8, 2000. I LIKE ANIME ESPECIALLY THE FIVE MOST FAMOUS ONES RIGHT NOW NAMELY DRAGON BALL Z, NARUTO, BLEACH, ONE PIECE, AND KATEKYO HITMAN REBORN. </P> </H2>
<P> <H2> I GO TO SCHOOL EVERYDAY AT 6AM AND I HATE THE PART WHEN MY MOM WAKES ME UP IN THE MIDDLE OF MY INCREDIBLE ACTION-ROMANCE DREAM. I AM CURRENTLY LEARNING IN DBTI TARLAC. I AM 13 YEARS OLD. THAT'S ALL YOU NEED TO KNOW ABOUT ME. </P> </H2>
</BODY>
</HTML>

"Family"
<HTML>
<HEAD>
<TITLE> PERSONAL INFO </TITLE>
</HEAD>
<BODY BGCOLOR="GREEN">
<P> <H2> MY PARENTS ARE CHRISTOPHER GONZALES AND BEBELYN GONZALES. I HAVE THREE SIBLINGS CRYSTAL, CAMERON, AND CAIN. I AM THE OLDEST OF US FOUR. </P> </H2>
</BODY>
</HTML>

"Friends"
<HTML>
<HEAD>
<TITLE> FRIENDS </TITLE>
</HEAD>
<BODY BGCOLOR="GREEN">
<P> <H2> I HAVE MANY FRIENDS. </P> </H2>
</BODY>
</HTML>

"Favorites"

<HTML>
<HEAD>
<TITLE> Faves </TITLE>
</HEAD>
<BODY BGCOLOR="GREEN">
<P> <H2> THESE ARE MY FAVORITE THINGS IN MY LIFE. </P> </H2>
<center><img src="vanschimapro.jpg"></center>
<center><img src="ichigonewzangetsu.png"></center>
<center><img src="
</body>
</html>

"Free Wall"
<HTML>
<HEAD>
<TITLE> free wall </TITLE>
</HEAD>
<BODY BGCOLOR="GREEN">
<center><img src="glennquagmire.png"></center>
<img src="glenn.gif">
<center><img src="consuela.png"></center>
<center><img src="consuelamario.jpg"></center>
<center><img src="upsidedownkid.png"></center>
</body>
</html>