css3 from scratch Flashcards
1
Q
css stands for
A
cascading style sheets
2
Q
css style parts broken down
A
selector{property:value; property: value;}
ex p{color:blue; font-size:20px;}
3
Q
ways of implementing css
A
internal, external using link rel=”stylesheet”,inline
4
Q
external stylesheets exist where
A
a file of its own
5
Q
advantages of external stylesheets
A
faster loading because it is cached
6
Q
internal style sheet implementation
A
in header
'style'
{
color:blue;
}
'/style'
7
Q
set style for specific type of element, like a footer that is inside a paragraph tag
A
style
footer p
{
}
/style
8
Q
selector types
A
tag,class,id
9
Q
selector tag
A
page-wide
10
Q
class selector
A
apply to every element in that class
11
Q
id selector
A
apply to one specific tag
12
Q
id and javascript
A
javascript can use id selector
13
Q
how to set style of a class type
A
using the .(class)’style’‘/style’
14
Q
how to set tyle of an id
A
(id) …style…
15
Q
background color css3 keyword
A
background-color: x;
16
Q
set font color in css
A
color:x;
17
Q
import stlyehseet
A
in head:
18
Q
t/f
A
the inclusion of css sheets matters– second one overrides rules, first is base set
19
Q
what does margin:auto do
A
equal margins on all sides and centered on page, can add constraints for the auto to inherit from
20
Q
how to add two classes to an elemnet
A
seperate by space
21
Q
what is one way to overide a css style for one of the elements in a grid so tyat it removes/adds something it needs
A
sperate class name my space, and add formatting in its corresponding css
22
Q
overwrite css settings of an element after using it
A
set button to custom color, and set link tag (anchor tag) to default
23
Q
what css atrr can make text upercase
A
text-transform: uppercase;
24
Q
how to add an action to a css element in css
A
.btn:hover {
color:blue
25
padding and margin paramaters follow what order of pattern
trbl
26
what is float in css
float denotes the arrangement of items, like horizontal
27
what is list-style in css
a property that can remove list decorations or add them, like bullets
28
what are some border css styles
size, solid, etc.
29
css border can be added to individual sides of an element t/f
t, border-right or top etc.
30
in css, the word cascading means what
it means your styles can be overwritten
31
in css what is a Descendent Selector
CSS selector that selects all the elements of a given type that are nested inside another type of element.
32
whats a css rule
basically just the css:
| footer { color: green;}
33
in csss in using a descendent selector, say you have
| nav>ul>li>a; in stylyiyng the anchor tag (a) in a nav, how do we do this? Do we need to include ul,li?
nav a{}
34
css element to make a link not be underlined
text-decoration:none;
35
in css what is max-width
max-width:900px says we want it to have no larger width than 900px
36
in css what is text-align
you can align text to center, left, or right etc.
37
in css how to use margin to center it on the page
margin: 0px auto;
38
in css max-width property is useful for browsers that are smaller than the set max bc why
the element will reduce in size to adjust
39
in css hexadecimal color what is the shorthand for a color
#fff, is equiv to #ffffff
40
how to denote a pseudo class in css
:
| a:visitited
41
how to ass a css comment
/*
42
in css what is font-family
defines which font should be applied to text
43
in css what is font-size
sets size of text in either relative or absolute unitys
44
in css if a font-family isnt found how can you specify a backup font-family
just use a comma and the alternative name
45
in css what is em
it is a relative unit, 1.75 would be 1.75x the relative font
46
in css what is font-weight
you can use font-weight to set bold, normal, etc.
47
in css what is line-height
sets the amount of space between each line of text-- accepts any css length unit
48
in css what is an alternative way to set just a top, bottom etc for margin or padding
margin-top:x; etc
49
in css what would happen if you set an img to max-width:100%; in a container
if the container shrinks, the image shrinks with it
50
in css what does list-style do
Sets the style of numbers or bullet points for ordered and unordered lists. The marks can also be removed entirely with the value "none"
51
in css what does float do
Allows an element to be taken out of the normal flow and placed to the left or right of its container. Text and other inline elements will wrap around it.
52
in css what does clear propety do
specifies whether an element can be adjacent to a floated element or if it should be moved down and "clear" any floated elements
53
in css setting width to 100% would do what
span the element across its entire parent element
54
in css what is the display property
Sets whether an element should be rendered as a block element, inline element, or inline-block element.
55
in css what does border-radius do
defines the roundness of a border corner
56
in css, if border-radius were set to 100% what would happen
it would appear as a circle
57
in css how can you add a link that is a telephone number
href="tel:555-5555"
58
in css how can you add a link for an email adress
href="mailto:adress@.com"
59
in css how to set a background image
background-image: url('www'')
60
in css how to set the size of a background image
background-size:
61
in css how to set if a background image should be repeated
background-repeat:
//by default backgrounds will repeat
62
in css what is a media query
allows for the change of layout of the page elements based on the resizing of the page
63
in css what is a breakpoint
The specific screen widths where a responsive layout "breaks" and needs to change in order to accommodate the screen.
64
in css media queries use @x (what is x?) for what
Media queries use the @media CSS rule to define conditions of the browser medium. In other words, it allows for CSS styling to only be included if certain conditions are met, such as a specific browser width.
65
in css and media queries, how do you specify a media query based on the screen size
@media screen and (min-width:x){
}
66
in css you can use a pseudo class so that every nth child gets some specialized css, how do you do this
example:
li:nth-child(4n){ clear:left; } //this applies clear to every fourth item
67
can css be shared across multiple html files?
yes
68
what are a few new features of css 3
rounded corners, box shadows, gradients, transitions/animations, flexbox
69
in css what are the fundamentals of the "cascade"
importance(depends on origin [from least importance to greatest]: each browser has its own "User Agent sytyle sheet", then user style sheets, and then the author style sheet),specificity,source order(top to bottom)
70
in css what is a user agent style sheet
a browsers default css
71
in css, what is inheritence
its properties values are inherited from its parent
72
three methods to add css
inline, external, interal
73
in css how to use inline style
'p style="background:blue"'
74
in css, will inline styles override external style sheets?
yes
75
in css how to add internal css
in the head, using the style tag (type="text/css")
76
what is the downside of using internal css
they are downloaded each time the page is loaded
77
in css using an external style sheet requires what in the link tag
rel (relationship) which for css needs to be "stylesheet", and the href for the path of the css
78
what is a big advantage of using an external css
external css is often cached by the browser, so it only needs to be loaded once
79
in css how do you import an additional stylesheet
using @import preceeding the other css, or internal in a style tag
80
what is the drawback of using @import in css
performance as it needs to call the server for each import
81
what is a universal selector in css
*{prop:value}//this sets it to every element on the page
82
in css what is a descendent selector
for example a h1 inside of a span: span h1{}
83
in css what symbol defines a direct child selector
> ; .main > a{} //this means only direct children instead of all
84
in css how do we define an adjacent sibling selector (using what symbol)
+; it targets only those that are directly adjacent to its parent
85
in css an attribute selector is defined how
[class]
86
in css how could you use an attribute selector to set the style of an input type
input[type="submit"]{}
