Final Exam
Write CSS to format the div with id maincontent with the Poppins typeface, in 18 pixel size, with white text on a background of black. Give the div a solid 3 pixel gray border with rounded corners (any size).
#maincontent{ font-family:Poppins; font-size:18px; color:white; background-color:black; border: 3px solid gray; border-radius: 2px; }
Write CSS targeting h1 elements inside an element with an id of sidebar
#sidebar h1 {}
Write a CSS selector to target an element with an id of "top" e.g. <h1 id = "top"> Top </h1>
#top {}
The ______________selector applies to all elements
* universal
Write CSS to create a flexbox container for elements with the class "container" that displays contained elements in a vertical layout (i.e., the flex children stack on top of each other)
.conatiner{ display:flex; flex-direction:column; }
Write a CSS selector to target an element with a class of "left" e.g. <div class = "left"> Left </div>
.left{}
Write a CSS selector to target all the divs that are direct children of divs with the class "split" e.g. <div class = "split"> <div> <a href = '#'>...</a> <div> <a href = '#'>...</a> </div> </div> <div> <a href = '#'>...</a> </div> </div>
.split > div {}
List 5 colors and 2-3 associated feelings/ideas/connotations for each color
1. Blue--> sadness/peace/trustworthy/calmness/renewal 2. purple--> royalty/luxury 3. red--> passion/anger/ desire/danger 4. brown --> dependability/earthy 5. green --> growth/jealousy/good luck
list 4 hTML elements (the skeleton) that would be on every web page
1. head 2. title 3. body 4. html
List 3 image formats an an example of the type of images that are best suited for each format
1. jpg -pictures with lots of details OR photographs 2. png - pictures with transparency OR can be a photograp or logo 3. gif - very simple pictures w/ very little color difference OR logos or pics with little colors/shade
If two or more CSS rules apply in a given context, which one ovverules the others? explain 3 scenarios that cause one rule to override another.
1. origin precedence: if there is a rule conflict, the rule further down the stylesheet wins 2. inheritance: if a rule is applied to something at the top of a . page it's applied to everything else. 3. specificity: if there is a conflict between rules, the more specific rule wins
List 3 positioning modes in CSS, not including static.
1. relative 2. fixed 3. sticky
List 3 ways of defining font sizes or widths in CSS
1. rem 2. px (pixels) 3. % (percents)
List 3 ways of defining color in CSS and givean example color in each format
1. rgb values --> (255,255,255) 2. hexidecimal --> #fff 3. text --> white
Explain the process of requesting and rendering a web page.
1. visit a site 2. computer contacts a network of servers caled DOMAIN NAME SYSTEM. They tell your computer the IP address associated with the requested domain name 3. the unique number that the DNS sends you allows your browser to conatct the web server that hosts the website you requested 4. the web server sends the page you requested back to your web browser
Explain the difference between the following CSS properties: 1. visibility: hidden; 2. display:none;
1.this makes the content hidden(replaces it with a space) but the pther content flows around it, so the space si visible 2. this removes the grace completely so the other content fills in the gap left by the hidden content OR 1. hides element from tjhe box it's in (also only hides any extra content that doesn't fit) 2. hides the element from the page
list 2 of 3 types of lists in HTML AND the markup tages for each
1.unordered list: <ul> <li></li> </ul> 2. ordered list: <ol> <li></li> </ol> 3. definition list
the purpose of a __________ is to divide a web page into distinct divisions. It's a block element.
<div>
Write the hTML for an image with alternate text. the file name is horses.jpg
<img src = "horses.jpg" alt ="horses" />
Write the HTML for a paragraph with the class of "funny"
<p class = "funny"> funny </p>
The purpose of a __________ is to group inline elements together
<span>
The __________ element is used to create the superscript "th" on the date march the 4th.
<sup>
_____________ brings your site to life and also helps convey a mood and evokes reactions
Color
List the three primary Web design languages and a one-word description of each.
HTML - structure CSS - style/ presentation/ layout JavaScript - interactivity
What does HTML stand for
Hyper Text Markup Langauge
A(n) ______________ is a structured address for a resource on the web
URL
Correct each of the filling examples. a. <h1> socks <h1> b. <image "fish.png"> c. <a = "file.htm"> home </a="file.htm"> d. <para> a paragraph </para> e.<ul> <li> pigs <li> dogs <li> cats </ul> f. <fig> <image "dog.png"> <caption>.a cool dog </caption> </fig>
a. <h1> socks </h1> b. <img src= "fish.png" /> c. <a href = "file.htm"> home </a> d. <p> a paragraph </p> e.<ul> <li> pigs </li> <li> dogs </li> <li> cats </li> </ul> f. <figure> <img src= "dog.png" /> <figcaption>.a cool dog </figcaption> </figure>
Give a complete example of each of the following a. heading level 2 b. subscript c. strikethrough d. line break e. emphasis
a. <h2> heading 2</h2> b. <p> may <sub> 4th </sub> is past gone now </p> c. <p> we should cancel <s> cancel culture </s> for real tho </p> d. <br/> e. <em> hello </em>
The ________________ CSS psuedo-class matches an element (e.g. a link) when the user hovers the mouse over it. The _____________ CSS pseudo-class matches an element (e.g. a link) when the user has clicked the link previously.
a:hover a:visited
Name the CSS property that sets the background image for an element
background-image: url("url");
Explain the difference between block and inline elements AND give 2 examples elements of each type.
block elements affect the structure of a web page. they work like blocks. each block element will be on a new line h1, p ul --------------------------------------------------------------------- inline elements can be described as continuous. it doesn't affect the structure of the web page.. inline elements don't start on a new line. it doesn't seperate content em del strong b ins
The _______________ CSS3 property allows you to create rounded corners
border-radius
CSS treats each HTML element as if it appears inside its own _________ and uses rules to indicate how that element should look.
box
What does CSS stand for
cascading style sheets
The _____________ attribute is used to annotate one or more elements within a page, typically to connect
class
the_______________ CSS property changes the text color
color
One font that should never be used is _______________
comic sans
in HTML you can add __________ or notes to you and other developers by placing it between the __________ and __________ symbols and it won't be rendered by the browser
comments; <!-- ; -->
To make text legible ensure there is enough____________between any text and the bavckground color.
contrast
The HTML escape character© is rendered as __________
copyright
What is a reccomended method of connecting CSS to a page: inline, internal, or external?
external
the _______________-_______________ property of the flexbox system allows elements to flow to another row if ther's not enough room to fit on one row.
flex; wrap
Name the CSS property that makes text bold
font-weight: bold;
name three common web browsers
google chrome, firefox, safari, brave
Name 2 block level elements and 2 inline elements
h1 p inline: img a b
Write one CSS selector to target all h1, h2 and h3 elements
h1, h2, h3 { }
identify the following parts of the given URL: server/host name, path on server, filename, domain name, protocol http://www.cnet.com/reviews/apple/iphone13pro.html
http://www.cnet.com/reviews/apple/iphone13pro.html protocol host name domain name path file name
th __________ attribute is used to uniquely identify one element within a page, typically to connect it to CSS
id
Body text should be _______________ aligned to be most readable by English readers.
left
Write a CSS selector to target all the links in list items that have the class "featured" e.g. <ul> <li class= "featured"> <a href = #>...</a> </li> <li> <a href = #>...</a> </li> <li class= "featured"> <a href = #>...</a> </li> </ul>
li.featured a {}
Name the CSS property that sets the line spacing
line-height
What does a sans-serif typeface look like?
literally like this text here. there are no weird ticks
How do you center a block element within its parent?
margin:auto OR let parent display:flex; and do justify-content: center;
HTML attributes require a ____________ and a __________ which are connected with an "="
name; value
The CSS _______________ property allows you to make an element semi-transparent.
opacity
Write code with a selector, property, and value
p {font-family: Helvetica; } selector property value
another font that should never be used is _______________
papyrus
What are the 3 aspects of responsive web design
percentage-based widths, flexible images/media,(make images and videos a max width of 100% so they'll grow/ shrink with the page) media queries- defining a seperate set fo rules for a different screen size
review test 1 question 24
please
_______________ elements are often used as containing elements to group together sections of a page.
section
__________ markup provides extra information about your meaning of content (e.g. an acronym, an address, or a quote)
semantic
You should save image files as the __________ you will be using them in the web page.
size
the __________ element is used to show that some text is no longer relevant/accurate. it appears with a line throught the center if the text
strikethrough
How do you center an inline element within its parent
text-align: center;
Name the CSS property that adds/removes the underline from text
text-decoration: none;
the _______________ CSS property changes the text to all uppercase.
text-transform: uppercase;
the __________ element contains the text that will appear in the window/tab of the browser.
title
the_______________ property specifies the stack order of an element with larger numbers being in front of lower valued elements.
z-index
