HTML & CSS- part 1 Flashcards
What is the syntax of an HTML element?
What is a tag’s relationship to an element?
A tag is a part of an element.
How do you note an html page?
Text enclosed by these (but without spaces):
< ! - -
- - >
isn’t readable by the browser. It’s just for human readers.
What’s the file name extension for an html document?
.html
What’s the file name extension for a CSS document?
.css
Which kind of HTML page might not have its file name visible in the browser address bar?
index
What goes before “www” in a web address?
http://
How many HEADING sizes are there? Which is the largest?
*Six heading sizes.
*The largest is <h1>
What’s the second tag for <br>?
There isn’t one.
Is there a space between <br> and the text it affects?
No.
Where does the browser break the line in a <p>?
*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 >
What’s the difference in row-skipping:
<p> < br >?
<p> breaks the line and skips a row
<br> just breaks a line. Does not skip a row.
Are CSS files and HTML files stored in the same folder?
You could put the CSS file in the same folder as your HTML file if you wanted to, but most developers don’t.
What’s the code to specify which font you want for a paragraph?
In a font stack, why do you write Georgia without quotes but “Times New Roman” with quotes?
Because “Times New Roman” has a space. If a font name has a space, you must put quotes around it?
What is always the last item in a font stack (besides the curly brace)?
The generic font descriptor, like serif or sans serif
In a font stack, why do you list more than one font?
*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.
How many fallback fonts should you list?
You can list as many as you want, but usually it’s three or four.
What’s the first line of a code to style a paragraph? The last line?
First line is (note the space): p {
Last line is: }
How do you code a font stack?
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
What is a Web-safe font?
Web safe fonts are fonts that have a high likelihood of being found on the user’s computer
How do you select the font for an h1 or an h2 compared to a paragraph?
It works the same way– just swap the first p for an h1 or h2:
p {
h1 {
What does this mean?
font-size: 2em;
*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.
Besides “em”, what are other measurements for coding font size?
*percentages
*pixels
*points
How do you create a class called “topics” for a paragraph?
p.topics {
/style info here/
}
How do you use a class called “topics” in a paragraph tag?
<p class=”topics”>ipsum</p>
How do create a class for headings called “subjects”?
h1.subjects {
/style info here/
}
What is a class in CSS?
*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
When talking about fonts in CSS, what is EM?
It’s a unit of measurement. (As an HTML tag, it means “emphasis”, i.e. italics)
A text that is 2em is twice the size as the default font size for that browser unless…
…a CSS style sheet is already in use on the site. Then it’s twice the size of the style sheet’s text size.
How do you create a class that can be used for heading, paragraphs, or anything else that can use a class?
.classname {
}
In other words, you leave out the P or H2, etc in front of the period.
What is the numerical range of font weights?
*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.
What is the verbal range of font weights?
lighter
normal
bold
bolder
Which two tags italicize the text?
<i> and <em>
Which two tags make the text bold?
<b> and <strong>
Which font characteristic would you use with <i>, <em>, <b>, and <strong>?
font-style
Which font characteristics can you use to affect boldness?
font-weight
font-style (if using <b> or <strong>)
What does <span> do?
*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>
Explain <span class> in simple language.
It let’s you add customized styling to a part of a heading, paragraph, etc.
What is hex for white?
#FFFFFF
What is hex for red?
#FF0000
What is hex for blue?
#0000FF
What is hex for black?
#000000
What is hex for yellow?
#FFFF00
What is hex for orange?
#FFA500
What is hex for green?
#00FF00
Which letters can be used in hex?
a-f
What’s the code to assign a specific color?
.color_chooser {
color: (hex # or color name);
}
Word-spacing isn’t used very often. What is its main use?
To slightly open up the space between bolded words, for better readability.
