The document explains the importance of Cascading Style Sheets (CSS) in web development, emphasizing its role in separating content from presentation for improved formatting, maintainability, and speed. It outlines CSS syntax, includes various selectors, discusses the box model, and presents concepts such as inheritance, specificity, and the cascade. Additionally, it highlights CSS text styling techniques and recommends using a web font stack for better compatibility across user browsers.

1. CASCADING STYLE SHEETS
By
Lakshmi R
Asst. Professor
Dept. of ISE

2. CSS
 HTML should not describe the formatting or
presentation of HTML documents
 CSS- standard for describing the appearance
of HTML documents.
Benefits:
 Improved control over formatting.
 Improved site maintainability
 Improved accessibility
 Improved page download speed
 Improved output flexibility
Lakshmi R, Asst. Professor, Dept. of ISE

3. CSS Syntax
 Style rules
Example:
Lakshmi R, Asst. Professor, Dept. of ISE

4. Properties
Lakshmi R, Asst. Professor, Dept. of ISE

5. Lakshmi R, Asst. Professor, Dept. of ISE

6. Properties
Lakshmi R, Asst. Professor, Dept. of ISE
text-align: center | left | right | justify
text-decoration: overline | line-through | underline | none
text-indent: 50px

7. Lakshmi R, Asst. Professor, Dept. of ISE

8. Properties
Lakshmi R, Asst. Professor, Dept. of ISE

9. Lakshmi R, Asst. Professor, Dept. of ISE

10. Properties
Lakshmi R, Asst. Professor, Dept. of ISE

11. Lakshmi R, Asst. Professor, Dept. of ISE

12. Properties
Lakshmi R, Asst. Professor, Dept. of ISE

13. Lakshmi R, Asst. Professor, Dept. of ISE

14. Values
Color values
Lakshmi R, Asst. Professor, Dept. of ISE

15. Lakshmi R, Asst. Professor, Dept. of ISE
Units
Other
relative units:
em
%
ex
ch

16. Lakshmi R, Asst. Professor, Dept. of ISE

17. Selectors
 Element Selector
 Class Selectors
 ID Selectors
 Attribute Selectors
 Pseudo-element and pseudo-class selector
 Contextual Selectors
Lakshmi R, Asst. Professor, Dept. of ISE

18. Grouped selector
Lakshmi R, Asst. Professor, Dept. of ISE

19. Class selector
Lakshmi R, Asst. Professor, Dept. of ISE

20. Id selector
Lakshmi R, Asst. Professor, Dept. of ISE

21. Attribute selector
Lakshmi R, Asst. Professor, Dept. of ISE

22. Pseudo-element and pseudo-class
selector
Lakshmi R, Asst. Professor, Dept. of ISE
• Way to select something that does not exist
explicitly as an HTML element but which is still a
recognizable selectable object.
• Eg: first line or first letter of HTML element
• Targets a particular state.
• Eg: link states (not yet visited and visited states)

23. Pseudo-element and pseudo-class selector
Lakshmi R, Asst. Professor, Dept. of ISE

24. Contextual selector
Lakshmi R, Asst. Professor, Dept. of ISE

25. Contextual selector
Lakshmi R, Asst. Professor, Dept. of ISE

26. The Cascade: How Styles
Interact?
 How conflicting rules are handled?
 Inheritance
 Specificity
 Location
Lakshmi R, Asst. Professor, Dept. of ISE

27. Inheritance
 CSS properties are applied to all descendants.
 Inheritable properties:
 Font, color, list, text properties
 Non-inheritable properties:
 Layout, sizing, border, background and
spacing properties
Lakshmi R, Asst. Professor, Dept. of ISE

28. Inheritance
Lakshmi R, Asst. Professor, Dept. of ISE

29. Specificity
 How browser determines which style rule takes
precedence when more than one rule could be
applied.
Lakshmi R, Asst. Professor, Dept. of ISE

30. Specificity
 Specificity is how the browser determines
which style rule takes precedence when more
than one style rule could be applied to the
same element.
 In CSS, the more specific the selector, the
more it takes precedence
 It overrides the previous definition
Lakshmi R, Asst. Professor, Dept. of ISE

31. Location
 When inheritance and specificity cannot
determine the style precedence.
 If rules have the same specificity, then latest
is given more weight.
Lakshmi R, Asst. Professor, Dept. of ISE

32. The Box Model
Lakshmi R, Asst. Professor, Dept. of ISE

33. The Box Model
Lakshmi R, Asst. Professor, Dept. of ISE

34. Background Properties

35. Border Properties
Lakshmi R, Asst. Professor, Dept. of ISE

36. Border Properties
border-top-color: red; /* sets just the top side */
border-right-color: green; /* sets just the right side */
border-bottom-color: yellow; /* sets just the bottom side */
border-left-color: blue; /* sets just the left side */
Alternately, we can set all four sides to a single value via:
border-color: red; /* sets all four sides to red */
Or we can set all four sides to different values via:
border-color: red green orange blue;
border-color: red yellow; /* top+bottom=red, right+left=yellow */
Lakshmi R, Asst. Professor, Dept. of ISE

37. Margins and Padding
Lakshmi R, Asst. Professor, Dept. of ISE

38. Margins and Padding
Observe collapsed margin
The adjoining margins of two or more boxes can combine to form a single
margin.
Lakshmi R, Asst. Professor, Dept. of ISE

39. Box Dimensions
Width and the height only refer to the size of the content area
The total size of an element is equal to the size of its content area plus the sum
of its padding, borders, and margins.
Lakshmi R, Asst. Professor, Dept. of ISE

40. Overflow Property
Lakshmi R, Asst. Professor, Dept. of ISE

41. Box-Sizing via percents
Lakshmi R, Asst. Professor, Dept. of ISE

42. Box-Sizing via percents
Lakshmi R, Asst. Professor, Dept. of ISE

43. CSS Text Styling
Lakshmi R, Asst. Professor, Dept. of ISE

44. CSS Text Styling
 Font Family
 Font available on the developer’s computer may not be
available on all users’ browser.
 Conventional to supply web font stack - series of
alternate fonts to use if original font is not on user’s
computer
Lakshmi R, Asst. Professor, Dept. of ISE

45. Generic Font Families
Lakshmi R, Asst. Professor, Dept. of ISE

46. Font Size
Lakshmi R, Asst. Professor, Dept. of ISE

47. References:
[1] Randy Connolly, Ricardo Hoar,
"Fundamentals ofWeb Development”,
1stEdition,Pearson Education India.
(ISBN:978-9332575271)
[2] https://www.w3schools.com/
Lakshmi R, Asst. Professor, Dept. of ISE