unit iii css and javascript 1
TRANSCRIPT
UNIT III: ADDING STYLES AND
INTERACTIVITY USING CSS AND JAVASCRIPT
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}
HTML tag
attributeValue of
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.