Unit iii css and javascript 1

Chapter 11:
USING CASCADING
STYLE SHEETS

REVIEW
 WHAT IS THE FULL CODE TO START A WEB
PAGE./HTML DOCUMENTS?
 WHAT IS THE FULL CODE TO CHANGE THE
BACKGROUND TO GREEN?
 WHAT IS THE HTML CODE TO USE IMAGE AS
BACKGROUND?
 WHAT IS THE CODE TO START A PARAGRAPH
AND INSERT A NEW LINE.
 HOW TO CHANGES THE FONT ATTRIBUTES.
 WHAT IS THE FULL CODE TO INSERT A TABLE?
 WHAT IS THE FULL CODE TO INSERT A VIDEO?

WHAT IS CSS?
 CSS stands for Cascading Style Sheets.
 It is a style language that specifies the
layout of HTML documents.
 Many of the properties used in CSS are
similar to those of HTML, thus basic
experience with HTML is a pre-requisite.
 Using CSS allows you to separate the
page’s contents from the page’s layout.
 CSS takes care of the layout while HTML
handles the content’s structure.

CSS allows you to
 Save a lot of time- you can apply a set of
styles to several parts of the web pages.
 Control the layout of many Web pages
from one single style sheet only- you don’t
need to go to entire pages just to change
every code.
 Apply more advanced and sophisticated
layout techniques.- CSS offers more
formatting elements compared to standard
HTML.

How do we write in CSS?
 The following is the basic syntax of CSS:

Selector {property: value}

attribute
HTML Value of
tag the
attribute

Body {background-color: #FFCC00;}

APPLYING CSS TO AN HTML
DOCUMENT
 The 3 styles you can use to apply CSS are:
 1. in-line style
 2. internal style
 3. external style

 IN-LINE STYLE- is also called the attribute
style because style attributes are placed
within the HTML tag to be affected.

 You may use the in-line style if you need
to apply a set of styles to only a single
element in the web page. Otherwise, it
forfeits the main purpose of CSS, which
is to separate web content from layout
or presentation.

 INTERNAL STYLE- is also called the tag
style because CSS codes are placed
within the <head></head> tag using the
<style> tag.

 You may use the internal style if you
need to apply a set of styles to the
elements that are all found in a single
web page. This is helpful if you want that
the style will be exclusive for a single
web page only.

 EXTERNAL STYLE- is a text file with
.css extension. The HTML documents is
linked to the style using an HTML code
which is inserted in the header section
of the HTML document.

 <html>
 <body style=“background-color: Dim gray;
color: powder blue; font-size: 15pt; margin-
left: 30px;”>

 <html>
 <head><title>Internal CSS style</title>
 <style type= “text/css”>
 Body{background: white url(“wallpaper.jpg”)
no repeat fixed center;}

 <html>
 <head><title> External Style
Sheet</title>
 <link rel= “stylesheet” type= “text/css
href= “style.css”/>
 </head>

COMPUQUIZ
 The acronym CSS stands for?
 What is the main purpose of the CSS?
 CSS allows you to?
 What is the basic syntax of the CSS?
 What are the three styles of CSS?
 Which style is known as the attribute style?
 Which style is specified within the head
tag?
 It is a text file with .css extension.

Unit iii css and javascript 1

More Related Content

What's hot (18)

Viewers also liked (7)

Similar to Unit iii css and javascript 1 (20)

More from Jesus Obenita Jr. (20)

Recently uploaded (20)

Unit iii css and javascript 1