Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
78 views

Css Presentation

Cascading Style Sheets (CSS) allow separation of document content from document presentation through styles that define how elements are displayed. CSS was developed by the World Wide Web Consortium to create a consistent approach to style web documents. CSS rules contain selectors and declarations, where declarations have properties and values separated by a colon. There are different methods for linking or embedding stylesheets in HTML documents.

Uploaded by

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

Css Presentation

Cascading Style Sheets (CSS) allow separation of document content from document presentation through styles that define how elements are displayed. CSS was developed by the World Wide Web Consortium to create a consistent approach to style web documents. CSS rules contain selectors and declarations, where declarations have properties and values separated by a colon. There are different methods for linking or embedding stylesheets in HTML documents.

Uploaded by

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

Cascading Style SHEETS

Dynamic HTML is focused on making the web more


interactive.

W3C World Wide Web Consortium


http://www.w3.org
non-partisan organization for web standard

Microsoft Dynamic HTML Netscape Dynamic HTML


- cascading style sheet - cascading style sheets
- document object model and - layers
extensive scripting - absolute positioning via CSS
- absolute positioning via and Layers
cascading style sheets - canvas mode
- multimedia controls with - dynamic fonts
Internet Client Side SDK (Software
Dev’t Kit)
- dynamic tables including data
binding with Internet Client Side
SDK
1. CSS stands for Cascading Style Sheets
2. Styles define how to display HTML elements
-Its most common application is to style
web pages written in HTML and XHTML.
-CSS is designed primarily to enable the
separation of document content (written
in HTML or a similar markup language)
from document presentation, including
elements such as the layout, colors, and
fonts.
I.2 Cascading Style Sheets were developed as
a means for creating a consistent approach to
providing style information for web
documents.

The World Wide Web Consortium (W3C) created


CSS in 1994.
Lie-Cascading HTML Style Sheets(CHSS)
Bos-Stream-based Style Sheet Proposal(SSP)
CSS rule can be summarized as
1.Each has a selector and declaration
2.Each declaration has a property and value
3.Each declaration is surrounded by brackets
4.Each property and value is separated by colon
5.Selector separated by spaces are combined to narrow the selection
6.Selectors separated by commas share the same rule
7.Multiple declarations are separated by semicolons.

Linking to Style Sheets. There are several ways you can do depending on
what you need to do. Following are methods used for linking in or adding
styles.
1.Link to an external style sheet from your HTML document
2.Embed a style sheet within your HTML document
3.Add styles in line with your HTML document
4.Import one style sheets into another style sheets
1. Link to an external style sheet from your HTML document. Catering all styles
in a separate text file and store it in your HTML pages. Save your style sheet
files with .css extension and link it under the <HEAD> tag using <LINK> tag.

<HEAD>
<LINK REL=stylesheet href=“style1.css” type=“text/css”>
</HEAD>

2. Embed a style sheet within your HTML document.

<HTML>
<HEAD>
<style text=“text/css”>
<!-- body { background : white; font-family: helvetica }
p i { font-size: 14pt }
-->
</style>
</HEAD>
</HTML>
3. Add styles in line with your HTML document. You use the same
style <STYLE> tag with embedded styles, but you put it within the
declaration of the tag.

<H1 style = “color:blue; margin-left : 0.7in”>

4. Import one style sheets into another style sheets. Add the import
statement in the file.

body { background : white; font-family : helvetica }


p i { font-size: 14pt }
@import url(style1.css)
I.3 CSS Syntax
A CSS rule has two main parts: a selector,
and one or more declarations:

-The selector is normally the HTML element


you want to style.
-Each declaration consists of a property and a
value.
-The property is the style attribute you want to
change. Each property has a value.
CSS SYNTAX Example
-CSS declarations always ends with a
semicolon, and declaration groups are
surrounded by curly brackets:
p {color:red;text-align:center;}
To make the CSS more readable:
p
{
color:red;
text-align:center;
}
I.4 CSS Comments
 A CSS comment begins with "/*", and ends

with "*/", like this:


p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
II.1 CSS Backgrounds
II.1 EXAMPLES

A. Background Color
body {background-color:#b0c4de;}
The background color can be specified by:
 name - a color name, like "red"
 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"

B. Background Image
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
II.3 FONTS
 CSS Font Families
In CSS, there are two types of font family names:
 generic family - a group of font families with a

similar look (like "Serif" or "Monospace")


 font family - a specific font family (like "Times New

Roman" or "Arial")
Generic Family Font Family Description
Serif Times New Roman Serif fonts have
Georgia small lines at the
ends on some
characters
EX: Ai
Sans-serif "Sans" means
without - these
Arial
fonts do not have
Verdana
the lines at the ends
of characters
EX: Ai
Note: If the name of a font family is more than one
word, it must be in quotation marks, like font-
family: "Times New Roman".
Ex:
p{font-family:"Times New Roman", Times, serif;}

 Font Style
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
 Font Size
Always use the proper HTML tags, like <h1> -
<h6> for headings and <p> for paragraphs.
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
II.4 Styling Links

The four links states are:


 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

EX:
a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

 a:hover MUST come after a:link and a:visited


 a:active MUST come after a:hover

*Can have text background and color


II.5 LIST
In HTML, there are two types of lists:
 unordered lists - the list items are marked with
bullets
 ordered lists - the list items are marked with
numbers or letters

Different List Item Markers


The type of list item marker is specified with the list-
style-type property:
 Example

ul.a {list-style-type: circle;}


ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
III. BOX MODELS
III. Box
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}

 Margin - Clears an area around the border. The margin


does not have a background color, and it is completely
transparent
 Border - A border that lies around the padding and
content. The border is affected by the background color
of the box
 Padding - Clears an area around the content. The
padding is affected by the background color of the box
 Content - The content of the box, where text and
images appear
III.3 Outline...
III.4 Margins
 The margin clears an area around an element (outside
the border). The margin does not have a background
color, and is completely transparent.
 The top, right, bottom, and left margin can be changed

independently using separate properties. A shorthand


margin property can also be used, to change all margins
at once.
In CSS, it is possible to specify different margins for
different sides:
 Example
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
CLASSES AND IDs
Classes enables you to create sub-sets of attributes to act as a specific
selectors.

p .cour { color : blue ; font-family : courier }

To activate them simply


<p class=“cour”> Styled in courier </p>

Similar to classes, ID can be used to define a style or rule.

#74p { color : maroon }

<H1 id=“74p”>Maroon</H1>
<P> and more about colors here <B id=74p>maroon</B>.</P>
Thank YOU!
Hope you enjoy reading my presentation…

Congratulations, you are ready embedding


scripting language into your HTML page…

Good Luck and happy reading again!

You might also like