Css, CaseCading Style Sheet

Web Engineering
1
Ishaq Khan Shinwari
MCS City University Peshawar

 What is CSS?
 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
2

 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
3

How to Insert a Style
Sheet
 When a browser reads a style sheet, it
will format the document according to it.
There are three ways of inserting a style
sheet:
 1) External Style Sheet
 2) Internal Style Sheet
 3) Inline Style Sheet
4

HTML file
 <html> <head>
 <link rel="stylesheet" type="text/css"
href="ex1.css" />
 </head> <body>
 <h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
 <p>This paragraph has a left margin of
50 pixels</p>
 </body> </html>
5

Css file
 body {background-color: yellow}
 h1 {font-size: 36pt}
 h2 {color: blue}
 p {margin-left: 50px}
6

CSS Heading
 <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>
 <p>This is a paragraph</p>
 </body>
 </html>
7

CSS Background Color
 <html>
 <head>
 body {background-color: red}
 h1 {background-color: #00ff00}
 h2 {background-color: transparent}
 p {background-color: rgb(250,0,255)}
 </style>
 </head>
 <body>
 </body>
 </html>
8

CSS Background Image
 <html>
 <head>
 body {background-image: url('bgdesert.jpg')}
 </style>
 </head>
 <body>
 </body>
 </html>
9

CSS Background Image
Repead
 <html>
 <head>
 body
 {
 background-image:
 url('bgdesert.jpg');
 background-repeat: repeat
 }
 </style>
 </head>
 <body>
 </body>
 </html>
10

Background Image Repeat on
vertically
 <html>
 <head>
 body
 {
 background-repeat: repeat-y
 }
 </style>
 </head>
 <body>
 </body>
 </html>
11

Background Image Repeat on
Horizontally
 <html>
 <head>
 body
 {
 background-repeat: repeat-x
 }
 </style>
 </head>
 <body>
 </body>
 </html>
12

Set the color of Text
 <html>
 <head>
 h1 {color: #00ff00}
 h2 {color: #dda0dd}
 p {color: rgb(0,0,255)}
 </style>
 </head>
 <body>
 </body>
 </html>
13

Set the background-color of the
text
 <html>
 <head>
 span.highlight
 {
 background-color:yellow
 }
 </style>
 </head>
 <body>
 <p>
 <span class="highlight">This is a text.</span> This is a text. This is a text. This is a
text. This is a text. This is a text. This is a text. This is a text. This is a text. <span
class="highlight">This is a text.</span>
 </p>
 </body>
 </html>
14

Specify the space between
characters
 <html>
 <head>
 h1 {letter-spacing: -3px}
 h4 {letter-spacing: 0.5cm}
 </style>
 </head>
 <body>
 </body>
 </html>
15

Word spacing
 <html>
 <head>
 p
 {
 word-spacing: 30px
 }
 </style>
 </head>
 <body>
 <p>
 This is some text. This is some text.
 </p>
 </body>
 </html>
16

Align the text
 <html>
 <head>
 h1 {text-align: center}
 h2 {text-align: left}
 h3 {text-align: right}
 </style>
 </head>
 <body>
 </body>
 </html>
17

Text Decoration
 <html>
 <head>
 h1 {text-decoration: overline}
 h2 {text-decoration: line-through}
 h3 {text-decoration: underline}
 h4 {text-decoration: blink}
 a {text-decoration: none}
 </style>
 </head>
 <body>
 <p><a href="../default.asp.htm">This is a link</a></p>
 </body>
 </html>
18

Control the letters in a text
 <html>
 <head>
 p.uppercase {text-transform: uppercase}
 p.lowercase {text-transform: lowercase}
 p.capitalize {text-transform: capitalize}
 </style>
 </head>
 <body>
 <p class="uppercase">This is some text in a paragraph</p>
 <p class="lowercase">This is some text in a paragraph</p>
 <p class="capitalize">This is some text in a paragraph</p>
 </body>
 </html>
19

Set the text direction of an
element
 <html>
 <head>
 div.one
 {
 direction: rtl
 }
 div.two
 {
 direction: ltr
 }
 </style>
 </head>
 <body>
 <div class="one">Some text. Right-to-left direction.</div>
 <div class="two">Some text. Left-to-right direction.</div>
 </body>
 </html>
20

Set the font of a text
 <html>
 <head>
 h3 {font-family: times}
 p {font-family: courier}
 p.sansserif {font-family: sans-serif}
 </style>
 </head>
 <body>
 <p class="sansserif">This is a paragraph</p>
 </body>
 </html>
21

Font Size
 <html>
 <head>
 h1 {font-size: 150%}
 h2 {font-size: 130%}
 p {font-size: 100%}
 </style>
 </head>
 <body>
 </body>
 </html>
22

Font Style
 <html>
 <head>
 h1 {font-style: italic}
 h2 {font-style: normal}
 p {font-style: oblique}
 </style>
 </head>
 <body>
 </body>
 </html>
23

All the border properties in one
declaration
 <html>
 <head>
 p
 {
 border: medium double rgb(250,0,255)
 }
 </style>
 </head>
 <body>
 <p>Some text</p>
 </body>
 </html>
24

Set the style of the four borders
 <html>
 <head>
 p.dotted {border-style: dotted}
 p.dashed {border-style: dashed}
 p.solid {border-style: solid}
 p.double {border-style: double}
 p.groove {border-style: groove}
 p.ridge {border-style: ridge}
 p.inset {border-style: inset}
 p.outset {border-style: outset}
 </style>
 </head>
25

Cont…….
 <body>
 <p class="dotted">A dotted border</p>
 <p class="dashed">A dashed border</p>
 <p class="solid">A solid border</p>
 <p class="double">A double border</p>
 <p class="groove">A groove border</p>
 <p class="ridge">A ridge border</p>
 <p class="inset">An inset border</p>
 <p class="outset">An outset border</p>
 </body>
 </html>
26

 There is No Shortcut to success
27
Keep Smile!

Css, CaseCading Style Sheet

More Related Content

What's hot

Viewers also liked

Similar to Css, CaseCading Style Sheet

Recently uploaded

Css, CaseCading Style Sheet