Fix the CSS syntax errors below Fix the CSS syntax errors below. You can cross out code and add your correction below. p { border: 1px, solid, red; }
Fix the CSS syntax errors below Fix the CSS syntax errors below. You can cross out code and add your correction below. p { border: 1px solid red; }
Fix the CSS syntax errors below Fix the CSS syntax errors below. You can cross out code and add your correction below. strong { text-decoration underline; }
Fix the CSS syntax errors below Fix the CSS syntax errors below. You can cross out code and add your correction below. strong { text-decoration: underline; }
Fix the CSS syntax errors below Fix the CSS syntax errors below. You can cross out code and add your correction below. h1 { font weight: bold font-family: Arial; }
Fix the CSS syntax errors below Fix the CSS syntax errors below. You can cross out code and add your correction below. h1 { font-weight: bold; font-family: Arial; }
How much right padding is defined below? padding: 10px 7px;
How much right padding is defined below? padding: 10px 7px; Hint: top/bottom right/left
How much left padding is defined below? margin: 10px 7px 5px 1px;
How much left padding is defined below? margin: 10px 7px 5px 1px; Hint: clock-wise – top right bottom left
How much total width would this box take up? div.box { width: 600px; padding: 50px; }
How much total width would this box take up? div.box { width: 600px; padding: 50px; } Answer: 50 + 600 + 50 = 700px The defined width is the content only. Padding, margin and border increase the space the box will use.
How much total width would this box take up? div.box { width: 600px; padding: 50px 20px; border: 1px solid black; margin: 10px; }
How much total width would this box take up? div.box { width: 600px; padding: 50px 20px; border: 1px solid black; margin: 10px; } Answer: 10 + 1+ 20 + 600 + 20 + 1+ 10 = 662px Left margin+ Left border+ Left padding+ width + Right padding + Right border + Right padding
Could two boxes fit side-by-side in main div? Why is it important to know the total width a box would take up? Consider this: div.box { width: 300px; padding: 50px 20px; border: 1px solid red; } div#main{ width: 700px; } Could two boxes fit side-by-side in main div?
Why is it important to know the total width a box would take up Why is it important to know the total width a box would take up? Consider this: <div id=“main”> <div class=“box”> Box 1 content </div> <div class=“box”> Box 2 content div#main { width: 700px; } div.box { float: left; width: 300px; padding: 50px 20px; border: 1px solid red; }
How much margin can you add to the boxes to fill the entire space? <div id=“main”> <div class=“box”> Box 1 content </div> <div class=“box”> Box 2 content div#main { width: 700px; } div.box { float: left; width: 300px; padding: 50px 20px; border: 1px solid red; }
How much margin can you add to the boxes to fill the entire space? <div id=“main”> <div class=“box”> Box 1 content </div> <div class=“box”> Box 2 content div#main { width: 700px; } div.box { float: left; width: 300px; padding: 50px 20px; border: 1px solid red; margin: 4px; }
Consider only the following style definitions: b {color: green;} i {color: blue;} b i {color: red; } What will be the color of <i><b>this text</b></i>? ______________
Consider only the following style definitions: b {color: green;} i {color: blue;} b i {color: red; } What will be the color of <i><b>this text</b></i>? green
Consider only the following style definitions: b {color: green;} i {color: blue;} b i {color: red; } What will be the color of <b><i>this text</i></b>? _______________
Consider only the following style definitions: b {color: green;} i {color: blue;} b i {color: red; } What will be the color of <b><i>this text</i></b>? red
What color is the word “One”? p {color: red} b {color: orange} i {color: yellow} p b {color: green} p i {color: blue} p b i {color: purple} What color is the word “One”? <p>One <b><i>Two</i> Three</b> <u><i>Four</i><u> <b> <i style="color: pink;">Five</i> </b> </p>
What color is the word “One”? p {color: red} b {color: orange} i {color: yellow} p b {color: green} p i {color: blue} p b i {color: purple} What color is the word “One”? <p>One <b><i>Two</i> Three</b> <u><i>Four</i><u> <b> <i style="color: pink;">Five</i> </b> </p>
What color is the word “Two”? p {color: red} b {color: orange} i {color: yellow} p b {color: green} p i {color: blue} p b i {color: purple} What color is the word “Two”? <p>One <b><i>Two</i> Three</b> <u><i>Four</i><u> <b> <i style="color: pink;">Five</i> </b> </p>
What color is the word “Two”? p {color: red} b {color: orange} i {color: yellow} p b {color: green} p i {color: blue} p b i {color: purple} What color is the word “Two”? <p>One <b><i>Two</i> Three</b> <u><i>Four</i><u> <b> <i style="color: pink;">Five</i> </b> </p>
What color is the word “Three”? p {color: red} b {color: orange} i {color: yellow} p b {color: green} p i {color: blue} p b i {color: purple} What color is the word “Three”? <p>One <b><i>Two</i> Three</b> <u><i>Four</i><u> <b> <i style="color: pink;">Five</i> </b> </p>
What color is the word “Three”? p {color: red} b {color: orange} i {color: yellow} p b {color: green} p i {color: blue} p b i {color: purple} What color is the word “Three”? <p>One <b><i>Two</i> Three</b> <u><i>Four</i><u> <b> <i style="color: pink;">Five</i> </b> </p>
What color is the word “Four”? p {color: red} b {color: orange} i {color: yellow} p b {color: green} p i {color: blue} p b i {color: purple} What color is the word “Four”? <p>One <b><i>Two</i> Three</b> <u><i>Four</i><u> <b> <i style="color: pink;">Five</i> </b> </p>
What color is the word “Four”? p {color: red} b {color: orange} i {color: yellow} p b {color: green} p i {color: blue} p b i {color: purple} What color is the word “Four”? <p>One <b><i>Two</i> Three</b> <u><i>Four</i><u> <b> <i style="color: pink;">Five</i> </b> </p>
Fix the CSS syntax errors below Fix the CSS syntax errors below. You can cross out code and add your correction below. <h1> { text-decoration: none; }
Fix the CSS syntax errors below Fix the CSS syntax errors below. You can cross out code and add your correction below. h1 { text-decoration: none; }
Fix the CSS syntax errors below Fix the CSS syntax errors below. You can cross out code and add your correction below. img#logo { position = absolute; }
Fix the CSS syntax errors below Fix the CSS syntax errors below. You can cross out code and add your correction below. img#logo { position: absolute; }
Write the CSS code to create a two-column layout where the navigation menu will be on the right with a 200px width and the content area will be on the left with a 600px width. <div id="menu">Navigation Menu</div> <div id="content">Content goes here</div>
Write the CSS code to create a two-column layout where the navigation menu will be on the right with a 200px width and the content area will be on the left with a 600px width. <div id="menu"> Navigation Menu </div> <div id="content"> Content goes here </div> div#menu { float: right; width: 200px; } div#content { float: left; width: 600px; }
Fill in the blank with the correctly spelled CSS property name. Defines space between an element’s text and border, i.e., the space inside of the elements’ borders ________________________________
Fill in the blank with the correctly spelled CSS property name. Defines space between an element’s text and border, i.e., the space inside of the elements’ borders padding
Fill in the blank with the correctly spelled CSS property name. Makes rounded borders ______________________________
Fill in the blank with the correctly spelled CSS property name. Makes rounded borders border-radius
Write the CSS code for the following examples. Give <div> elements a rounded solid border that is 1px wide and red.
Write the CSS code for the following examples. Make all hyperlinks bold but only when they are nested in the <header> tag
Write the CSS code for the following examples. Change the bullet type of all <li> elements to “square” but only if the <li> is nested inside of a <ul> and the <ul> has the class name “sqr”
Concept type questions Imagine you have a large website that links a separate style sheet so every page has a consistent look and feel. Imagine you want to make the company name (h1 tag is used) on the homepage bigger, but not impact any other content anywhere. How do you do this and what is the name of this type of css?
Concept type questions Imagine you have a large website that links a separate style sheet so every page has a consistent look and feel. Imagine you have an FAQ page that uses the h3 tag often. Imagine you want to change the h3 tag but only on the FAQ page. Describe how you could do this? What is the name of this type of css?
<body> <h1>Heading</h1> <div id="intro"> <h2>Subhead</h2> <p>Paragraph text with a <a href="page.html">link</a> to another page.</p> </div> <div id="main"> <p>Paragraph one</p> <p>Paragraph two</p> <ol> <li>Item 1</li> <li>Item 3</li> <li>Item 4</li> </ol> </body> draw this web page as a tree-like diagram that shows the parent-child relationships.