Web Programming

WEB PROGRAMMINGCascade Style Sheets (CSS)

INTRODUCTION CSS stands for Cascading Style Sheets

Used to Separate Presentation and Contents while Building Web Sites

Appearance of Raw HTML Pages is not very Effective and Attractive

In Order to Improve the Appearance of Web Page we use CSS

CSS is used to define Style Rules that help to unify entire Sites Appearance

Using CSS we define Style once and it can be applied many times on the Web Page

Example: Using CSS we define Rules that define how All the Headings and Paragraphs Look alike such as their Color, Style, Formatting etc

NEED OF CSS CSS Improves Efficiency by allowing you to

Separate Contents and Styles Contents mean Headings, Paragraphs,

Buttons etc Styles define the Appearance of Contents CSS was developed to Solve a Problem In using single HTML you must have to

define the Style of each and every Content in its Opening Tag using Attributes like style, color, bgcolor etc

This is a very Lengthy and Tedious Job Job becomes more hard if you want all

contents of same type to be alike, this requires you to remember attributes and attribute values and it is difficult

Styles are normally defined in a Separate CSS File thus enabling designer to Change and Manage the Appearance of Web Page

CSS SYNTAX (CONT.) CSS Rule has Two Parts:

1. Selector2. One or More Declarations

Selector is normally HTML Element Tag Symbol

Declaration consists of Property and Property Value

Property is a Style Attribute

CSS SYNTAX Specify the name of Element like h1, p, td etc Start a Opening Curly Brace {

Declarations: Write Property Name like color, font-family

etc Write a Colon : Write Property Value after Colon Then Put Semi-Colon ; after each

Declaration Put a Closing Curly Brace }Example:h1{

color:red;font:calibari;text-align:center;

}This CSS Example Defines Appearance of Element with <h1> Tag

CSS COMMENTS Comments are used to Specify the Purpose

of Line of Code Comments are Notes about Lines Helpful when the code is to be edited CSS Comments are Start with /* and End

with */ Symbols Anything between /* and /* is a Comment

Example:h1{

color:red; /*Defines Font Color*/font:calibari; /*Defines Font Style*/text-align:center; /*Defines Text Alignment*/

}This CSS Example Defines Appearance of Element with <h1> Tag with Proper Comments

WHERE TO WRITE CSS CODE Three Ways to Use CSS in HTML

1. Inline Style

2. Internal Style Sheet

3. External Style Sheet

INLINE STYLE In Inline Style looses the Advantages of

Cascading Style Sheet

In Inline Style we use style Attribute in the Opening Tag of an Element

This Style is only Applicable to the Element`s Tag in which it is defined

For Example if we define Inline Style using style attribute of a <h1> tag then it will be applicable to only this Tag and it will not be applicable to any other <h1> Tag

Mostly used if you want that Each Element has its own Appearance and Style

Hard to Use and Apply

INLINE STYLE----EXAMPLE<html>

<head><title>Inline Style</title>

</head><body>

<p>This is Paragraph with No Inline Style</p>

<p style=“color:red;font-size:20px” />This is Paragraph with Inline Style

</p></body>

</html>

INTERNAL STYLE SHEET Defined inside a Single Document Can Only be applied to the Document in

which it is Defined No other Document can use the Internal

Style Sheet of a Document If Selectors are given then Internal Style

Sheet is Automatically Applied to Whole Document`s of the Selector Type

Defined inside the <head> tag Defined using <style> tag We use the type Attribute of <style> for

Internal Style Sheet as follows:<style type=“text/css” />

……………………………….</style>

INTERNAL STYLE SHEET----EXAMPLE<html>

<head><title>Internal Style Sheet</title><style type=“text/css” />

color:blue;font-size:24px;

}</style>

</head><body>

<p>Paragraph No 1</p><p>Paragraph No 2</p>

</body></html>

EXTERNAL STYLE SHEET Used when Styles is to be applied on many

pages External Style Sheets are Stored in

Separate Files External Style Sheet Files have .css

Extension With External Style Sheet Entire Look of

Web Site is changed by just changing One File

External Style Sheets are attached to the Web Pages using <link> Tag and Using rel, type and href Attributes of <link> Tag

Example:

This Tag with Attributes Attaches Style Sheet named sheet.css in the Web Page

EXTERNAL STYLE SHEETS----EXAMPLE-CSS FILE CONTENTSCSS File:

font:verdana;font-size:24px;color:red;

font:times new roman;font-size:12px;color:blue;

Name of CSS File: style.css

EXTERNAL STYLE SHEETS----EXAMPLE-HTML FILE CONTENTS<html>

<head><title>External Style Sheet</title><link rel=“stylesheet” type=“text/css”

href=“style.css /></head><body>

<h1>Heading No 1</h1><p>Paragraph No 1</p>

</body></html>

THE SELECTORS CSS allows to specify the following two

Selectors:

1. id Selector

2. class Selector

THE ID SELECTOR Used to Specify Style for Single Element

Uses the id Attribute of HTML Element

id Selector is defined using #Example:

#paragraph{

align:center;font-size:18px;

}#heading {

align:right;font-size:24px;

THE ID SELECTOR----EXAMPLE<html>

#para1{

text-align:right;color:red;

} </style>

</head>

<body><p id="para1">Hello World!</p><p>This paragraph is not affected by the

style.</p></body>

</html>

THE CLASS SELECTOR Used to Specify Style for Group of Element

Class Selector is mostly used on Various Elements

Uses the class Attribute of HTML Element

id Selector is defined using .Example:

.paragraph{

align:center;font-size:18px;

THE CLASS SELECTOR----EXAMPLE<html>

.center{

text-align:center;}

</style></head><body>

<h1 class="center">Center-aligned heading</h1>

<p class="center">Center-aligned paragraph.</p>

</body></html>

CSS BACKGROUND COLOR Uses background-color Property

background-color:#b0c4de;}

</style></head><body><h1>Background Color</h1><p>Paragraph</p>

</body></html>

CSS BACKGROUND IMAGE<html>

body {background-image:url('paper.gif');}

</style></head><body>

<h1>Background Image</h1></body>

</html>

CSS FONT FAMILY

<body><p style="font-family:georgia,garamond,serif;">This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).</p> </body></html>

CSS FONT SIZE

<body><p style="font-size:20px;">This text is using a font size of 20 pixels.</p> </body></html>

CSS FONT ADJUST SIZE

<body><p style="font-size-adjust:0.58;">This text is using a font-size-adjust value.</p> </body></html>

CSS FONT STRETCH

<body><p style="font-stretch:ultra-expanded;">If your computer has an expanded version of the font being used, this text will be stretched.</p></body></html>

CSS FONT STYLE

<body><p style="font-style:italic;">This text is in italics.</p> </body></html>

CSS FONT VARIANT

<body><p style="font-variant:small-caps;">This Text Is Using Small Caps.</p> </body></html>

FONT WEIGHT

CSS FONT PROPERTY

<body><p style="font:italic small-caps bold 20px georgia,garamond,serif;">The styles for this text has been specified with the 'font' shorthand property.</p> </body></html>

CSS TEXT COLOR

<body><p style="color:olive;">This CSS text color is olive</p></body></html>

CSS TEXT ALIGN

<body><p style="text-align:right;">This CSS text is aligned right</p></body></html>

CSS LETTER SPACING

<body><p style="letter-spacing:5px;">This text has letter spacing applied</p></body></html>

CSS WORD SPACING

<body><p style="word-spacing:50px;">This text has word spacing applied</p> </body></html>

TEXT DECORATION<html>

<body><p style="text-decoration:overline;">This text has a line over the top</p><p style="text-decoration:line-through;">This text has a line through the middle</p><p style="text-decoration:underline;">This text has a line underneath</p></body></html>

TEXT TRANSFORM<html>

<body><p style="text-transform:uppercase;">This text has been transformed to uppercase</p><p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p><p style="text-transform:capitalize;">this text has been capitalized.</p></body></html>

CSS TEXT DIRECTION

<body><p style="direction:rtl;">This text is running from right to left.</p></body></html>

CSS TEXT SHADOW

<body><p style="text-shadow:4px 4px 8px blue;">If your browser supports the CSS text-shadow property, this text will have a shadow.</p></body></html>

CSS TEXT BACKGROUND COLOR

<body><p style="background-color:yellow;">This text has a background color applied.</p></body></html>

CSS TEXT BACKGROUND IMAGE

<body><p style="height:100px;background-image:url(1.png);">This text has a background image applied. </p></body></html>

CSS BACKGROUND IMAGE REPEAT

<body><p style="height:100px;background-image:url(1.png);background-repeat:repeat-x;">This background image repeat w.r.t x direction </p> </body></html>

CSS BORDER STYLES

<body><p style="border:4px solid blue;“>Solid Border</p><p style="border:4px dotted blue;">Dotted Border</p><p style="border:4px dashed blue;">Dashed Border</p><p style="border:4px double blue;">Double Border</p></body></html>

CSS BORDER WIDTH

<body><p style="border-width:6px;border-style:solid;” >This text has border styles border width=6px</p> </body></html>

CSS BORDER COLOR

<body><p style="border-width:1px;border-style:solid;border-color:blue;">This text has border styles applied using the border-width, border-style, and border-color properties.</p> </body></html>

CSS MARGINS ALL SIDES<html>

<body><div style="border:1px solid blue;"><p style="border:1px solid orange;margin:20px;">This text has a margin of 20 pixels on all four sides.It is nested within a div with a border to make it easier to see the effect of the margin.</p></div></body></html>

CSS MARGINS EACH SIDE<html>

<body><div style="border:1px solid blue;width:200px;"><p style="border:1px solid orange;margin:40px 10px 1px 40px;">This text has a different sized margin for each side. It is nested within a div with a border to make it easier to see the effect of the margin.</p></div></body></html>

CSS PADDING ALL SIDES

<body><p style="border:1px solid orange;padding:20px;">This text has padding of 20 pixels on all four sides.</p></body></html>

CSS PADDING EACH SIDE

<body><p>With padding:</p><div style="border:1px solid orange;width:100px;padding:20px 10px 0px 100px;">Padded div</div><p>Without padding:</p><div style="border:1px solid orange;width:100px;">Non-padded div</div> </body></html>

CSS LIST TYPES

CSS LIST STYLE IMAGE<html>

<head><title>Image Bullets</title>

</head><body>

<h4>Custom Bullets</h4><ul style=“list-style-image:

url(bullet_img.gif)" ><li>America</li><li>England</li><li>Pakistan</li><li>Austrailia</li>

</ul></body>

</html>

CSS LIST STYLE POSITION

CSS MARKER OFFSET

CSS HEIGHT AND WIDTH

<body><div style="background-color:orange;height:125px;width:75px;">This div has height and width applied.</div></body></html>

CSS MAXIMUM HEIGHT AND MAXIMUM WIDTH

<body><div style="background-color:orange;max-height:125px;max-width:75px;">This div has max-height and max-width applied.</div></body></html>

CSS MINIMUM HEIGHT AND MINIMUM WIDTH

<body><div style="background-color:orange;min-height:125px;min-width:75px;">This div has min-height and min-width applied.</div></body></html>

CSS RELATIVE POSITIONING

<body><div style="position:relative;left:80px;background-color:yellow;width:100px;">This div has relative positioning.</div></body></html>

CSS ABSOLUTE POSITIONING

<body><div style="position:absolute;top:100px;left:60px;background-color:yellow;">This div is absolutely positioned 100 pixels from the top and 60 pixels from the left of its containing block. </div></body></html>

CSS FIXED POSITIONING

<body><div style="position:fixed;top:100px;left:60px;width:180px;background-color:red;">This div is using a fixed position of 100 pixels from the top and 60 pixels from the left of its containing block. When this page scrolls, this box will remain in a fixed position - it won't scroll with the rest of the page. Go on - SCROLL! </div></body></html>

CSS FLOAT The CSS float property enables you to determine where to position an element relative to the other elements on the page. When you use the float property, other elements will simply wrap around the element you applied the float to.

<body><div style="width:300px;"><h1 style="float:left;margin-right:10px;">CSS float</h1><p>If your browser supports the CSS float Property, this text will be flowing around the heading.If this does not seem to work, it could be a browser compatibility thing...</p></div></body></html>

CSS CELL PADDING

<body><table border="1" cellpadding="10px"><tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr><tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr></table></body></html>

CSS PADDING EXAMPLE<html><head><style type="text/css">table.padded-table td { padding:10px; }</style></head><body><table border="1" class="padded-table"><tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr><tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr></table></body></html>

PADDING EACH SIDE INDEPENDENTLY<html><head><style type="text/css">table.padded-table-2 td { padding-top:20px; padding-right:10px; padding-bottom:0px; padding-left:100px; }</style></head><body><table border="1" class="padded-table-2"><tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr><tr><td>Padded Cell 3</td><td>Padded Cell 4</td></tr></table></body></html>

CSS HYPERLINKS You can use CSS to change the appearance

and behavior of hyperlinks. To do this, you can use the following

selectors/pseudo-classes:

1. a2. a:link3. a:visited4. a:hover5. a:active

CSS HYPERLINKS EXAMPLE<html><head><style type="text/css">a {font-family:Georgia, "Times New Roman", Times, serif;font-size:large;cursor: auto}a:link {color:blue;}a:visited {color: #660066;}a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style></head><body><p><a href="/css/css_hyperlinks.cfm" target="_blank">CSS Hyperlinks</a></p></body><head><style type="text/css">a {font-family:Georgia, "Times New Roman", Times, serif;font-size:large;cursor: auto}a:link {color:blue;}a:visited {color: #660066;}a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}a:active {color: #ff0000;text-decoration: none}</style></head><body><p><a href="/css/css_hyperlinks.cfm" target="_blank">CSS Hyperlinks</a></p></body></html>

Web Programming

Documents

web programming

Web Programming Essentials

Programming paradigm and web programming

CSC 405: Web Application And Engineering II 2.1 Web Programming with PHP Introduction to Web programming Introduction to Web programming The programming

Web Design & Programming

Web Programming - PHP

Internet & Web Programming

Web Programming & Applications

Web Programming Intro

Advanced Programming Web Programming

CSC 405: Web Application Engineering II 2.1 Web Programming with PHP Introduction to Web programming Introduction to Web programming The programming language

Intro Programming Web

Programming & The Web & Programming the Web

Java Web Programming

1302383 Web Programming MySql JDBC Web Programming

Web polyglot programming

Web Programming JAvaScript Ajax Programming Web Programming 05 - 1/38

PHP Programming Lecture 6: Programming in PHP | SCK3633 Web Programming |

Advanced Programming Web Programming Rabie A. Ramadan

Web Programming Pre-01A– Web Programming Technologies Aryo Pinandito, ST, M.MT