Wikiversity

Exam 98-383: Introduction to Programming using HTML and CSS/Understand CSS Fundamentals

< Exam 98-383: Introduction to Programming using HTML and CSS

This lesson covers CSS fundamentals, including inline styles, internal style sheets, external style sheets, rule sets, and industry best practices.[1]

Readings

edit
  1. Mozilla: CSS Basics
  2. Mozilla: Cascade and Inheritance
  3. CSS Tricks: Methods to Organize CSS
  4. HTML Goodies: Testing CSS Against Multiple Browsers

Activities

edit
  1. W3Schools: CSS Exercises

Analyze the impact of using inline styles, internal style sheets, and external style sheets

edit

Includes when to use inline styles; when to use internal style sheets; when to use external style sheets; precedence when using a combination of inline styles and style sheets.

Inline Styles

edit

Inline CSS has the format:[2] 

<element style="property: value;">content</element>

Example: 

<p style="color: blue;">This text is blue.</p>

Internal Style Sheets

edit

Internal CSS has the format:[3] 

<head>
  <style>
    selector {property: value;}
  </style>
</head>

Example: 

<head>
  <style>
    p {color: blue;}
  </style>
</head>

External Style Sheets

edit

External CSS is specified using a link element:[4] 

<head>
  <link href="path/to/file.css" rel="stylesheet" type="text/css">
</head>

External CSS files have the format:[5] 

selector {property: value;}

which may also be written as: 

selector {
  property: value;
}

or 

selector 
{
  property: value;
}

Examples: 

h1 {color: red;}

h2 {
  color: green;
}

h3 
{
  color: black;
}

Precedence

edit

Precedence (the cascade) is based on:[6]

  1. Importance
  2. Specificity
  3. Source Order

Importance has the highest precedence, but its use is not recommended.[7]

Example: 

p {
  color: red !important;
}

After importance, the more specific a selector is, the higher the precedence will be.[8]

  1. inline (higher)
  2. ID (#)
  3. Class (.)
  4. Element tag (lower)

If completing rules have the same importance and specificity, rules defined later override earlier rules.[9] When multiple external CSS style sheets are linked, or internal and external style sheets are used, the order in which the links and internal styles are defined determines precedence.[10]

Construct and analyze rule sets

edit

Includes valid syntax for the CSS rule set; selectors, including class, id, elements and pseudo-class.

  • A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).[11][12][13]

Examples: 

/* all */
* {
  font-family: Arial, Helvetica, sans-serif;
}

/* class */
.class {
  color: green;
}

/* id */
#id {
  background-color: red;
}

/* element */
p {
  color: blue;
}

/* multiple elements */
h1, h2 {
  color: blue;
}

/* elements inside elements */
div p {
  font-weight: bold;
}

/* child elements */
div > p {
  font-style: italic;
}

/* pseudo-classes */
a:link {
  color: #FF0000;
}

a:hover {
  color: #FF00FF;
}

a:active {
  color: #0000FF;
}

a:visited {
  color: #00FF00;
}

Construct well-formed style sheets that conform to industry best practices

edit

Includes reusing rules and rule sets; commenting; testing on multiple browsers; web safe fonts.

Reuse

edit

Rules and rule sets may be reused in CSS and in HTML.

Examples: 

h1, p {
  color: blue;
}

.border {
  border: thin solid blue;
}

.red {
  color: red;
}

<h1>Blue Heading</h1>

<p class="border">Blue paragraph with border</p>

<p class="red border">Red paragraph with border</p>

Comments

edit

CSS comments are added using /* comment */ syntax.[14]

Examples: 

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

Testing

edit

Test CSS using the W3C CSS Validator service, and test using multiple browsers.

Visit CanIUse to check browser compatibility with different HTML and CSS features.

Web Safe Fonts

edit

font-family

edit

There are only a certain number of fonts that are generally available across all systems.[15][16]

Examples: 

body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-family: "Times New Roman", Times, serif;
}

.monospace {
  font-family: "Courier New", Courier, monospace; 
}

font

edit

The font CSS property is a shorthand for font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family. If used, it must include values for <font-size> and <font-family>.[17]

Examples: 

p { 
  font: 1.2em sans-serif
}

p {
  font: 80% sans-serif
}

p {
  font: bold italic large serif
}

See Also

edit

References

edit
  1. ↑ Microsoft: Exam 98-383 Introduction to Programming using HTML and CSS
  2. ↑ Wikipedia: Cascading Style Sheets
  3. ↑ Wikipedia: Cascading Style Sheets
  4. ↑ Wikipedia: Cascading Style Sheets
  5. ↑ Wikipedia: Cascading Style Sheets
  6. ↑ Mozilla: Cascade and Inheritance
  7. ↑ Mozilla: Cascade and Inheritance
  8. ↑ Mozilla: Cascade and Inheritance
  9. ↑ Mozilla: Cascade and Inheritance
  10. ↑ W3Schools: CSS How To
  11. ↑ W3Schools: CSS Selectors Reference
  12. ↑ Mozilla: Pseudo-classes
  13. ↑ W3Schools: CSS Pseudo-classes
  14. ↑ W3Schools: CSS Pseudo-classes
  15. ↑ Mozilla: Fundamental text and font styling
  16. ↑ W3Schools: Web Safe Fonts
  17. ↑ Mozilla: font
Retrieved from "https://en.wikiversity.org/w/index.php?title=Exam_98-383:_Introduction_to_Programming_using_HTML_and_CSS/Understand_CSS_Fundamentals&oldid=2141882"