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

From Wikiversity
Jump to navigation Jump to search

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]