AK css

Cascading Style Sheets (CSS)

Atul Kahate

[email protected]

Cascading Style Sheets (CSS) 2

CSS Basics CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a

problem External Style Sheets can save you a lot of

work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one


Need for CSS – 1 HTML tags were originally designed to

define the contents of a document They were supposed to say "This is a

header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on

The layout of the document was supposed to be taken care of by the browser, without using any formatting tags


Need for CSS – 2 The two major browsers - Netscape and

Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification

It became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout


Need for CSS – 3

To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium responsible for standardizing HTML - created styles in addition to HTML 4.0


What Can Styles Do? Define how HTML elements are

displayed, just like the font tag and the color attribute in HTML 3.2

Normally saved in files external to your HTML documents

External style sheets enable you to change the appearance and layout of all your pages, just by editing a single CSS document


Benefit to Developers Allows developers to control the style

and layout of multiple Web pages all at once

As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want

To make a global change, simply change the style, and all elements in the Web site are updated automatically


Precedence in Style Sheets What style will be used when there is

more than one style specified for an HTML element?

The order is: Inline Style (inside HTML element) Internal Style Sheet (inside the <head>

tag) External Style Sheet Browser default


CSS Syntax Consists of three parts

selector {property: value} Selector: The HTML element/tag you wish to define Property: The attribute you wish to change Value: Associated with a property The property and value are separated by a colon and

surrounded by curly braces Examples

body {color: black} p {font-family: "sans serif"} p {text-align:center;color:red}


<STYLE>

P {color:green}

P.red {color:red}

</STYLE>Style block

Selector

Declaration

Class


Better syntax for multiple properties

p{

text-align: center;color: black;font-family: arial

}


Grouping Selectors

h1,h2,h3,h4,h5,h6 {color: green}


Class Selector With the class selector you can

define different styles for the same type of HTML element

Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph

Example code follows


Class Selector Example CSS code

p.right {text-align: right}p.center {text-align: center}

HTML code<p class="right">This paragraph will be right-aligned.</p><p class="center">This paragraph will be center-aligned.</p>


Comments in CSS

/* This is a comment */


More on Font Families – 1 A font family contains a set of fonts

that share common characteristics There are five font families

Sans-serif Serif Serif Monospace Cursive Fantasy


More on Font Families – 2 Sans-serif – Considered to be readable

Verdana, Arial Black, Trebuchet MS, Arial Serif – Similar to newspaper fonts

Times New Roman, Georgia Monospace – Have constant width characters

Courier New, Agency FB Cursive – Look like handwritten text

Comic Sans, Harrington Fantasy – Decorative styles

Impact


Style Sheet Example – 1<html><head>

<style type="text/css">h1 {color: #00ff00}h2 {color: #dda0dd}p {color: rgb(0,0,255)}</style>

</head>

<body><h1>This is header 1</h1><h2>This is header 2</h2><p>This is a paragraph</p></body></html>


Style Sheet Example – 3<html><head><style type="text/css">h1 {text-decoration: overline}h2 {text-decoration: line-through}h3 {text-decoration: underline}a {text-decoration: none}</style></head>

<body>

<h1>This is header 1</h1><h2>This is header 2</h2><h3>This is header 3</h3><p><a href="http://www.w3schools.com/default.asp">This is a link</a></p>

</body></html>


Style Sheet Example – 11 info.css

h1, h2 {font-family: sans-serif;color: gray;

}

h1 {border-bottom: 1px solid black;

}

p {color: maroon;

} main.html

<html><head><title> External CSS Example </title><link type="text/css" rel="stylesheet" href="info.css"></head>

<body><h1> Welcome to my Page! </h1><h2> How are you doing? </h2><p>This is a paragraph</p></body>

</html>


Style Sheet Example – 12 info.css

.test {line-height: 1.9em;font-style: italic;font-family: Georgia, "Times New Roman", Times, serif;color: #444444;border-color: black;border-width: 1px;border-style: solid;background-color: #a7cece;padding: 25px;margin: 30px;

} main.html

<html><head><title> External CSS Example </title><link type="text/css" rel="stylesheet" href="info.css"></head>

<body><h1> Welcome to my Page! </h1><h2> How are you doing? </h2><p class="test">This is a paragraph. See how this is decorated with the help of styles. We have all sorts of paragraph and background formattng features

available, which allow us to format text the way we want to a very precise level.</p></body>

</html>


Lists<html><head><style type="text/css">ul.disc {list-style-type: disc}

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

ul.square {list-style-type: square}…

Thank you!

Questions and Comments Welcome!

AK css

Education

Transcript of AK css