Scribd
Upload
73 views

CSS Basics: by R.A. Sheikh

CSS (Cascading Style Sheets) allow styling of web documents by adding styles like fonts, colors and spacing. Stylesheets provide standards and uniformity across a website. HTML elements are bound to stylesheets. Stylesheets allow global changes from a single location and <style> tags specify HTML tag styling. The DOM (Document Object Model) interfaces scripting languages to access and change web document content, structure and style dynamically. CSS, HTML and scripting languages like JavaScript comprise DHTML (Dynamic HTML).

Uploaded by

catchriyaz
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
73 views

CSS Basics: by R.A. Sheikh

CSS (Cascading Style Sheets) allow styling of web documents by adding styles like fonts, colors and spacing. Stylesheets provide standards and uniformity across a website. HTML elements are bound to stylesheets. Stylesheets allow global changes from a single location and <style> tags specify HTML tag styling. The DOM (Document Object Model) interfaces scripting languages to access and change web document content, structure and style dynamically. CSS, HTML and scripting languages like JavaScript comprise DHTML (Dynamic HTML).

Uploaded by

catchriyaz
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 22

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>

You might also like