Uploaded byMarc Steel
Cascading Style Sheets
CSS (Cascading Style Sheets) allows separation of HTML structure from presentation by controlling formatting properties like fonts, colors, and layout. CSS declarations can be embedded within HTML, linked via external stylesheets, or applied inline. Selectors target elements by tag name, class, ID, and other attributes to style them.
More Related Content
![Cascading style sheet (css)]](https://cdn.slidesharecdn.com/ss_thumbnails/cascadingstylesheetcss-130819011155-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Cascading Style Sheets
- 1. Cascading Style SheetsCascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. CSS2, May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.
- 2. HTML ELEMENTS AnHTML element is the entire declaration of a tag, or tag and content. (black is markup) < tag attribute = value > or < tag attribute = value > content </ tag > Element and Tag are referred to with the same word
- 3. What does CSSdo? Control the style (fonts, colors, leading, margins, typefaces, etc.) of a Web document without compromising its structure. Visual design issues, such as page display, can be addressed separately from the HTML structure. This can allow for control over more HTML objects, and with fewer instructions!
- 4. Drawbacks? Only 4.0Browsers and up. Browser Differences Netscape does not support CSS as well as Internet Explorer does. Fewer functions Limited Inheritance
- 5. CSS Syntax selector { property : value ; property : value ; }
- 6. Comments /* anything found between a fore-slash and an asterisk is a comment. Such as this explanation. How ironic. */
- 7. Properties Font sizeColors background font Margins Borders and much, much more!
- 8. Values Colors Hexadecimal,RGB, HTML names Sizes Points Pixels Percentage Picas Em's Inches Centimeters Fonts Can be declared dynamically as in HTML
- 9.
- 10. Selectors: what isgetting style. Tags Classes Tag Specific Classes IDs
- 11. CSS Implementation LinkedStylesheets Embedded Stylesheets Inline Styles
- 12. HTML Tags asSelector Any HTML tag Any use of the tag will be displayed according to its declaration. Can still use regular HTML formatting tags such as the Heading tags for non-CSS browsers. Heading tags are used by some search engines for relevance of keywords.
- 13. Classes Can beapplied to any HTML tag. Any tag assigned this class will display according to the class decloration. .classname { property : value ; property : value ; } Assigned to a tag with the attribute “class” <tag class=“classname”>content</tag>
- 14. Tag Specific Classesp.classname { property : value ; property : value ; } Ensures that the class can be applied ONLY to one certain tag. Such as the Paragraph tag in this example.
- 15. ID Selection Youcan create a selector for an individual HTML element. The HTML element must have an ID attribute. In the CSS it is denoted with the “#” #copyright { font-size: 10pt; } <span id=“copyright”>© 2011</span>
- 16. Linked Style SheetsHTML pages can “point” or link to an external CSS file. Multiple HTML pages can point to the same Style Sheet, thus an entire site’s display can be controlled from one file! <link rel=“stylesheet” type=“text/css” href=“stylesheet.css”> rel - the type of relationship this link represents type - MIME type of linked document href - relative path to the style sheet
- 17. Embedded Style SheetsUsed by, and throughout, one HTML page Found in the HEAD of an HTML page. <head> <style type=“text/css”> <!-- selector { property : value ; property : value ; } .classname { property : value ; property : value ; } --> </style> </head> Comment tags ensure non-CSS browsers do not display declarations as text.
- 18. Inline Syles Stylescan be declared within a tag for use in that tag only. This is done with the attribute “style” <tag style=“ property : value ; property : value ;”>Content</tag>
- 19. The Cascade EmbeddedStyles cascade over Linked Style sheets Note: the LINK tag should go BEFORE the STYLE tags! Inline Styles cascade over Embedded Styles
- 20. Grouped Selectors Byseparating selectors with a comma you can declare more than one at once. h1, h2, h3 { property : value ; property : value ; }
- 21. Contextual Selectors Byseparating selectors with a space you can affect nested tags. ul ul { property : value ; property : value ; } Will declare all second level nested lists.
- 22. Images To pointto an image (for backgrounds, list bullets, etc.) the following syntax is used:\ body { background-image : url ( “file-path” ) } url is typed and file-path is either a relative or absolute file path (no space between url and the parenthesis) body { background-image : url ( “images/bg.gif” ) }
- 23. Spans and DivsTo add a specific style, to a specific area- the use of these two tags is general. span - an Inline tag that allows content to exist inline with it (e.g. b, font, i,) div - a block element - can contain other tags such as SPAN
- 24. CSS2 Pseudo ClassesThere are aspects of CSS2 which Microsoft’s Internet Explorer (as well as some other “rebel browsers”) support. a:link a:visited a:active a:hover
- 25. A Tag PseudoClasses Each is its own declaration and are adjusted according to current browser status including mouse position. a:hover activated when the mouse is positioned over a link a:active activated when the mouse clicks on the link
- 26. Multiple Link TypesDefine the A tag and/or as many classes of the A tag that you want/need. a { color: #0000ff; font-size: 12pt; } a:hover { color: #ff0000; font-size: 16pt; } a.bottomnav { font-size: 9pt; } a.bottomnav:hover { color: #ffff00; font-size: 9pt; } Inherited categories must be changed or overridden In this slide a.bottomnav :hover inherits the new size, so if the font is not to change the a:bottomnav has to have the desired font-size to be defined.
Editor's Notes
- #6 Instructor must explain this slide.