Presentation is loading. Please wait.

Presentation is loading. Please wait.

Css lectures. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem.

Similar presentations


Presentation on theme: "Css lectures. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem."— Presentation transcript:

1 Css lectures

2 What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files

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. A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: p {color:red;text-align:center;}

4 CSS Comments /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }

5

6

7 2 nd css <!– p {color: red;} body {background-color: black;} --> good page hello

8 In-Line css css my line css second line head1

9 Classes in css css4

10 css5

11 Css 6

12 Exception in css #para1 { text-align:center; color:red; } Hello World! This paragraph is not affected by the style.

13 The class Selector p.center { text-align:center; } This heading will not be affected This paragraph will be center- aligned.

14 Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style

15 Internal Style Sheet hr {color:sienna;} p {margin-left:20px;} body {background- image:url("images/back40.gif");}

16 p{background-image: url(aqsa.jpg); background-repeat:repeat;} h4{background-image: url(aqsa.jpg); background-repeat:repeat-y;} ol{background-image: url(aqsa.jpg); background-repeat:repeat-x;} ul{background-image: url(aqsa.jpg); background-repeat:no-repeat;} h5{cursor:crosshair;} textarea.noscroll{background-image: url(aqsa.jpg); background- attachment:fixed;} textarea{background-image: url(aqsa.jpg); background-attachment:scroll;} Untitled Personal home page (PHP)Repeat-Y Personal home page (PHP) Repeat-X Personal home page (PHP)No-Repeat Cascaded Style Sheets, JAVA Applet, JavaScript, VB, Script,JS Client side Programs, common gateway interface DHTML Dynamic HTML interprated language AJAX playing games !! extenciple markup language

17

18 External Style Sheet

19 Inline Styles This is a paragraph.

20 CSS Background CSS background properties are used to define the background effects of an element. CSS properties used for background effects: background-color background-image background-repeat background-attachment background-position

21 Css lectures

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36


Download ppt "Css lectures. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem."

Similar presentations


Ads by Google