CSS Basics Flashcards
Where do you write your CSS?
In a separate file
What part of HTML do you link your CSS?
The Head
How to write link tag to link CSS to HTML? Where do you write it?
Write in HTML head
< link rel= “stylesheet” href= “path” >
p{
color: red;
font-weight: bold;
}
What is P?
The selector
p{
color: red;
font-weight: bold;
}
What is:
Color: red;
A declaration (line)
p{
color: red;
font-weight: bold;
}
What is
{
color: red;
font-weight: bold;
}
Declaration Block
What is
p{
color: red;
font-weight: bold;
}
A rule
p{
color: red;
font-weight: bold;
}
What is color?
Property
p{
color: red;
font-weight: bold;
}
What is red?
A value
p{
color: red;
font-weight: bold;
}
What happens if you forget ;?
The stuff after might break/ no render
What is the cascade principle?
Read CSS from top to bottom.
Code below overrides code above
Different parts of CSS have stronger value than others. What is this point system called?
Specificity weight
p{
color: red;
font-weight: bold;
}
p{
color: blue
}
If you want P to be red what can you do? What ex.
Give P a higher specificity weight (ex. Add a class)
4 ways to CSS color?
Word
Hex
RGBa
HSLa
What color property?
0, 100%, 50%, 1
HSLa
Hue, saturation, light
What CSS color property? What does the last number mean?
(255, 0, 0, 1);
RGBa.
Last number = transparency
FF0000
What color property?
Hex
What’s an alpha channel and what property do you find it? What’s the range?
Alpha = the a in RGBa or HSLa = transparency label
Range = .01 -1
How to write CSS font-family? Explain the different parts.
Write link in Head of HTML. Then in CSS…
P{
font-family: ‘sans pro’, ‘helvetica’ sans-serif;
Sans pro = 1st choice
All others = backups
How to link font family to HTML? Where to write it? What does it look like on the CSS side?
In head.
Html = < link href = “ URL of font “ rel = “ stylesheet “ >
CSS = font - family : ‘ font 1 ‘ , ‘ font choice 2 ‘ font choice 3 ;
Where do you get new font links?
Check google fonts
When adding fonts to your HTML, do you put the link before or after your CSS stylesheet link? Why?
Before!
The CSS has instructions for the font. CSS cant load the font, if the font not available
Section
——p
How to make p red?
Section > p{
color: red;
}
> is a parent child selection
Section
>article
»p
What is article to section?
Article = direct descendant of section
2 p’s are nested in a section. What’s their relationship?
Siblings
Section
>article
»P
What is section and article to P?
Section = grandparent Article = Parent
What’s the difference between parent>child and parent child?
Parent > is direct child selection
Parent child = all child’s in a parent
You use P + P selection. Why does only the 2nd P get targeted?
P + P = all the P’s following a P. Initial P doesn’t follow a P
This model talks about how different element takes up space. And how they’re spatially related to each other?
The box model.
4 important parts of box model?
Height/width
Padding
Border
Margin
Every single element in HTML is a _____
Box
If box width = 100px, and box border width = 10px, padding right=20px. how wide is total section?
140px!
Border, margin, content, padding. Which is outermost to inner most?
Margin, border, padding, content
What’s the point of padding?
Creates distance between content and its border.
H2.likesquack.dinosaur{
If the selector has no space, what does that mean?
Means all elements that are H2s WITH likesquack class WITH dinosaur class. No nesting. All simultaneous.
What direction will text go if you float it Left? Right?
All the way up, all the way Left. Right = opposite
How to apply a rule to multiple selectors?
Use commas! (Header,footer{)
How to select a class in CSS (ex. Class=zebra)
.zebra
How to select an ID in CSS (ex = fruit)
fruit
What are the 3 basic selectors in CSS?
1 = type (ex. P, div, H1..) 2= class (.zebra) 3= ID (#animal)
How to link CSS into HTML? What part of HTML do you link CSS?
Link inside head.
link rel=stylesheet href = file location.
What are two CSS resets? How are they different?
Eric Myer’s reset = normal popular variant
Normalize.css = more advanced reset.
How to write a CSS comment?
/* content */
What is the issue with the following CSS selector? Why?
.hotdog p.mustard
Not best practice to preface a class selector w/ an element. Better to select all elements of a given class, not just one type of element. .hotdog .mustard is better.
In a combined selector, which one is the key selector? What are the other parts called?
Key selector = the last selector. All other before it = pre-qualifiers
How many different classes can you assign to an element? Give ex.
Many. Ex. < a class = bean bean-tower > < / a > (2 classes)
What does em mean in CSS? Example?
For length sizing. Em = how many times size of font. Width = 5em;
How to write two classes for one tag? (Ex. Cat + dog classes)
Class = “ cat dog”
all elements have default display. How can you override it? Ex. Change a block to an inline level element.
P {
Display: block (inline or inline-block){
}
how to CSS code a 40in margin on the left of a content box, but a 20 inch margin on the right?
Margin - right: 20px ;
Margin - left: 40 px;
Block, inline-block, and inline level elements. Which one cannot have a custom height/width? Why?
Inline levels = must change to only fit their content
You want to change an inline element and make it bigger with a border. How?
Change the display to inline-block or block.
can you use margins on inline level elements?
L and R margins yes
Top and bottom margins no
what does margin: 10px 20px ; mean?
10px = top and bottom 20px = left and right
What does padding: 10px 20px 0 15px ; mean?
10px on top, 20px right, 0 bottom, 15 left. (Clockwise)
What different types of borders?
Solid, double, dashed, dotted.
How do I create a border only on the bottom of content?
Border-bottom: …
How to code rounded corners on a box?
border - radius
What does x and Y mean in this CSS code?
Border - radius: X Y ;
X = top L & bottom R corner Y = Top R and bottom L corner
What does A B C D mean in the following?
Border - radius: A B C D ;
A = Top L B = Top R C = Bottom R D = Bottom L
What are vendor prefixes? Are they important?
Prefixes to properties to allow different browser compatibility; ex: - moz - = Mozilla
Good for old browsers, slowly not being used anymore.
What is the “ box - sizing “ property? What are it’s values?
Different way to change an element size.
Values = content - box, padding - box, border -box
Explain the content-box value for the box -sizing property.
Same as traditional box model. You specify height width padding, etc.
What is the padding-box value for box - sizing property? Is it popular?
More padding = smaller box width to compensate. Deprecated code - dont use anymore
Explain the border-box value in a box-sizing property.
Makes everything (border, padding, element) = total width/ height
Of all the values of the box-sizing property, which one is the best? Why?
Border - box because we don’t need to think about math when deciding dimensions.
What are developer tools?
Filters in browser to help you analyze your code.
what does a comma mean in CSS
Ex: p , h1 {
It means AND
Ex. All paragraphs AND h1’s…
Explain the “auto” value when writing margin or padding widths
Auto = automatic = computer will make L and R side equal and center the content.
What are two basic ways to position content in CSS?
Floats
Inline-Blocks
What do floats do?
Pull content away from page flow and move it somewhere
What kinds of values are used with the float property?
Left, right
What happens when floater has a parent? When it doesn’t have a parent?
Parent = float to edge of parent element
No parent = float to edge of page
What can happen to the elements around a floated element?
The content will wrap around and also might be affected visually.
If you don’t want other elements to wrap around your float, what can you do?
Clear or contain the float
How do you clear floats?
Clear: (left, right, or both) ;
What does it mean to contain a float?
You nest the floated element into a parent element, and then clear the parent element. This prevents the float from visually changing the elements around it.
What’s the difference between containing and clearing a float.
Both do the same thing. But containers, prevent floats from changing the elements around them.
How to contain a float? What’s a clear fix?
Nest it inside another element and assign that element a class = “clearfix”
In CSS code…
. Clearfix : : after {
Content: “ “ ;
Clear: both ;
Display : table ;
}
Inline block elements naturally have a small space between them. How to override this space? (2 easy ways)
1 = start opening tag of next section on same line as closing tag of previous section.
2 = start comment after previous section closing tag, end comment before next section opening tag.
Besides floats And inline-block elements, what can you do when you want to position an element in a really specific location?
Use a position property with box-offset properties.
How does a position property work? What values does it have?
Position = whether or not code will be part of the html flow. Values = static (part of code flow), relative or absolute.
You want to move a section/box down 2 inches, and right 2 inches. What do you code?
Section {
Top: 2in ;
Position: relative;
Left: 2in ;
}Position w/ box offset vs floats
Float pulls code from html = many problems with surrounding content.
Position = saves the content’s spot, and puts it where you want it.
Position: relative vs Position: absolute
Relative = content stays in code flow . keep content’s original spot, and can move it anywhere.
Absolute = content rips from code flow. Content moves in relation to its parent (that is relatively positioned. No relatively positioned parent = content moves in relation to body.
What display value completely hides an element and removes it from the html code?
Display: none ;
If you want to center an element, how do you set the margin?
Margin: 0 auto ;
width vs max - width property?
Width = defines size but will change depending on window size.
Max - width = no changes regardless of window size.
When coding box - sizing : border - box, what prefixes should you write, to adapt to all browsers?
- WebKit - box - sizing : border - box ;
- moz - box - sizing : border - box;
Box - sizing : border - box ;
What are the values to the position property?
Static, relative, absolute, fixed
What does position : static mean?
Static = default value. Aka “not positioned”.
What does position : relative mean?
If used with top, bottom, left, or right properties, element will be moved from original position, but stay in the code flow; no other elements will take its spot.
What does position: fixed mean? What is it good for?
Element will stay in whatever place you want, even if scrolling on webpage. Great for “back to top” buttons.
What modern way to write a clearfix?
. Clearfix {
Overflow: auto ;
Zoom: 1 ;
}
When you use percent on content sizing, the content will be a percent of what?
It’s container.
What is responsive design?
Your website responds to every browser and device to look good in all forms.
What are media queries? Give an example.
CSS codes that activate when a condition happens; usually for changes in screen sizes.
Ex. When a screen becomes smaller like a phone, the webpage layout changes.
You want to write a media query that changes all texts to the color black when a screen/window becomes smaller than 500px. How?
@ media ( max - width: 499px ) {
Font - color : black
}
@ media ( min - width : 600 px)
What does that mean?
Code will ONLY activate when the screen is minimum 600 px
How do you write a media query for ALL types of screens and media?
Just “ @ media “
Or @ media all
When making a layout using inline-block elements, what property must you always include.
Vertical - align : top
When using a NEW CSS property, what must you do to ensure older browser compatibility? Give an example.
Use prefixes. Ex. - moz -
What’s a flexbox? How does it compare to floats?
Newest CSS technique to make layouts. A lot easier and better than floats.
What is font-weight?
How thick or thin the font is
How to check your code on the browser?
Highlight > right click > inspect
Or view > developer > tools
Do you always have to write your css reset at the beginning of all your CSS documents?
No. You can save to separate doc and link it to your HTML.
Normalize CSS vs reset CSS
Reset = deletes all default browser styles
Normalize = keeps the default styles, but makes them all the SAME in every browser.
How to code a clearfix?
. Clearfix : after {
Content: “ . “ ; Display: block; Clear: both; Visibility: hidden; Line - height: 0 ; Height: 0 ;
What’s the box model hacK?
Start with:
Box - sizing : border - box ;
Typeface vs font
Typeface = what we see
Font = file that contains typeface
Text - shadow vs box - shadow?
Text = for text
Box = for entire element
What are the values in a box - shadow property:
Ex. Box - shadow: A B C D E F
A = inset (shadow inside or outside of box) B = horizontal distance C = Vertical distance D = blur radius E = spread (shadow gets bigger or smaller than element) F = color
How to capitalize only the first letter of a text?
Text - transform : capitalize ;
How to make all letters of a word capitalized? What about all lower case?
Text - transform : uppercase (lowercase)
What are all the values in the text-transform property?
Uppercase, lowercase, capitalize, none, inherit.
What are Boolean attributes?
Don’t require values. Just on or off.
Ex. Autoplay
What’s critical pass CSS?
Putting CSS in your HTML to facilitate early visual loading. Amazon tactic.
When creating media queries, how can you reference typical screen sizes for different devices?
Use the inspect tool on chrome.
How to select other siblings but not directly?
P ~ P
