HTML & CSS- part 1

Question 1

What is the syntax of an HTML element?

Answer 1

Question 2

What is a tag’s relationship to an element?

Answer 2

A tag is a part of an element.

Question 3

How do you note an html page?

Answer 3

Text enclosed by these (but without spaces):
< ! - -
- - >
isn’t readable by the browser. It’s just for human readers.

Question 4

What’s the file name extension for an html document?

Answer 4

.html

Question 5

What’s the file name extension for a CSS document?

Answer 5

.css

Question 6

Which kind of HTML page might not have its file name visible in the browser address bar?

Answer 6

index

Question 7

What goes before “www” in a web address?

Answer 7

http://

Question 8

How many HEADING sizes are there? Which is the largest?

Answer 8

*Six heading sizes.

*The largest is <h1>

Question 9

What’s the second tag for <br>?

Answer 9

There isn’t one.

Question 10

Is there a space between <br> and the text it affects?

Answer 10

No.

Question 11

Where does the browser break the line in a <p>?

Answer 11

*Wherever it wants

*If you want the browser to break the heading a certain way, you have to tell it to do so explicitly, using the tag < br >

Question 12

What’s the difference in row-skipping:
<p> < br >?

Answer 12

<p> breaks the line and skips a row

<br> just breaks a line. Does not skip a row.

Question 13

Are CSS files and HTML files stored in the same folder?

Answer 13

You could put the CSS file in the same folder as your HTML file if you wanted to, but most developers don’t.

Question 14

What’s the code to specify which font you want for a paragraph?

Answer 14

Question 15

In a font stack, why do you write Georgia without quotes but “Times New Roman” with quotes?

Answer 15

Because “Times New Roman” has a space. If a font name has a space, you must put quotes around it?

Question 16

What is always the last item in a font stack (besides the curly brace)?

Answer 16

The generic font descriptor, like serif or sans serif

Question 17

In a font stack, why do you list more than one font?

Answer 17

*Fallback fonts are necessary because the browser grabs the fonts for the webpage from the user’s computer.

*With a font stack, the browser will move to your 2nd choice if the first isn’t available.

Question 18

How many fallback fonts should you list?

Answer 18

You can list as many as you want, but usually it’s three or four.

Question 19

What’s the first line of a code to style a paragraph? The last line?

Answer 19

First line is (note the space): p {
Last line is: }

Question 20

How do you code a font stack?

Answer 20

font-family: font name, font name, serif/sans serif/monospace;

Note:
*you indent “font-family” two spaces

*use a colon after “font-family”

*commas between font names

*semicolon at the end, after the generic one

Question 21

What is a Web-safe font?

Answer 21

Web safe fonts are fonts that have a high likelihood of being found on the user’s computer

Question 22

How do you select the font for an h1 or an h2 compared to a paragraph?

Answer 22

It works the same way– just swap the first p for an h1 or h2:
p {
h1 {

Question 23

What does this mean?
font-size: 2em;

Answer 23

*codes the font to be twice as big as the default font

*if using in a heading, it’s twice as big as the default paragraph text, not the heading text.

Question 24

Besides “em”, what are other measurements for coding font size?

Answer 24

*percentages
*pixels
*points

Question 25

How do you create a class called “topics” for a paragraph?

Answer 25

p.topics {
/style info here/
}

Question 26

How do you use a class called “topics” in a paragraph tag?

Answer 26

<p class=”topics”>ipsum</p>

Question 27

How do create a class for headings called “subjects”?

Answer 27

h1.subjects {
/style info here/
}

Question 28

What is a class in CSS?

Answer 28

*A class is a group of style characteristics that you can apply as a unit to a paragraph, heading, etc.

*technically, it’s an ATTRIBUTE. The name of the specific class is the VALUE of that ATTRIBUTE

Question 29

When talking about fonts in CSS, what is EM?

Answer 29

It’s a unit of measurement. (As an HTML tag, it means “emphasis”, i.e. italics)

Question 30

A text that is 2em is twice the size as the default font size for that browser unless…

Answer 30

…a CSS style sheet is already in use on the site. Then it’s twice the size of the style sheet’s text size.

Question 31

How do you create a class that can be used for heading, paragraphs, or anything else that can use a class?

Answer 31

.classname {
}

In other words, you leave out the P or H2, etc in front of the period.

Question 32

What is the numerical range of font weights?

Answer 32

*100 through 900
*goes by hundreds: 100, 200, 300 and so on.
*100 is the lightest weight.
*400 is normal.
*900 is as heavy as it gets.

Question 33

What is the verbal range of font weights?

Answer 33

lighter
normal
bold
bolder

Question 34

Which two tags italicize the text?

Answer 34

<i> and <em>

Question 35

Which two tags make the text bold?

Answer 35

<b> and <strong>

Question 36

Which font characteristic would you use with <i>, <em>, <b>, and <strong>?

Answer 36

font-style

Question 37

Which font characteristics can you use to affect boldness?

Answer 37

font-weight
font-style (if using <b> or <strong>)

Question 38

What does <span> do?

Answer 38

*It lets you markup part of a text (as opposed to a whole block, like <div>). This mean it is “inline”

*You can use it with classes.

*<span class=”animal_names”> bison</span>

Question 39

Explain <span class> in simple language.

Answer 39

It let’s you add customized styling to a part of a heading, paragraph, etc.

Question 40

What is hex for white?

Answer 40

#FFFFFF

Question 41

What is hex for red?

Answer 41

#FF0000

Question 42

What is hex for blue?

Answer 42

#0000FF

Question 43

What is hex for black?

Answer 43

#000000

Question 44

What is hex for yellow?

Answer 44

#FFFF00

Question 45

What is hex for orange?

Answer 45

#FFA500

Question 46

What is hex for green?

Answer 46

#00FF00

Question 47

Which letters can be used in hex?

Answer 47

a-f

Question 48

What’s the code to assign a specific color?

Answer 48

.color_chooser {
color: (hex # or color name);
}

Question 49

Word-spacing isn’t used very often. What is its main use?

Answer 49

To slightly open up the space between bolded words, for better readability.