Open main menu

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

ReadingsEdit

ActivitiesEdit

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

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 StylesEdit

Inline CSS has the format:[2]

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

Example:

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

Internal Style SheetsEdit

Internal CSS has the format:[3]

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

Example:

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

External Style SheetsEdit

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;
}

PrecedenceEdit

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 setsEdit

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 practicesEdit

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

ReuseEdit

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>

CommentsEdit

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

Examples:

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

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

TestingEdit

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 FontsEdit

font-familyEdit

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; 
}

fontEdit

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 AlsoEdit

ReferencesEdit