Exam 98-383: Introduction to Programming using HTML and CSS/Understand CSS Fundamentals
This lesson covers CSS fundamentals, including inline styles, internal style sheets, external style sheets, rule sets, and industry best practices.[1]
Readings edit
Activities edit
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]
- Importance
- Specificity
- 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]
- inline (higher)
- ID (#)
- Class (.)
- 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
- ↑ Microsoft: Exam 98-383 Introduction to Programming using HTML and CSS
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Wikipedia: Cascading Style Sheets
- ↑ Mozilla: Cascade and Inheritance
- ↑ Mozilla: Cascade and Inheritance
- ↑ Mozilla: Cascade and Inheritance
- ↑ Mozilla: Cascade and Inheritance
- ↑ W3Schools: CSS How To
- ↑ W3Schools: CSS Selectors Reference
- ↑ Mozilla: Pseudo-classes
- ↑ W3Schools: CSS Pseudo-classes
- ↑ W3Schools: CSS Pseudo-classes
- ↑ Mozilla: Fundamental text and font styling
- ↑ W3Schools: Web Safe Fonts
- ↑ Mozilla: font