CSS Flashcards
1
Q
What does a h1 {color: black; text-align: center;} tell my computer?
A
CSS is telling my computer that wherever there is a HTML <h1></h1> tag to color it black and align its text in the center.
2
Q
What does a p {font-family: “Arial”; font-size: 14px;} tell my computer?
A
For all the HTML paragraphs <p></p>, let’s use the font family Arial, and let’s make the text 14px.
3
Q
The primary way to write CSS is to _____ HTML tags.
A
DESCRIBE
4
Q
The BIG idea with CSS is that you use it to tell your web browser how to _____ all that HTML you’ve been busy writing.
A
DISPLAY
5
Q
CSS selector tells the computer what?
A
The HTML element it is describing.
6
Q
Why are the greater-than and less-than HTML brackets <> missing from CSS?
A
…if they were there, the CSS wouldn’t work!
7
Q
Each CSS property has two parts:
A
- NAME
2. VALUE
8
Q
Each CSS property has its own _____.
A
LINE
9
Q
For every HTML element you use, you should create a little bit of _____ to go with it.
A
CSS
10
Q
What does CSS stand for?
A
Cascading Style Sheets
11
Q
Anatomy of a CSS Block?
A
HTML tag {
property1: value;
property2: value;
property3: value;
}
12
Q
What are the 3 BASIC levels of styling my HTML text with CSS?
A
- font-family
- font-size
- color
13
Q
Web safe fonts are _____ on your browser and cover a lot of _____ fonts like Times New Roman, Arial & Verdana.
A
PRELOADED
COMMON
14
Q
What are pixels?
A
Measurements based on the height of your text as pixels, or one of the tiny dots that make up the image on your screen.
15
Q
What are EM’s?
A
Relative text size measurement
16
Q
What are the 2 ways to designate color with CSS?
A
- Web Safe Color names
2. Hexadecimal values
17
Q
Hexadecimal values begin with what?
A
Hashtag #
18
Q
How would I change the alignment of my text with CSS?
A
With TEXT-ALIGN to left, right, center, or justify
19
Q
How would I italicize text with CSS?
A
Using FONT-STYLE is oblique or italic
20
Q
How would I change my HTML text’s weight?
A
Using FONT-WEIGHT is bold, normal, bolder, lighter, or numbers 100 through 900.
21
Q
CSS’s TEXT-TRANSFORM allows you to make all your HTML text what?
A
capitalized, uppercase or lowercase using properties capitalize, uppercase and lowercase.
22
Q
FONT-VARIANT puts your text into, well, _____-_____ or SMALLER SCREAMING.
A
SMALL-CAPS
23
Q
CSS TEXT-DECORATION lets you do what?
A
add lines over, under and through your text using underline, overline and line-through.
24
Q
LINE-HEIGHT allows HTML text to have more _____ _____.
A
BREATHING ROOM
25
LINE-HEIGHT accepts what values?
pixels, em, numbers, and percentages
26
CSS TEXT-INDENT allows one to indents at the _____ of your paragraphs,
BEGINNING
27
What values does CSS TEXT-INDENT take?
pixels, ems, or percentages
28
WORD-SPACING sets the space between what?
WORDS
29
What values do WORD-SPACING AND LINE-SPACING accept?
pixels and ems, as well as negative values
30
How do CSS selectors and HTML tags differ?
CSS selectors are just like HTML opening tags, but without any brackets <>
31
What is the right way to set the color of my p tags to red?
p{
color: red;
}
32
What property do I use to make a line through some text?
text-decoration: line-through;
33
CSS is required to make websites.
False
34
What are 2 ways to use fancy web safe fonts?
1. embed the fonts using the CSS property @font-face
| 2. Use a service like Google Web fonts or Typekit.
35
2 steps to add a font to your CSS using the @font-face CSS property?
1. Download your font file
| 2. Save it in a "font" folder inside the folder where your site files are located.
36
What are the 3 font file type formats one can use?
1. OpenType (.otf)
2. Embedded OpenType (.eot)
3. Web Open Font Format (.woff)
37
Make sure to always put your @font-face CSS properties at the _____ or close to the _____ of your style.css document.
TOP
| TOP
38
Example of how you might add a Bemio OpenType font (OTF) file to your CSS?
@font-face {
font-family: Bemio;
src: url('fonts/Bemio.otf') format('opentype');
}
39
Adding a font variant?
@font-face {
font-family: Bemio Italic;
src: url('fonts/Bemio-Italic.otf') format('opentype');
}
40
Adding an Embedded OpenType font file (EOT)?
@font-face {
font-family: DIN;
src: url('fonts/DINRoundWeb.eot') format ('eot');
}
41
Adding an Web Open Font Format font file (WOFF)?
@font-face {
font-family: DIN;
src: url('fonts/DINRoundWeb.woff') format('woff');
}
42
Fancy font will not work without what?
Single quotes around the font name.
43
How do I tell the tag that it needs to use the separate font family of Bemio Italic?
p.fancyfont em {
font-family:'Bemio Italic';
}
44
What are the 2 parts of a CSS property?
1. Name
| 2. Value
45
Computer screens work in what type of color?
RGB
46
What does RGB stand for?
Red
Green
Blue
47
The variety of colors you see on your screen right now are produced by _____ that appears through your screen.
light
48
How are different colors created on a computer screen?
Each pixel is turned on and off to create different colors
49
RGB is an _____ color model, meaning it mixes colors by light passing through them.
additive
50
Why do we see different colors when there is only three?
Because the eye blends the colors together due to pixels being so small.
51
_____ colors are used within the RGB color model to tell your screen what percentage of Red, Green, and Blue to turn on.
Hexadecimal
52
The _____ symbol signifies that we are defining a hex color.
#
53
00 means _____ and FF means _____
dark
| light
54
How can one set the color of the entire website?
Use BACKGROUND CSS property for the HTML tag.
55
The default value for the
| CSS background property is _____.
transparent
56
Does the CSS BACKGROUND property support images as well?
Yes
57
An example of a CSS BACKGROUND using an image?
div {
background:
url('img/my-background.jpg') repeat 10px 20px white;
}
58
What are the 2 ways to write a CSS BACKGROUND image?
1. Relative URL
| 2. Hard link
59
What is a RELATIVE URL?
Reference to where the image is relative to its location in your code files.
60
What is a HARD LINK?
A regular web link
61
What does the REPEAT command do for an image?
Repeats it covering the body from left to right, top to bottom.
62
What are the 4 options for REPEAT image?
1. no-repeat
2. repeat
3. repeat-x
4. repeat-y
63
On a webpage, the x and y axis begin in the top _____ hand corner of the webpage.
left
64
As a default, that x and y axis values default to _____.
zero
65
An image starts in the top _____ hand corner.
left
66
The width attribute only accepts _____.
pixels
67
What are the 5 border styles?
1. solid
2. dashed
3. dotted
4. grooved
5. ridge
68
Example of BORDER instructions in CSS?
```
header {
border:
4px
dashed
#dddddd;
}
```
69
What’s the CSS property you need to add a fancy font to your CSS?
@font-face
70
Do you have to load font files to your local folders to make them work on your website?
No, you can use Google Fonts or another hosted web font provider, and then link their fonts.
71
You can add color to your CSS using what kinds of color property values?
Web safe color names & hex values
72
To set a border for an HTML block, you need to specify which of the following?
Border thickness, border style, & border color
73
Which property do you need to set a color inside a div?
CSS BACKGROUND property
74
Is there a way to make the background of your site an image using CSS?
Yes, using the background property with an image URL.
75
One of your HTML divs needs a repeating background image. What’s the correct way to write that CSS?
background: url(‘img/flower.jpg’) repeat 10px 10px #ffffe0;
76
Setting your height and width using pixels creates a _____ size for your HTML block elements, meaning they stay the same size no matter what sized screen you're looking at.
fixed
77
What is RESPONSIVE WEB DEVELOPMENT?
The creation of FLEXIBLE elements that change with different screen sizes.
78
What is the best way in CSS to handle overflow text?
leave height blank so it can adjust automatically according to the text width.
79
The space between content and border is known as what?
padding
80
What is the space between two bordered paragraphs known as?
margin
81
Margin is for _____ the HTML element.
Padding is for the _____ the HTML element.
outside
inside
82
The 4 values that margin and padding properties take?
1. Pixels
2. Ems
3. Percentages
4. Auto
83
All HTML elements can be thought of as _____.
boxes
84
The term “box model” is used in CSS when talking about HTML _____ and _____.
design
| layout
85
The CSS BOX MODEL is essentially a box that wraps around HTML _____ .
elements
86
The CSS BOX MODEL consists of what 4 things?
1. margins
2. borders
3. padding
4. content
87
Example of CSS Box Model?
```
div {
width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
}
```
88
What order to margin and padding values follow?
clockwise from top, right, bottom, left.
89
Example of adding multiple margin and padding values?
div {
margin: 0px 20px 0px 10px;
padding: 0px 12px 30px 15px;
}
90
What type of HTML tag are you most likely to set a width and height on?
91
These are the parts of an HTML element as described in the CSS Box Model, from the inside out:
Content, Padding, Border, Margin
92
I can set different margins and padding on each side of my HTML element.
TRUE
93
For margin: 0px 10px 10px 20px;, what side of the HTML element do the pixel values relate to?
Top, Right, Bottom, Left
94
What can I use in CSS to give different HTML elements (
,
, etc) different styles?
Class OR ID
95
A class is a group of HTML elements (
,
, etc) that are the _____ or _____.
same
| similar
96
An ID is a _____ identifier that applies to _____ HTML tag.
singular
| ONE
97
How many HTML elements in a CSS Class can I have?
As many elements in a class as you want
98
How many classes can an HTML elements (
,
, etc) have?
Multiple
99
Example of a CSS Class with different elements?
CSS Class = Car
HTML Element = Mitsubishi
HTML Element = White
HTML Element = 2001
100
You can only have _____ of each CSS ID on a webpage.
one
101
Each HTML elements (
,
, etc) can only have _____ CSS ID.
one
102
Example of a CSS ID for ONE HTML element (
,
, etc)?
Serial number for your gray 2001 Honda
103
If I want more than one HTML element to have the same or similar format then use what CSS?
Class
104
If I want only one HTML element to have a unique format then use what CSS?
ID
105
How would you indicate a CLASS in CSS?
Place a period in front of the selector name.
106
How would I add the newly designated CSS CLASS to my HTML?
Add the CLASS attribute inside the opening HTML element (
,
tag. Ex:
107
T/F: You can add that class attribute .big-idea to any paragraph that that calls out one of your big ideas!
true
108
How would one indicate a ID in CSS?
Place a hashtag in front of the selector name.
109
How would I add the newly designated CSS ID to my HTML?
Add the ID attribute inside the opening HTML element (
,
tag. Ex:
110
Can I use CSS CLASS and ID together?
YES!
Ex:
111
3 Features of CSS CLASS?
1. Can have an unlimited number of elements within that class
2. Each element can have more than ONE class
3. All elements in a class share the same CSS styles
112
3 Features of CSS ID?
1. There can only be ONE element with a given ID per page
2. Each element can only have ONE ID
3. Think of it like a social security number or serial number for that element
113
What are some CSS CLASS and ID naming rules?
1. I can name whatever I want
2. I cannot start a name with a number
3. Name according to what it IS not what it LOOKS like
114
I should be able to read a class name or ID and immediately _____ the purpose of that element.
understand
115
What happens if I make CSS ID's work as navigation links?
When the navigation link is clicked on it will take me to the part on the page the link is destined for....this is in lieu of taking me to a NEW page.
117
2 Steps to make a navigation work with ID's?
1. In the index.html window, give each section ID a name.
| 2. In the code, add a hashtag and then the ID to the href.
119
In an article, I’m using a a bunch of famous quotes – one of which is, as far as I’m concerned, the most important quote. What is the right way to use classes and IDs in this instance?
All the quotes get a class called "quotes", while the most important quote gets an ID of "most-important-quote".
120
What is the right way to add a class name to an HTML element?
< p class="class-name" >
121
What is the right way to add an ID name to your CSS?
#id-name
122
A layout is simply what?
How one would arrange HTML elements on a webpage.
123
One thing that all GOOD layouts have in common is they follow some sort of _____.
grid
124
What 3 things do grid's help with when designing a webpage?
1. Keep ELEMENTS in line
2. Organize a site's SECTIONS
3. Divide a page up according to desired emphasis
125
BEFORE I start coding it is important to take some time to do what?
Decide what layout I am going to use.
126
What are 2 ways I can preplan a websites layout?
1. Photoshop
| 2. Piece of paper
127
Describe a RESPONSIVE LAYOUT.
A website's layout that changes based on the device it is being viewed on.
128
What is a STATIC LAYOUT?
A website layout that maintains its size no matter what device one views it on.
129
What are the 5 most common website layouts?
1. One column
2. Two column
3. Three column
4. Gridded
5. Masonry
130
What does CSS's FLOAT property tell my HTML elements?
To float up next to each other instead of stacking in a block on top of each other.
131
What does a CSS FLOAT property code look like?
p {
float: none;
}
132
What are the 4 CSS FLOAT property choices?
1. None (default)
2. Left
3. Right
4. Inherit
133
What does CSS's INHERIT FLOAT property tell my HTML element to do?
Inherit the float property from the element that is wrapped around it, or its parent element
134
if you float things left, they will sidle up alongside one another 1, 2, 3 from _____ to _____.
left
| right
135
If you float things right, they will stack next to each other 1, 2, 3, from _____ to _____.
right
| left
136
How do I get 30px between a website's elements that have a width of 960px, a left-hand column of 630px, and a right-hand column of 300px?
1. Float both elements to the right
2. Give them their perspective widths
3. Apply a margin-right: 30px to the left-hand column
137
What is the set of rules that make block elements stack on top of each other and inline elements display inline.
Document flow
138
When you float something, you are literally _____ it from the document flow.
removing
139
When an element is floated, the other HTML elements no longer realize it’s there and are acting as if it _____
disappeared
140
What is DOCUMENT FLOW?
Dictates how HTML elements are positioned on a page.
141
How do I get elements to line up next to one another?
Break the HTML document flow by floating them
142
What is the BEST way to avoid FLOATING issues?
FLOAT as few elements as possible
143
The less HTML elements you _____, the fewer elements are removed from the _____ flow, the easier things will be.
FLOAT
| DOCUMENT
144
What is the BEST strategy to float elements to avoid issues?
FLOAT the biggest element rather than a bunch of little ones.
145
What CSS properties can I use if I run into FLOATING issues?
1. CLEAR property
| 2. OVERFLOW property
146
What does the following do?
div {
overflow: auto;
}
Tells the HTML element what to do if it’s contents don’t fit into its container.
147
Why would a
with a bunch of floated elements inside of it have NO height?
Because all of its CHILD elements are floated so it thinks it is empty.
148
How can I use CSS to help a HTML element "remember" it has children that are being floated within it?
By adding the CSS OVERFLOW property to the HTML element it will help the element "remember" the child elements and its height will expand to the size it needs to be to fit all of the elements inside of it.
149
What does the CLEAR property do for HTML?
Tells an element
1. Whether other floating elements are allowed to float next to it (and if so, on which sides of the element
2. Whether the element needs to be moved down (or cleared) below any other floating elements.
150
What does “overflow: auto;” allow one to do?
Adding this to a parent container causes the container to come back (if missing)
151
If I apply the float:left; property to a div, what will happen?
It will float to the left, meaning it will allow other elements to the float alongside it to its right
152
Why can floating elements cause problems?
When an element is floated it is removed from the document flow
153
What does overflow:auto; do?
It makes the parent element grow to the size it needs to be to contain all of it’s floated child elements
154
What does clear:both; do?
It makes sure that the element it is applied to doesn’t float up next to a floated element
155
If I want to add a color to the background of a div, what property do I use?
background
156
What’s the difference between a class and an ID?
A class applies to style settings for a group of elements, and an ID only applies a single HTML element on a page
157
Margins do not affect how well my divs fit and line up inside a fixed-width container.
FALSE
