1 / 23

CSS Cascading Style Sheets

CSS Cascading Style Sheets. CSS Define style, look and presentation of the website content The way the content is presented on the page is determined in presentation rules in a style sheet layout background fonts margins. CSS HTML is used to create logical structure of the content

december
Download Presentation

CSS Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSSCascading Style Sheets

  2. CSS Define style, look and presentation of the website content The way the content is presented on the page is determined in presentation rules in a style sheet layout background fonts margins

  3. CSS HTML is used to create logical structure of the content CSS is used to style the structured content

  4. Styles External reside in a separate style sheet file (.css) Internal located inside individual page within <style> tags inside the document’s <head> Inline located within HTML tags themselves and only apply to the content of that tag

  5. Style rules Cascade There are rules to determine which style takes precedence while multiple styles can cover a single element of the page. When style rules conflict, the laws of the cascade determine how the conflict is settled. The order of the cascade 1. External 2. Internal 3. Inline

  6. Style rules Cascade The closer a rule to the element getting styled, the more power the rule has in the battle of conflicting style rules. The order of the cascade 1. External 2. Internal 3. Inline

  7. Creating CSS A style rule begins with a selector. Selector can be a tag class id

  8. Creating a style rule for a tag Redefining the style for a tag gives considerable control, as HTML has a tag for nearly any type of text you need to format. <body>

  9. DW CSS categories Type Background Block Box Border List Positioning Extensions

  10. Creating a Custom class Style rule for something that does not have tag as a label. Custom name for a style when you create a class. .myclass Do not create classes for something that has a logical tag, like heading <h1, h2, h3, etc>You can simply redefine one of the heading tags. HTML is used to create logical structure of the content CSS used to style the structured content

  11. Creating a Custom class Class is reusable Many different elements on a page can be assigned to the same class Class has a name A period (.) precedes a class selector Named elements can be targeted with CSS rules

  12. Creating a Custom class Class style rule must be applied to the document

  13. Creating advanced selectors (IDs, pseudo-class selectors) An ID can only be used once per page IDs are unique Used in addition to CSS rules A hash or pound sign (#) precedes an id selector. #subnav

  14. Creating advanced selectors (IDs, pseudo-class selectors) ID is another method for assigning names ID style rule must be applied to the document

  15. Pseudo-class selectors Names so because pseudo-states don’t actually exist in the document The user must do something to trigger the pseudo-class, such as Visit a link Hover over a link Browse over a visited link

  16. Pseudo-class selectors L-V-H-A order LoVeHAte A: link A: visited A: hover A: active

  17. Verification of styles Previewing in a variety of browsers and browser versions Sometimes the style rules conflict and you get enexpected results

  18. CSS for layout Box model DIV division

  19. CSS for layout Box model Margin Border Padding Content CSS set rules For each element

  20. CSS for layout Position and float Static Relative Inherit Absolute Fixed

  21. CSS for layout Position and float Static Relative Inherit Absolute Fixed

  22. CSS for layout Float Left Right None Inherit

  23. CSS for layout Elements in HTML can nest. Inside the body tag might be a div (division) named content with adiv named newitem nested inside. Each of these nested elements exist in a parent-child relationship that allows CSS properties to be inherited. The child elements are descendants of the parent and inherit properties from them.

More Related