HTML and CSS Flashcards
(41 cards)
Golden Rule- Separation of Concerns
HTML - Content / Structure
CSS - Style
Javascript - Behavior / Interaction
Don’t want to mix any of these up at all to help with organization and making future changes.
Exception for Writing Inline Style
Email … might be the only option to style
Exception for Writing CSS in HTML’s head
Amazon does this to save a very small amount of time on loading. This saves them millions of dollars. Don’t do this unless you work for Amazon. :P
Explain with correct terminology:
p {
color: red;
font-weight: bold;
}The whole thing is a rule.
{ ... } is the declaration block
each line within is a declaration
color / font-weight = properties
red / bold = values
: = colon ; = semicolon. lol…
What does CSS stand for? What does the C specifically mean?
CSS = Cascading Style Sheet
CSS is used for styling HTML
Cascade means that “What comes below, can override what came above.” This is how rules are applied in CSS, tied in with specificity weight/value/points
CSS Colors - what types of values can be used?
color: red;
color: #FF0000;
color: rgba (255, 0 , 0 ,1 )
color keyword (red) hexadecimal rgb or rgba values (Leon's favorite. goes well with digital color meter; and nice to have the alpha channel)
Fonts - how to set in CSS and backup to other fonts?
CSS declaration would look like:
font-family: ‘Source Sans Pro’, ‘Helvetica’, sans-serif;
need to link to external sources in the HTML:
find the necessary link in fonts.google.com
Specificity
A value applied to CSS selectors that helps determine which declarations apply. the more specific you are, the more points it gets.
id = 100 class = 10 element = 1
!important = 1000 (AVOID)
IDs
IDs are used for selecting distinct elements. only one id with the same value per document.
HTML: <p>Hey youtube</p> (TAGS - see edit mode)
CSS:
#zebra {
color:green;
}
Classes
Classes are for selecting multiple elements.
Multiple with same value allowed per document.
best practice is to name classes based on content, and avoid naming them off of style. for example “alert” instead of “red” (because what if you want to change the alert color?)
HTML:
<p>Goodbye</p>
(TAGS - see edit mode)
CSS:
.bob{
color:red;
}
Containing Elements
elements that contain other stuff. sections, articles, headers, footers
what’s the difference between these selectors?
section. blue > p
section. blue p
section. blue + p
section. blue ~ p
section .blue p
section. blue > p = selects p’s that are direct children of sections with the class “blue”
section. blue p = selects any p’s that are descendants of sections with the class “blue”
section. blue + p = selects p’s that are the IMMEDIATE siblings after sections with the class “blue”.
section. blue ~ p = select *p’s that are ANY siblings after sections with class “blue” .
section .blue p = selects p’s that are descendants of elements with the class “blue”, where the element with class “blue” is a descendent of a section
CSS Box Model
Every single thing is a box. The Box Model is concerned with how the element takes up space.
description from outside to inside:
margin -> border -> padding -> height/width
margin can be viewed more as “pushing” the box around.
Padding
pushes the border away from the element
Margins
push our box around… add margin-left then the box will be pushed to the right
how do you handle layout in CSS? (like keeping an element at top of screen, keeping a section to the right)
floats, flexbox, and css-grid
floats is outdated - avoid but need to know!
Floats
when this property is assigned to an element, it will try to fight to get to a corner, and the side effect is that things sit next to each other.
so floating left - element will try to go up as much as possible and then left as much as possible
think of it as literally floating it off the page. elements not floating won’t be effected.
How many decimal points can you have in CSS?
- for example: 33.3333%
What does this declaration do?
clear: both;
tells the element to look around it for floating elements and stay in order with them (instead of getting pushed up underneath, for example)
What declaration is used to have an element to “look” for floating elements all around it and attempt to stay in order with them (instead of allowing overlap)?
clear: both;
What rule is used to tell the browser to ignore borders when calculating width?
- {
box-sizing: border-box;
}
Recommended from reading because "box-sizing is pretty new, [so] you should use the -webkit- and -moz- prefixes for now, as I have in these examples. This technique enables experimental features in specific browsers. Also, keep in mind that this one is IE8+.":
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
What does HTML stand for?
HyperText Markup Language - gives content structure and meaning
Name the three parts of this:
<a>Shay Howe</a> (TAGS - see edit mode)
a : elementhref=”…” : attribute
: tag (TAGS - keeps deleting :( )
What declaration and elements are required to structure an HTML document?
- document type declaration
- html element signifying the beginning of the document
- head element identifies top of document including metadata (never displays content to web page itself)
- body element contains all visible content on web page.
