WGU C276 - Web Development Foundations
Study Guide Latest Updated
Cascading Style Sheets (CSS3) and Graphical
Elements
● Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup
language such as HTML.
● CSS3 is the current version.
● A CSS rule consists of a selector and a declaration block.
○ Selectors - points to the HTML element you want to style.
○ Declaration - contains a CSS property name and a value,
separated by a colon.
● CSS also allows you to group selectors, which minimizes the styling
done to the sheet and can make site maintenance easier. We can do
this by using a comma to separate selectors. Think of the commas as
“and” - h1 and h2 and h3.
h1, h2, h3 {color: red;}
● There are three ways of inserting a style sheet:
○ External CSS - External styles are defined within the <link>
element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<head>
<html>
<link rel="stylesheet" href="mystyle.css">
<head>
</head>
<style>
<body>
body {
background-color:
○ Internal CSSlinen;
- An internal style sheet may be used if one single HTML
page has a unique style. The internal style is defined inside the
<style> element, inside the head section.
,}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
○ Inline CSS - An inline style may be used to apply a unique style for
a single element. To use inline styles, add the style attribute to
the relevant element. The style attribute can contain any CSS
property.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
How are tag selectors and class selectors different in purpose?
● If there are two or more CSS rules that point to the same element,
the selector with the highest specificity value will "win", and its
style declaration will be applied to that HTML element.
● The !important rule in CSS is used to add more importance to a
property/value than normal. In fact, if you use the !important rule,
it will override ALL previous styling rules for that specific property
on that element.
● Stylesheets cascade — at a very simple level, this means that the
order of CSS rules matters; when two rules apply that have equal
specificity, the one that comes last in the CSS is the one that will
be used.
● Inheritance - some CSS property values set on parent
elements are inherited by their child elements, and some
aren't.
, ● CSS comments are not displayed in the browser, but they can
help document your source code.
/* This is a single-line comment */
p {
color: red;
}
● Sass is a stylesheet language that’s compiled to CSS. It allows you
to use variables, nested rules, mixins, functions, and more, all
with a fully CSS-compatible syntax. Sass helps keep large
stylesheets well-organized and makes it easy to share design
within and across projects.
Identify 3 common image file formats used for Web.
GIF, JPEG, PNG
GIF87a is the original format for indexed color images. It uses LZW
compression and has the option of being interlaced. GIF89a is the same,
but also includes transparency and animation capabilities.
<img src="url" alt="alternatetext">
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it
occurs in the text). This is default
inherit - The element inherits the float value of its parent
Always specify the width and height of an image. If width and height
are not specified, the web page might flicker while the image loads.
● The required alt attribute provides an alternate text for an image,
if the user for some reason cannot view it (because of slow
connection, an error in the src attribute, or if the user uses a
screen reader).
Study Guide Latest Updated
Cascading Style Sheets (CSS3) and Graphical
Elements
● Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup
language such as HTML.
● CSS3 is the current version.
● A CSS rule consists of a selector and a declaration block.
○ Selectors - points to the HTML element you want to style.
○ Declaration - contains a CSS property name and a value,
separated by a colon.
● CSS also allows you to group selectors, which minimizes the styling
done to the sheet and can make site maintenance easier. We can do
this by using a comma to separate selectors. Think of the commas as
“and” - h1 and h2 and h3.
h1, h2, h3 {color: red;}
● There are three ways of inserting a style sheet:
○ External CSS - External styles are defined within the <link>
element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<head>
<html>
<link rel="stylesheet" href="mystyle.css">
<head>
</head>
<style>
<body>
body {
background-color:
○ Internal CSSlinen;
- An internal style sheet may be used if one single HTML
page has a unique style. The internal style is defined inside the
<style> element, inside the head section.
,}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
○ Inline CSS - An inline style may be used to apply a unique style for
a single element. To use inline styles, add the style attribute to
the relevant element. The style attribute can contain any CSS
property.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
How are tag selectors and class selectors different in purpose?
● If there are two or more CSS rules that point to the same element,
the selector with the highest specificity value will "win", and its
style declaration will be applied to that HTML element.
● The !important rule in CSS is used to add more importance to a
property/value than normal. In fact, if you use the !important rule,
it will override ALL previous styling rules for that specific property
on that element.
● Stylesheets cascade — at a very simple level, this means that the
order of CSS rules matters; when two rules apply that have equal
specificity, the one that comes last in the CSS is the one that will
be used.
● Inheritance - some CSS property values set on parent
elements are inherited by their child elements, and some
aren't.
, ● CSS comments are not displayed in the browser, but they can
help document your source code.
/* This is a single-line comment */
p {
color: red;
}
● Sass is a stylesheet language that’s compiled to CSS. It allows you
to use variables, nested rules, mixins, functions, and more, all
with a fully CSS-compatible syntax. Sass helps keep large
stylesheets well-organized and makes it easy to share design
within and across projects.
Identify 3 common image file formats used for Web.
GIF, JPEG, PNG
GIF87a is the original format for indexed color images. It uses LZW
compression and has the option of being interlaced. GIF89a is the same,
but also includes transparency and animation capabilities.
<img src="url" alt="alternatetext">
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it
occurs in the text). This is default
inherit - The element inherits the float value of its parent
Always specify the width and height of an image. If width and height
are not specified, the web page might flicker while the image loads.
● The required alt attribute provides an alternate text for an image,
if the user for some reason cannot view it (because of slow
connection, an error in the src attribute, or if the user uses a
screen reader).
