CSS Cascading Style Sheets Flashcards
What is CSS?
It is used to styling language used for website layout and design and most commonly used with HTML
What are the three main ways of adding CSS to an html file?
Inline CSS
Internal CSS
External CSS
What is Inline CSS?
Inserted directly in the html element
What is internal CSS?
Using <style> tags within a single document</style>
What is external CSS?
Linking an external .css file
Should you keep the presentation, functionality, and style completely separate as much as possible?
Yes, to attempt otherwise is not practical, nor scalable.
What is the html tag <link></link> used for?
To externally link a css document
What is the rel attribute used for and where?
It is used under the <link></link> tag, and defines the relationship between a linked resource and the current document, e.g.
rel=“stylesheet”
What is a css selector?
It is the first part of a CSS rule used to find or SELECT the HTML elements you want to style.
If you have a property, you must also have a ?
Value
If you have a value you must also have a ?
Property
What is a : in a CSS declaration?
Property/value separator
What is the semicolon in a css declaration?
A declaration separator
What is the symbol for a declaration separator?
Semicolon ;
What is the symbol for a property/value separator?
Colon .
What are the four ways to designate colors in CSS?
Color names
HTML5 Color Names
Hexadecimal
RGB
What is an ID in HTML?
Specifically identifies a SINGLE element
What is an class in HTML?
Can be assigned to multiple elements on a page or entire website so that a css can be applied to multiple tags
What symbol is used to target a class?
. Dot
Should you use pixels (px) or percentages with containers?
Percentages
From the content, to the outside, describe the spacing from inside out.
Padding, border, margin
What is the order for margin and padding shorthand?
Top, right, bottom, left
What is the order when writing the declaration for borders and margins?
Size, color, style
5px red solid
What does this mean?
*{
}
Everything between the brackets will be applied to every element and style
What does the hover state do?
When you hover over a link it will turn red
What is css inheritance?
Refers to the relationship between HTML tags and how certain css styles can apply to a tag without any css rules directly applied to it
What is cascading in css?
Refers to the fact that cumulative styles across multiple css rules are applied to each and every html tag.
How to add comments in css?
Place text inside
/* */
What is the purpose of SASS?
An extension to css that allows you to use variables, math operations, mixing, loops, functions, imports and other functionality that does not exist in css.
What are three file formats used for the web?
Jpg, gif, png
Difference between gif 87a and 89a?
87a is the original format indexed for color images
89a can do the same, but includes transparency and animation capabilities.
What is float used for?
Allows an image to float left/right to the text in a container
What is image transparency?
The opacity of an image
What is hexadecimal color?
Hexadecimal values that represent colors with the #RRGGBB format.
What is the hex code for white?
FFFFFF
What is the hex code for black?
000000
What is the hex code for red?
FF0000
What is the hex code for green?
00FF00
What is the hex code for blue?
0000FF
what are link states?
Interactive elements that can change display based on the current state of their interaction with the user
Difference between fixed and liquid layouts
Fixed means the width of the entire page is set
Liquid means the width of the entire page is flexible
what are browser safe colors?
216 out of 256 general colors
identify three css properties related to formatting text and fonts.
Color
Letter-spacing
Line-height
Text-align
Text-decoration
Word-spacing
Create a style rule that specifies a font-family, font-size, and color. Include a fallback font.
What is the box model?
Refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties.
Difference between padding and margin
Padding represents inner space of an element (from the text out)
Margin is the white space available surround an element (furthest edges in)
