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 _4th 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&copy; 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