1
2
3
4
5
100
This file contains all the CSS styling information: where HTML elements should go, what color they should be, how big they should be, and more.
What is stylesheet.css
100
What does CSS stands for? What is this language used to describe?
What is * Cascading Style Sheets * the appearance and formatting of your HTML.
100
This file describes how an HTML file should look.
What is a style sheet
100
How do you make a paragraph's text red? How do you make part of the text blue?
*In the html file, add span color: blue *In stylesheet.css, add p {color: red;} *add span {color: blue;}
100
How do you link the html file to the stylesheet.css file?
Add link type="text/css" rel="stylesheet" href="stylesheet.css"/ in the HTML file between the head tags
200
What are the two main reasons for separating your form/formatting (CSS) from your functional content/structure (HTML)?
What is: 1. You can apply the same formatting to several HTML elements without rewriting code (e.g. style="color:red":) over and over. 2. You can apply similar appearance and formatting to several HTML pages from a single CSS file
200
Why inline styling is a less awesome way to style your website?
What is: You have to write the same code over and over, and if you want to make a big stylistic change to several elements, you have to change every single style tag. With a single CSS file, you only have to make the change in one place!
200
You know you should write your CSS in a totally separate file. But how do you make sure your HTML file can see that CSS information? You do this by putting a link tag between the head tags of your HTML page. Your link tag needs three attributes. What are they?
What is: 1. A type attribute that should always be equal to "text/css" 2. A rel attribute that should always be equal to "stylesheet" 3. A href attribute that should point to the web address of your CSS file
200
What is self-closing tag? Give 2 examples.
What is tag that uses a single set of brackets to be the opening and closing tags. Example: 1. link type="text/css" rel="stylesheet" href="CSS file address"/ 2. img src="web address"/
200
What does the general format for CSS syntax look like? Give 3 examples.
What is selector { property: value; } Examples: A selector can be any HTML element, such as p tags, img tags, or table tags.
300
In your HTML document, there are a lot of span tags! All those words are in regular font, but we want them to be a different font and to look fancy, how do you make this happen?
What is: Go to the stylesheet.css file and tell the span selector that you want the font-family to be cursive. p { font-size: 100px; } span { font-family:Cursive; }
300
What are two ways to put CSS in one place?
*This first is to put your CSS between style tags, right in the same file as your HTML. These style tags go inside the head tags of your webpage; *Second way is to put a link tag between the head tags of your HTML page. Your link tag needs three attributes: link type="text/css" rel="stylesheet" href="stylesheet.css"/
300
1. To make a paragraph's text red with CSS, what do you do? 2. How does CSS knows you're done with one pair and ready for the next?
What is 1. p { color: red; } 2. You need to end each property-value with a semi-colon (;).
300
1. A property is an aspect of a selector. Give 3 examples. 2. A value is a possible setting for a property. Give 2 examples.
What is: 1. font-family, color, and font-size 2. color can be red, blue, black, or almost any color; font-family can be a whole bunch of different fonts; and so on.
300
Another cool advantage of CSS is that you can set many properties for one selector. For instance, if you want to set a paragraph's font, font color, and font size, what do you do?
What is: p { font-family: Arial; color: blue; font-size: 24px; }
400
As you start adding more and more property-value pairs for each CSS selector, it's important to remember to put a semicolon (;) at the end of each line. What does the semicolon tell CSS? What are all property-value pairs for a selector are surrounded by?
What is 1. The semicolon tell CSS that one property-value pair is over and it's time to move on to the next one. Without semicolons, it'll become confused and your page won't look right. 2. curly braces ({}).
400
What is the difference between the comment in HTML and the comment in CSS?
What is: *html: !--I'm a comment!-- in brackets *css: /*I'm a comment!*/
400
What is hexadecimal? Describe the hex values in detail.
What is the number base-16. Each digit can be the numbers 0 through 9 or the letters a through f. Hex values always start with a pound sign (#), are up to six "digits" long, and are case-insensitive: that is, they don't care about capitalization. #FFC125 and #ffc125 are the same color.
400
1. When we've asked you to adjust font size, what is the unit you should use? Give an example. 2. What is a pixel? 3. What is the different between ems and the em tags?
1. the unit you should use is px (for "pixels"), for example: p { font-size: 10px; } 2. A pixel is a dot on your computer screen. Specifying font sizes in pixels is great when you want the user to see exactly on their screen what you designed on yours, though it assumes your screens are of similar size. 3. You use ems when the user is using a screen that's a very different size from yours, like a smartphone screen. The em tags are used for emphasis!
400
1. The font-size unit em is a relative measure: what is one em? 2. You can change the font-family of certain elements using CSS. You've seen us use the fonts Verdana, Courier, and Garamond. But how many fonts does CSS know? What are they?
One em is equal to the default font size on whatever screen the user is using. That makes it great for smartphone screens, since it doesn't try to tell the smartphone exactly how big to make a font: it just says, "Hey, 1em is the font size that you normally use, so 2em is twice as big and 0.5em is half that size!" 2. The answer is: it depends. Most computers will understand popular fonts like Verdana, Courier, and Garamond, but each individual computer has different fonts installed on it. The good news is that CSS has some built-in defaults meant to ensure your users see what you intend. They are: serif: A font with little decorative bits on the ends of the strokes that make up letters. Do a search on "serif" to see what we mean. sans-serif: A plain-looking font, like this one. It doesn't have the little doohickies on the ends of letters like a serif font does. cursive: A scripty font! It looks like cursive writing.
500
When you set color properties using CSS, you have been tying things like color:red. What if you want maroon? Or fire engine red? Or more of a red-orange? Does CSS know all those words? How does CSS understand millions of different colors? Give 5 examples of the following colors for each heading text: maroon, coral, goldenrod, sea green, royal blue, plum.
The answer is no. It can, however, understand millions of colors in the form of hexadecimal values. h1 { color: #8B1C62; (maroon) } h2 { color: #FF7256; (coral) } h3 { color: #FFC125; (goldenrod) } h4 { color: #54FF9F; (sea green) } h5 { color: #530EE8; (royal blue) } h6 { color: #8B668B; (plum) }
500
Many HTML elements support the border property. This can be especially useful with tables. The border property in turn supports several values. 1. What do you type if you want a border 2 pixels thick, solid, and red? 2. Set your tds (table data cells) to have a height of 50px. Give your tds a border of 1px dashed blue. Give your table a border of 1px solid black.
What is: 1. selector { border: 2px solid red; } 2. td{ height: 50px } td{ border: 1px dashed blue } table{ border: 1px solid black }
500
1. Links have a lot of the same properties as regular text: you can change their font, color, size, and so on. But links also have a property. What is this property? What does this property do? 2. Do the following task: *On the CSS file, set your image's height to 100px and width to 300px. *On the CSS tab, give your image a border of 1px solid #4682b4.
What is text-decoration, that you can change to give your links a little more custom flair. img{ height: 100px; width: 300px; } img{ border: 1px solid #4682b4; }
500
Do the following: On the CSS file, add a div selector and add property: value pairs of: height: 50px width: 120px border-color: #6495ED background-color: #BCD2EE. Your border-style can be any type (dashed, solid, and so on) and you can use any border-width you want. Set your div's border-radius to 5px. Set your div's margin to auto and its text-align property to center.
div { height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; } div { border-radius: 5px } div { margin: auto; text-align: center; }
500
What is an inline-block value? What is an inline value?
An inline-block value allows you to put several block elements on the same line. The inline value places all your elements next to one another, but not as blocks: they don't keep their dimensions.
M
e
n
u