CSS Basics
By
R.A. Sheikh
Cascading Style Sheets
Style Sheets are used for adding styles
(eg. Font, colors, spacing) to web
documents.
It provide standards and uniformity
throughout a web site and other dynamic
attributes.
HTML elements on web page are bound
with style sheet.
Cascading Style Sheets
The advantage of style sheet includes
ability to make global changes to all
documents from a single location.
<style>….<\style > tags are used for style
process.
Between this tags HTML tags are
specified.
Main points of DHTML
It is considered to be made up of
HTML
Cascading Style Sheets (CSS)
Scripting language
All three of these components are linked via
Document Object Model (DOM)
DOM is the interface that allows scripting
languages to access the content, style, and
structure of the web documents and change
them dynamically
Tools of DHTML
HTML
Partitions and Organizes the content
CSS
- Defines the Presentation of the content
Scripting - JavaScript, JScript, VBScript
Adds interactivity to the page
DOM- Document Object Model
Defines what and how elements are exposed
for script access
Main points of CSS
CSS is Cascading Style Sheets
It is a specification controlled by the
World Wide Web Consortium (W3C).
HTML controls the organization of a Web
page document
CSS controls the presentation and layout
of the Web page document elements
What CSS can do?
With CSS you can separate form from
structure
Control layout (alignment, spacing,
margins, colors, floating elements etc)
Maintain and update many pages
faster and easier
CSS-Terminology
CSS is declared as rules:
- Eg: H1 {color: green}
- Means that all text surrounded by the
<H1></H1> tags should be displayed in
green color
A rule has two parts
- H1 {color:green}
SELECTOR { DECLARATION }
CSS – Terminology…
Declaration has two parts:
HI {color : green }
property : Value
• In general:
• Element(s) {Property1:Value;
Property2:Value;}
• Eg.: H1, B {color:olive; background:yellow; font-
family: arial, courier }
CSS-Adding styles to web pages
Four ways
Embed a style sheet within HTML
document
Link to an external stylesheet from the
HTML document
Add styles inline in the HTML document
Importing style sheets
CSS-Embed a style sheet
All stylesheet information lies at the top of
the HTML code (in the head portion)
Eg:
<HTML>
<STYLE TYPE=“text/css”>
<!—H1 {color: green; font-family: impact}-- >
</STYLE>
<HEAD>
<BODY> . . .
CSS-Link to an external style sheet
An externally defined stylesheet is used as a style
template that can be applied to a number of pages
A text file (with ext .css) contains the stylesheet rules
to be applied to a page (or set of pages)
Eg. A file named ‘mystyles.css’
H1 {color: green; font-family: impact}
B {color: red; font-family: courier}
This file is linked to the HTML document (<LINK>)
In the web Page:
<HTML>
<LINK REL=stylesheet HREF=“mystyles.css”
TYPE=“text/css”>
<HEAD>
<BODY> . . .
Why use external css?
It keeps your website design and content separate.
It's much easier to reuse your CSS code if you have
it in a separate file. Instead of typing the same CSS
code on every web page you have, simply have
many pages refer to a single CSS file with the "link"
tag.
You can make drastic changes to your web pages
with just a few changes in a single CSS file.
Inline CSS
Applying stylesheets rules to particular HTML
tags
Eg:
<p style="background: blue; color: white;">A new
background and font color with inline CSS</p>
The style applies to only that particular <p> tag
CSS – Importing Stylesheets
Style Sheets which are external to the
HTML document are imported (included)
into the <style> element within the
<head> element of the current document.
Similar to linking, but useful when you
want to override some style rules when
you include it in your own stylesheet.
<style type="text/css">
<!-- @import
url(http://www.cen.com//houseBasic.css);
ul ul { list-style-type: circle; } --> </style>
The imported sheets must appear before
any document-specific styles
CSS- Classes
Selectively apply a style to HTML elements
you can define different classes of style to the
same element, and apply the appropriate class
of style when required
HTML
<P CLASS="first">The first paragraph</P>
<P CLASS="second">The second paragraph</P>
<P CLASS="third">The third paragraph</P>
Stylesheet
P.first { color: green }
P.second { color: purple }
P.third { color: gray }
DOM-Document Object Model
The Document Object Model is a
platform- and language-neutral interface
that will allow programs and scripts to
dynamically access and update the
content, structure and style of the
document
The DOM details the characteristic
properties of each element of a Web
page, thereby detailing how we might
manipulate these components and, in
turn, manipulate the page
DOM…
Document Object Model is not a "part" of
Scripting languages. The DOM stands
alone, able to be interfaced with any
programming language designed to do so
The W3C DOM is the recommended
standard to be exposed by each browser
Microsoft Internet Explorer and Netscape
do not share the same DOM.
DOM…
Both (IE and Netscape) DOMs break down Web
pages into roughly four types of components
Objects, Properties, Events and Methods
Objects :
Container which reflects a particular element of a
page
objects "contain" the properties and methods which
apply to that element
Example: the submit object
DOM…
Properties:
Characteristics of an object
Example: the ‘document’ object possesses a
‘bgColor’ property which reflects the
background color of the page.
Using a programming language (e.g.
JavaScript) you may, via this property, read
or modify the background color of a page
DOM…
Methods:
A method typically executes an action which acts
upon the object by which it is owned
Example: Alert
Events:
Used to trap actions related to its owning object
Typically, these actions are caused by the user
Example: when the user clicks on a submit button
Using <span> tag
Span tag play an important role in style sheets. In body of
the document, <span> … </span> tag is used to set
boundaries of the rule’s styling specification.
For eg.
<html>
<head> <style type=“text/css”>
P{font-size:12pt, text-align:justify}
.que {color:brown; font-style:italic}
.ans {color:red}
.big {font-size:25pt; color:red} </style> </head>
<body><body>
<p class=“que”>this <span class=“big” >style sheet </span>
class </p>
<p class=“ans”> style sheet class used in paragraph</p>
</body>
