1 / 16

Understanding CSS Syntax and Semantics: Rules, Selectors, and Styling Techniques

This comprehensive guide covers the essential syntax and semantics of Cascading Style Sheets (CSS) as taught by Dr. Joseph DiVerdi. Learn about the structure of CSS rules, including selectors and declarations, and how to effectively apply styles to HTML elements. Explore the usage of contextual selectors, class and ID attribute selectors, and pseudo-classes to create dynamic and visually appealing web pages. Master the art of including multiple properties, defining alternate values, and understanding the cascade of styles to enhance your web design skills.

lilah
Télécharger la présentation

Understanding CSS Syntax and Semantics: Rules, Selectors, and Styling Techniques

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. Cascading Style Sheets - Syntax & Semantics Instructor: Joseph DiVerdi, Ph.D., MBA

  2. Rule Syntax • A Style Is a Rule • Which Specifies How to Render an HTML Tag • Any Valid HTML Tag Name Can Be Specified

  3. Rule Syntax selector { property: value; } • selector - Identifies the Element Affected • declaration - Combined Property & Value • Case Insensitive but Convention Dictates • Tag names Are All Uppercase • Properties & Values Are All Lowercase • Any Valid HTML Tag Name Can Be Selector • Less Its Enclosing < & > Characters

  4. Rule Syntax selector { property: value; } • selector - Identifies the Element Affected • declaration - Combined Property and Value BODY { background-color: aqua; }

  5. Multiple Properties Syntax • Separate Multiple Properties by Semicolons selector { property1: value1; property2: value2; } P { background-color: aqua; color: red; } • Use a Semicolon Even For One Property • Good Programming Practice

  6. Contextual Selectors Syntax • Contextual Selectors • Define a Method to Have a Style Applied • When a Tag Occurs Within a Certain Context • When It Is Nested Within Other Tags <P> bla, bla <A HREF=...>bla, bla</A> bla, bla </P> <TD> bla, bla <A HREF=...>bla, bla</A> bla, bla </TD> • <A> is in Two Different Contexts

  7. Contextual Selectors Syntax selector1 selector2 { property: value; } • Applied When selector2 Occurs Within selector1 H1 EM { color: red; } • H1 text will normally be bold & larger • EM text will normally italicized • With the Above Rule EM text in H1 will be bold, larger, italicized & red

  8. Contextual Selectors • Classic Outline Numbering • Capital letters, e.g., A, B, C, ... • Uppercase Roman numerals, e.g., I, II, III, ... • Lowercase letters, e.g., a, b, c, ... • Arabic numerals, e.g., 1, 2, 3, ... OL LI { list-style: upper-alpha; } OL OL LI { list-style: upper-roman; } OL OL OL LI { list-style: lower-alpha; } OL OL OL OL LI { list-style: decimal; }

  9. Class Attribute Selectors • Application of Style Rules Based on Special Identifying Attributes • Classify Elements by Adding CLASS Attribute: <H1>Current Statement</H1> <H1 CLASS="important">Your account is past due.</H1> • Specify Styles for Particular Class Using: H1.important { color: red; }

  10. Class Attribute Selectors • Same CLASS Name Used for Several Tags: <H1 CLASS="important">Your account is past due.</H1> <P CLASS="important">Pay attention!</P> • Specify Styles for Particular Class Using: H1.important { color: red; } P.important { color: red; }

  11. Class Attribute Selectors • Combine All CLASSes Into a General One: .important { color: red; }

  12. ID Attribute Selectors • Target Unique Elements by Adding ID Attribute <P ID="061998">New item added today</P> • Specify Styles for Particular Class Using: P#061998 { color: blue; } • Or Combine All Classes Into a Generic One: #061998 { color: blue; } • Almost Indistinguishable With CLASS

  13. Pseudo-Class Definitions • Replacement for Old-Style <BODY> <BODY LINK=#0000FF ACTIVE=#FF0000 VISITED=#FF00FF> • Three Pseudo-classes Defined for <A>: A:LINK { color: blue; } A:ACTIVE { color: red; } A:VISITED { color: purple; }

  14. Pseudo-Class Definitions • Complete Replacement for Old-Style <BODY> <BODY LINK=#0000FF ACTIVE=#FF0000 VISITED=#FF00FF> A:LINK { color: blue; } A:ACTIVE { color: red; } A:VISITED { color: purple; } BODY { color: black; background-color: white; }

  15. Alternate Values Syntax • This is a Special Case for font-family • Separate Alternate Values by Commas selector { font-family: value1, value2, value3, ... ; } H1 { font-family: verdana, arial, helvetica; } • Identify Your First Choice, Second Choice, ... • More On This Later

  16. The Cascade Defined • More Than One Type of Style Definition Can Simultaneously Effect Presentation • Style Is Hierarchical • Highest-to-Lowest Weight • HTML Tag Attributes • Inline Style • Document-Level Style Sheets • Imported Style Sheets • Linked External Style Sheet • User Style Settings • Browser Default Settings

More Related