This document provides an introduction and overview of CSS (Cascading Style Sheets). It discusses what CSS is, its history and advantages. The document then outlines the main parts of CSS including syntax, inserting CSS through inline, internal and external stylesheets, and selectors. Finally, common CSS properties for text, fonts, backgrounds and links are defined and examples are provided.

1. CSS
Mohamed Loey

2. Agenda
Part I: Introduction
Part II: CSS
Part III: CSS Properties

3. Agenda
Part I: Introduction
 What is CSS?
 History of CSS
 Advantages of CSS

4. What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• External Style Sheets can save a lot of work

5. History of CSS
• CSS was proposed in 1994 as a web styling language.
To helps solve some of the problems HTML.
• There were other styling languages proposed at this
time, such as Style Sheets for HTML but CSS won.
• CSS2 became the recommendation in 1998 by W3C
• CSS3 was started in 1998 but it has never been
completed. Some parts are still being developed and
some components work on some browsers.

6. Advantages of CSS
• Saves time
• Easy to change
• Give you more
control over layout
• Make it easy to create
a common format for
all the Web pages

7. Agenda
Part II: CSS
 CSS Syntax
 Inserting CSS
 CSS Selectors

8. CSS Syntax

9. inserting CSS
• Three Ways to Insert CSS:
1. Inline style
2. Internal style sheet
3. External style sheet

10. Inline style
• An inline style loses many of the advantages of a
style sheet

11. Inline style
• On Chrome Browser:

12. Internal style sheet
• An internal style sheet should be used when a single
document has a unique style.
• You define internal styles in the head section of an
HTML page, inside the <style> tag.

13. Internal style sheet
• Example :

14. External style sheet
• An external style sheet is ideal when the style is
applied to many pages.
• With an external style sheet, you can change the look
of an entire Web site by changing just one file.
• Each page must include a link to the style sheet with
the <link> tag. The <link> tag goes inside the head
section

15. External style sheet
• An external style sheet can be written in any text
editor.
• The style sheet file must be saved with a .css
extension.
• "myStyle.css":

16. CSS Selectors
• CSS selectors allow you to select and manipulate
HTML element(s).
• CSS Selectors Consist of:
1. The element Selector
2. The id Selector
3. The class Selector
4. Grouping Selectors

17. The element Selector
• The element selector selects elements based on the
element name.
• Example:

18. The id Selector
• The id selector uses the id attribute of an HTML tag
to find the specific element.
• Example:

19. The class Selector
• The class selector finds elements with the specific
class.
• Example:

20. Grouping Selectors
• To minimize the code, you can group selectors.
• Example:

21. Agenda
Part II: CSS Properties
 CSS Text
 CSS Font
 CSS Backgrounds
 CSS Links

22. CSS Text
• Color
• Text Align
• Text Decoration
• Text Transform

23. Color
color: value;
• Possible values are:
1. a HEX value - like "#ff0000"
2. an RGB value - like "rgb(255,0,0)"
3. a color name - like "red"
Example

24. Text Color
text-align: value;
• Possible values are:
1. left
2. right
3. center
4. justify
Example

25. Text Decoration
text-decoration: value;
• Possible values are:
1. none
2. underline
3. overline
4. line through
5. blink
Example

26. Text Transform
text-transform: value;
• Possible values are:
1. none
2. capitalize
3. lowercase
4. uppercase
Example

27. Text Indent
text-indent: value;
• Possible values are:
1. length
2. percentage
Example

28. CSS Font
• Font
• Font-Family
• Font Size
• Font Style

29. Font
font: value;
• Possible values are:
1. size
2. type
Example

30. Font-Family
font-family: value;
• There are 2 choices for values:
1. family-name
2. generic family
Example

31. Font Size
font-size: value;
• There are a lot of choices for values:
• xx-large, x-large, larger, large
• medium, small
• Smaller, x-small ,xx-small
• length
• % (percent)
Example

32. Font Style
font-style: value;
• Possible values are
1. normal
2. italic
3. oblique
Example

33. CSS Backgrounds
• Background Color
• Background Image

34. Background Color
background-color: value;
• Possible values:
1. color name
2. hexadecimal number
3. RGB color code
4. transparent
Example

35. Background Image
background-image: url(path_to_image);
• Possible Values:
1. url
2. none
Example

36. CSS Links
• Links can be styled with any CSS property (e.g. color,
font-family, background, etc.).
• In addition, links can be styled differently depending on
what state they are in.
• The four links states are:
1. a:link - a normal, unvisited link
2. a:visited - a link the user has visited
3. a:hover - a link when the user mouses over it
4. a:active - a link the moment it is clicked

37. CSS Links
• Example:

38. THANK U