CSS Flashcards
What does a h1 {color: black; text-align: center;} tell my computer?
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.
What does a p {font-family: “Arial”; font-size: 14px;} tell my computer?
For all the HTML paragraphs <p></p>, let’s use the font family Arial, and let’s make the text 14px.
The primary way to write CSS is to _____ HTML tags.
DESCRIBE
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.
DISPLAY
CSS selector tells the computer what?
The HTML element it is describing.
Why are the greater-than and less-than HTML brackets <> missing from CSS?
…if they were there, the CSS wouldn’t work!
Each CSS property has two parts:
- NAME
2. VALUE
Each CSS property has its own _____.
LINE
For every HTML element you use, you should create a little bit of _____ to go with it.
CSS
What does CSS stand for?
Cascading Style Sheets
Anatomy of a CSS Block?
HTML tag {
property1: value;
property2: value;
property3: value;
}What are the 3 BASIC levels of styling my HTML text with CSS?
- font-family
- font-size
- color
Web safe fonts are _____ on your browser and cover a lot of _____ fonts like Times New Roman, Arial & Verdana.
PRELOADED
COMMON
What are pixels?
Measurements based on the height of your text as pixels, or one of the tiny dots that make up the image on your screen.
What are EM’s?
Relative text size measurement
What are the 2 ways to designate color with CSS?
- Web Safe Color names
2. Hexadecimal values
Hexadecimal values begin with what?
Hashtag #
How would I change the alignment of my text with CSS?
With TEXT-ALIGN to left, right, center, or justify
How would I italicize text with CSS?
Using FONT-STYLE is oblique or italic
How would I change my HTML text’s weight?
Using FONT-WEIGHT is bold, normal, bolder, lighter, or numbers 100 through 900.
CSS’s TEXT-TRANSFORM allows you to make all your HTML text what?
capitalized, uppercase or lowercase using properties capitalize, uppercase and lowercase.
FONT-VARIANT puts your text into, well, _____-_____ or SMALLER SCREAMING.
SMALL-CAPS
CSS TEXT-DECORATION lets you do what?
add lines over, under and through your text using underline, overline and line-through.
LINE-HEIGHT allows HTML text to have more _____ _____.
BREATHING ROOM
LINE-HEIGHT accepts what values?
pixels, em, numbers, and percentages
CSS TEXT-INDENT allows one to indents at the _____ of your paragraphs,
BEGINNING
What values does CSS TEXT-INDENT take?
pixels, ems, or percentages
WORD-SPACING sets the space between what?
WORDS
What values do WORD-SPACING AND LINE-SPACING accept?
pixels and ems, as well as negative values
How do CSS selectors and HTML tags differ?
CSS selectors are just like HTML opening tags, but without any brackets <>
What is the right way to set the color of my p tags to red?
p{
color: red;
}
What property do I use to make a line through some text?
text-decoration: line-through;
CSS is required to make websites.
False
What are 2 ways to use fancy web safe fonts?
- embed the fonts using the CSS property @font-face
2. Use a service like Google Web fonts or Typekit.
2 steps to add a font to your CSS using the @font-face CSS property?
- Download your font file
2. Save it in a “font” folder inside the folder where your site files are located.
What are the 3 font file type formats one can use?
- OpenType (.otf)
- Embedded OpenType (.eot)
- Web Open Font Format (.woff)
Make sure to always put your @font-face CSS properties at the _____ or close to the _____ of your style.css document.
TOP
TOP
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’);
}
Adding a font variant?
@font-face {
font-family: Bemio Italic;
src: url(‘fonts/Bemio-Italic.otf’) format(‘opentype’);
}
Adding an Embedded OpenType font file (EOT)?
@font-face {
font-family: DIN;
src: url(‘fonts/DINRoundWeb.eot’) format (‘eot’);
}
Adding an Web Open Font Format font file (WOFF)?
@font-face {
font-family: DIN;
src: url(‘fonts/DINRoundWeb.woff’) format(‘woff’);
}
Fancy font will not work without what?
Single quotes around the font name.
How do I tell the <em> tag that it needs to use the separate font family of Bemio Italic?</em>
p.fancyfont em {
font-family:’Bemio Italic’;
}
What are the 2 parts of a CSS property?
- Name
2. Value
Computer screens work in what type of color?
RGB
What does RGB stand for?
Red
Green
Blue
The variety of colors you see on your screen right now are produced by _____ that appears through your screen.
light
How are different colors created on a computer screen?
Each pixel is turned on and off to create different colors
RGB is an _____ color model, meaning it mixes colors by light passing through them.
additive
Why do we see different colors when there is only three?
Because the eye blends the colors together due to pixels being so small.
_____ colors are used within the RGB color model to tell your screen what percentage of Red, Green, and Blue to turn on.
Hexadecimal
The _____ symbol signifies that we are defining a hex color.
#
00 means _____ and FF means _____
dark
light
How can one set the color of the entire website?
Use BACKGROUND CSS property for the HTML tag.
The default value for the
CSS background property is _____.
transparent
Does the CSS BACKGROUND property support images as well?
Yes
An example of a CSS BACKGROUND using an image?
div {
background:
url(‘img/my-background.jpg’) repeat 10px 20px white;
}
What are the 2 ways to write a CSS BACKGROUND image?
- Relative URL
2. Hard link
What is a RELATIVE URL?
Reference to where the image is relative to its location in your code files.
What is a HARD LINK?
A regular web link
What does the REPEAT command do for an image?
Repeats it covering the body from left to right, top to bottom.
What are the 4 options for REPEAT image?
- no-repeat
- repeat
- repeat-x
- repeat-y
On a webpage, the x and y axis begin in the top _____ hand corner of the webpage.
left
As a default, that x and y axis values default to _____.
zero
An image starts in the top _____ hand corner.
left
The width attribute only accepts _____.
pixels
What are the 5 border styles?
- solid
- dashed
- dotted
- grooved
- ridge
Example of BORDER instructions in CSS?
header {
border:
4px
dashed
#dddddd;
}What’s the CSS property you need to add a fancy font to your CSS?
@font-face
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.
You can add color to your CSS using what kinds of color property values?
Web safe color names & hex values
To set a border for an HTML block, you need to specify which of the following?
Border thickness, border style, & border color
Which property do you need to set a color inside a div?
CSS BACKGROUND property
Is there a way to make the background of your site an image using CSS?
Yes, using the background property with an image URL.
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;
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
What is RESPONSIVE WEB DEVELOPMENT?
The creation of FLEXIBLE elements that change with different screen sizes.
What is the best way in CSS to handle overflow text?
leave height blank so it can adjust automatically according to the text width.
The space between content and border is known as what?
padding
What is the space between two bordered paragraphs known as?
margin
Margin is for _____ the HTML element.
Padding is for the _____ the HTML element.
outside
inside
The 4 values that margin and padding properties take?
- Pixels
- Ems
- Percentages
- Auto
All HTML elements can be thought of as _____.
boxes
The term “box model” is used in CSS when talking about HTML _____ and _____.
design
layout
The CSS BOX MODEL is essentially a box that wraps around HTML _____ .
elements
The CSS BOX MODEL consists of what 4 things?
- margins
- borders
- padding
- content
Example of CSS Box Model?
div {
width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
}What order to margin and padding values follow?
clockwise from top, right, bottom, left.
Example of adding multiple margin and padding values?
div {
margin: 0px 20px 0px 10px;
padding: 0px 12px 30px 15px;
}
What type of HTML tag are you most likely to set a width and height on?
<div></div>
These are the parts of an HTML element as described in the CSS Box Model, from the inside out:
Content, Padding, Border, Margin
I can set different margins and padding on each side of my HTML element.
TRUE
For margin: 0px 10px 10px 20px;, what side of the HTML element do the pixel values relate to?
Top, Right, Bottom, Left
What can I use in CSS to give different HTML elements (<p>, </p><h1>, etc) different styles? </h1>
Class OR ID
A class is a group of HTML elements (<p>, </p><h1>, etc) that are the _____ or _____.</h1>
same
similar
An ID is a _____ identifier that applies to _____ HTML tag.
singular
ONE
How many HTML elements in a CSS Class can I have?
As many elements in a class as you want
How many classes can an HTML elements (<p>, </p><h1>, etc) have?</h1>
Multiple
Example of a CSS Class with different elements?
CSS Class = Car
HTML Element = Mitsubishi
HTML Element = White
HTML Element = 2001
You can only have _____ of each CSS ID on a webpage.
one
Each HTML elements (<p>, </p><h1>, etc) can only have _____ CSS ID. </h1>
one
Example of a CSS ID for ONE HTML element (<p>, </p><h1>, etc)? </h1>
Serial number for your gray 2001 Honda
If I want more than one HTML element to have the same or similar format then use what CSS?
Class
If I want only one HTML element to have a unique format then use what CSS?
ID
How would you indicate a CLASS in CSS?
Place a period in front of the selector name.
How would I add the newly designated CSS CLASS to my HTML?
Add the CLASS attribute inside the opening HTML element (<p>, </p><h1> tag.
Ex: </h1><p class="big-idea"></p>
T/F: You can add that class attribute .big-idea to any paragraph that that calls out one of your big ideas!
true
How would one indicate a ID in CSS?
Place a hashtag in front of the selector name.
How would I add the newly designated CSS ID to my HTML?
Add the ID attribute inside the opening HTML element (<p>, </p><h1> tag.
Ex: </h1><p></p>
Can I use CSS CLASS and ID together?
YES!
Ex:
<p></p>
3 Features of CSS CLASS?
- Can have an unlimited number of elements within that class
- Each element can have more than ONE class
- All elements in a class share the same CSS styles
3 Features of CSS ID?
- There can only be ONE element with a given ID per page
- Each element can only have ONE ID
- Think of it like a social security number or serial number for that element
What are some CSS CLASS and ID naming rules?
- I can name whatever I want
- I cannot start a name with a number
- Name according to what it IS not what it LOOKS like
I should be able to read a class name or ID and immediately _____ the purpose of that element.
understand
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.
Example of CSS ID as a navigation link?
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>2 Steps to make a navigation work with ID’s?
- 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.
Example of making a navigation working with an ID:
if , then <li><a>Home</a></li>.
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”.
What is the right way to add a class name to an HTML element?
< p class=”class-name” >
What is the right way to add an ID name to your CSS?
id-name
A layout is simply what?
How one would arrange HTML elements on a webpage.
One thing that all GOOD layouts have in common is they follow some sort of _____.
grid
What 3 things do grid’s help with when designing a webpage?
- Keep ELEMENTS in line
- Organize a site’s SECTIONS
- Divide a page up according to desired emphasis
BEFORE I start coding it is important to take some time to do what?
Decide what layout I am going to use.
What are 2 ways I can preplan a websites layout?
- Photoshop
2. Piece of paper
Describe a RESPONSIVE LAYOUT.
A website’s layout that changes based on the device it is being viewed on.
What is a STATIC LAYOUT?
A website layout that maintains its size no matter what device one views it on.
What are the 5 most common website layouts?
- One column
- Two column
- Three column
- Gridded
- Masonry
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.
What does a CSS FLOAT property code look like?
p {
float: none;
}
What are the 4 CSS FLOAT property choices?
- None (default)
- Left
- Right
- Inherit
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
if you float things left, they will sidle up alongside one another 1, 2, 3 from _____ to _____.
left
right
If you float things right, they will stack next to each other 1, 2, 3, from _____ to _____.
right
left
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?
- Float both elements to the right
- Give them their perspective widths
- Apply a margin-right: 30px to the left-hand column
What is the set of rules that make block elements stack on top of each other and inline elements display inline.
Document flow
When you float something, you are literally _____ it from the document flow.
removing
When an element is floated, the other HTML elements no longer realize it’s there and are acting as if it _____
disappeared
What is DOCUMENT FLOW?
Dictates how HTML elements are positioned on a page.
How do I get elements to line up next to one another?
Break the HTML document flow by floating them
What is the BEST way to avoid FLOATING issues?
FLOAT as few elements as possible
The less HTML elements you _____, the fewer elements are removed from the _____ flow, the easier things will be.
FLOAT
DOCUMENT
What is the BEST strategy to float elements to avoid issues?
FLOAT the biggest element rather than a bunch of little ones.
What CSS properties can I use if I run into FLOATING issues?
- CLEAR property
2. OVERFLOW property
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.
Why would a <div> with a bunch of floated elements inside of it have NO height?</div>
Because all of its CHILD elements are floated so it thinks it is empty.
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.
What does the CLEAR property do for HTML?
Tells an element
- Whether other floating elements are allowed to float next to it (and if so, on which sides of the element
- Whether the element needs to be moved down (or cleared) below any other floating elements.
What does “overflow: auto;” allow one to do?
Adding this to a parent container causes the container to come back (if missing)
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
Why can floating elements cause problems?
When an element is floated it is removed from the document flow
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
What does clear:both; do?
It makes sure that the element it is applied to doesn’t float up next to a floated element
If I want to add a color to the background of a div, what property do I use?
background
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
Margins do not affect how well my divs fit and line up inside a fixed-width container.
FALSE
