CSS Comprehensive Overview
Download as PPSX, PDF2 likes1,044 views
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.
More Related Content
Similar to CSS Comprehensive Overview (20)
![Strategic Picks — Prioritising the Right Agentic Use Cases [2/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-2-250902135931-4c97717a-thumbnail.jpg?width=560&fit=bounds)
CSS Comprehensive Overview
- 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
- 38. THANK U