Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.

Similar presentations


Presentation on theme: "Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar."— Presentation transcript:

1 Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar

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

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

4 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

5 HTML file   This header is 36 pt This header is blue  This paragraph has a left margin of 50 pixels  5

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

7 CSS Heading   h1 {color: #00ff00}  h2 {color: #dda0dd}  p {color: rgb(0,0,255)}   This is header 1  This is header 2  This is a paragraph  7

8 CSS Background Color   body {background-color: red}  h1 {background-color: #00ff00}  h2 {background-color: transparent}  p {background-color: rgb(250,0,255)}   This is header 1  This is header 2  This is a paragraph  8

9 CSS Background Image   body {background-image: url('bgdesert.jpg')}  9

10 CSS Background Image Repead   body  {  background-image:  url('bgdesert.jpg');  background-repeat: repeat  }  10

11 Background Image Repeat on vertically   body  {  background-image:  url('bgdesert.jpg');  background-repeat: repeat-y  }  11

12 Background Image Repeat on Horizontally   body  {  background-image:  url('bgdesert.jpg');  background-repeat: repeat-x  }  12

13 Set the color of Text   h1 {color: #00ff00}  h2 {color: #dda0dd}  p {color: rgb(0,0,255)}   This is header 1  This is header 2  This is a paragraph  13

14 Set the background-color of the text   span.highlight  {  background-color:yellow  }   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. This is a text. This is a text.  14

15 Specify the space between characters   h1 {letter-spacing: -3px}  h4 {letter-spacing: 0.5cm}   This is header 1  This is header 4  15

16 Word spacing   p  {  word-spacing: 30px  }   This is some text. This is some text.  16

17 Align the text   h1 {text-align: center}  h2 {text-align: left}  h3 {text-align: right}   This is header 1  This is header 2  This is header 3  17

18 Text Decoration   h1 {text-decoration: overline}  h2 {text-decoration: line-through}  h3 {text-decoration: underline}  h4 {text-decoration: blink}  a {text-decoration: none}   This is header 1  This is header 2  This is header 3  This is header 4  This is a link  18

19 Control the letters in a text   p.uppercase {text-transform: uppercase}  p.lowercase {text-transform: lowercase}  p.capitalize {text-transform: capitalize}   This is some text in a paragraph  19

20 Set the text direction of an element   div.one  {  direction: rtl  }  div.two  {  direction: ltr  }   Some text. Right-to-left direction.  Some text. Left-to-right direction.  20

21 Set the font of a text   h3 {font-family: times}  p {font-family: courier}  p.sansserif {font-family: sans-serif}   This is header 3  This is a paragraph  21

22 Font Size   h1 {font-size: 150%}  h2 {font-size: 130%}  p {font-size: 100%}   This is header 1  This is header 2  This is a paragraph  22

23 Font Style   h1 {font-style: italic}  h2 {font-style: normal}  p {font-style: oblique}   This is header 1  This is header 2  This is a paragraph  23

24 All the border properties in one declaration   p  {  border: medium double rgb(250,0,255)  }   Some text  24

25 Set the style of the four borders   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}  25

26 Cont…….   A dotted border  A dashed border  A solid border  A double border  A groove border  A ridge border  An inset border  An outset border  26

27  There is No Shortcut to success 27 Keep Smile!


Download ppt "Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar."

Similar presentations


Ads by Google