Web Design Midterm
Call Kai
Learn
Practice Test
Spaced Repetition
Match
Flashcards
Knowt Play1/56
Earn XP
Description and Tags
Name | Mastery | Learn | Test | Matching | Spaced | Call with Kai | Chat |
|---|
No analytics yet
Send a link to your students to track their progress
57 Terms
CSS
Cascading Style Sheet
What does CSS do?
Controls the color, typography, and layout of single or multiple web pages.
What are the types of stylesheets?
external, embedded, inline, and imported
the cascade
browser default, external styles, embedded styles, inline styles
How are inline styles coded and where do they apply?
In the body of a web page as an attribute of an HTML tag and they apply only to the specific element that contains it.
How are embedded styles coded and where do they apply?
In the head of a web page and they apply to only that web page.
How are external styles coded and where do they apply?
In a separate file and they apply to the entire web site by coding a link in the head section.
What are the rules or parts of a style sheet?
selector, declaration property, and declaration value
How many CSS selectors are there? Name them.
Four; element/tag, class, id, descendant
What are the components of the class selector and what does it apply to?
It must begin with a dot and a letter. It may have numbers, hyphens, and underscores. Can’t have spaces. It applies to the entire web site document.
What are the components of the id selector and what does it apply to?
It must begin with a hash. It may have letters, numbers, hyphens, and underscores. Can’t have spaces. It applies to a single area of a web page and can only be used once.
What is the use of a descendant selector?
It specifies an element within its parent element and can be used to configure CSS for specific areas of a web page.
Configure inline CSS
<h1 style=”color": #000000”></h1>
Configure embedded CSS
<style>
body { background-color: #000000; }
</style>
How to configure an external stylesheet? (hint: html)
<link rel=”stylesheet” href “color.css”>
Configure CSS class selector for HTML and CSS
.feature { background-color: #000000; } <body class=”feature”></body>
Configure id CSS selector for HTML and CSS
#feature { background-color: #000000; } <body id=”feature”></body>
Configure descendant CSS selector
header h1 {background-color: #000000; }
What is the span element and where does it apply?
It applies style to a section of a web page without empty space above and below. It is only applied to elements inline.
Configure a span element
<h1><span class=”feature”>Page Title Goes Here</span></h1>
List 10 CSS properties
background color, background-image, background-repeat, background-size, color, font-size, font-family, font-weight, width, height.
4 types of formats for web graphics
GIF, JPEG, PNG, WebP
GIF
Graphics Interchange Format
Characteristics of GIF
For line art and logos, max 256 colors, can be animated and interlaced, supports transparency, uses lossless compression
JPEG
Joint Photographic Experts Group
Characteristics of JPEG
For photos, max 16.7 million colors, can’t be animated, progressive jpeg, doesn’t support transparency, and uses lossy compression.
PNG
Portable Network Graphics
Characteristics of PNG
Combines best of gif and jpeg. Supports millions of colors, multiple levels of transparency, interlacing, and uses lossless compression. APNG extension supports animation.
Characteristics of WebP
Supports millions of colors, transparency, animation, and lossy and lossless. Does not support interlacing.
configure image element
<img src=”home.gif” alt=”Home” width=”100” height=”20”>
Configure image link
<a href=”index.html”><img src=”home.gif” alt=”Home” width=”100” height=”20”></a>
Configure background image
body {background-image: url(background.gif); }
Configure background image to be displayed on the left down
body { background-image: url(background.gif);
background-image: repeat-y; }
Configure background image to be displayed on the top
body {background-image: url(background.gif);
background-repeat: repeat-x; }
font family categories
serif, sans-serif, monospace, cursive, fantasy
font-size units
text value, em, px, pt, and percentage
List 10 CSS text properties
font-family, font-size, font-weight, font-style, text-align, text-decoration, text-indent, text-transform, line-height, letter-spacing.
Configure multiple background images
background-image: url(background.gif); background repeat: no-repeat; background: url(background1.gif) no-repeat left bottom, url(background2.gif) no-repeat; }
List common text-decoration values
none, underline, overline, line-through
List text-transform values
none, capitalize, uppercase, lowercase
List letter-spacing values
normal, px, em
List text-align values
left, right, center, justify
List font-style values
normal, italic, oblique
List marker properties
list-style-type, list-style-image, list-style-position
List-style-type values
none, disc, circle, square, decimal, upper-alpha, lower-alpha, lower-roman
List-style-position values
outside, inside
Configure favicon ICO
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
Configure favicon GIF, PNG, JPG
<link rel=”icon “href=”favicon.gif” type=”image/ico”>
Configure figure caption
figcaption { font-weight: bold; font-style: italic; font-family: Arial, Helvetica, sans-serif; font-size: 1 em; }
Configure figure in html
<figure><img src=”home.gif” alt=”Home” width=”200” height=”20”><figcaption>Home</figcaption></figure>
List background-clip and background-origin property values
content-box, padding-box, border-box
normal flow
displays the elements on the web page in the order they appear in the web page source code
List overflow property values
visible, hidden, auto, scroll,
universal selector
*, used to target all html elements
List display property values
none, inline, inline-block, flex, grid
CSS pseudo classes
linked, visited, focus, hover, active
List position properties
static, relative, sticky, fixed, absolute