Jump to content

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

Add links
From Wikiversity
HTML and CSS
  1. Understand HTML Fundamentals
  2. Understand CSS Fundamentals
  3. Structure Documents Using HTML
  4. Present Multimedia Using HTML
  5. Style Web Pages Using CSS

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

Readings

[edit | edit source]
  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 | edit source]
  1. W3Schools: CSS Exercises

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

[edit | edit source]

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 | edit source]

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 | edit source]

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 | edit source]

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 | edit source]

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 | edit source]

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 | edit source]

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

Reuse

[edit | edit source]

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 | edit source]

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

Examples: 

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

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

Testing

[edit | edit source]

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 | edit source]

font-family

[edit | edit source]

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 | edit source]

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 | edit source]

References

[edit | edit source]
  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"