css3 from scratch Flashcards
css stands for
cascading style sheets
css style parts broken down
selector{property:value; property: value;}
ex p{color:blue; font-size:20px;}
ways of implementing css
internal, external using link rel=”stylesheet”,inline
external stylesheets exist where
a file of its own
advantages of external stylesheets
faster loading because it is cached
internal style sheet implementation
in header
'style'
{
color:blue;
}
'/style'
set style for specific type of element, like a footer that is inside a paragraph tag
style
footer p
{
}
/styleselector types
tag,class,id
selector tag
page-wide
class selector
apply to every element in that class
id selector
apply to one specific tag
id and javascript
javascript can use id selector
how to set style of a class type
using the .(class)’style’‘/style’
how to set tyle of an id
(id) …style…
background color css3 keyword
background-color: x;
set font color in css
color:x;
import stlyehseet
in head:
t/f
the inclusion of css sheets matters– second one overrides rules, first is base set
what does margin:auto do
equal margins on all sides and centered on page, can add constraints for the auto to inherit from
how to add two classes to an elemnet
seperate by space
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
sperate class name my space, and add formatting in its corresponding css
overwrite css settings of an element after using it
set button to custom color, and set link tag (anchor tag) to default
what css atrr can make text upercase
text-transform: uppercase;
how to add an action to a css element in css
.btn:hover {
color:blue
padding and margin paramaters follow what order of pattern
trbl
what is float in css
float denotes the arrangement of items, like horizontal
what is list-style in css
a property that can remove list decorations or add them, like bullets
what are some border css styles
size, solid, etc.
css border can be added to individual sides of an element t/f
t, border-right or top etc.
in css, the word cascading means what
it means your styles can be overwritten
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.
whats a css rule
basically just the css:
footer { color: green;}
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{}
css element to make a link not be underlined
text-decoration:none;
in css what is max-width
max-width:900px says we want it to have no larger width than 900px
in css what is text-align
you can align text to center, left, or right etc.
in css how to use margin to center it on the page
margin: 0px auto;
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
in css hexadecimal color what is the shorthand for a color
fff, is equiv to #ffffff
how to denote a pseudo class in css
:
a:visitited
how to ass a css comment
/*
in css what is font-family
defines which font should be applied to text
in css what is font-size
sets size of text in either relative or absolute unitys
in css if a font-family isnt found how can you specify a backup font-family
just use a comma and the alternative name
in css what is em
it is a relative unit, 1.75 would be 1.75x the relative font
in css what is font-weight
you can use font-weight to set bold, normal, etc.
in css what is line-height
sets the amount of space between each line of text– accepts any css length unit
in css what is an alternative way to set just a top, bottom etc for margin or padding
margin-top:x; etc
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
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”
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.
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
in css setting width to 100% would do what
span the element across its entire parent element
in css what is the display property
Sets whether an element should be rendered as a block element, inline element, or inline-block element.
in css what does border-radius do
defines the roundness of a border corner
in css, if border-radius were set to 100% what would happen
it would appear as a circle
in css how can you add a link that is a telephone number
href=”tel:555-5555”
in css how can you add a link for an email adress
href=”mailto:adress@.com”
in css how to set a background image
background-image: url(‘www’’)
in css how to set the size of a background image
background-size:
in css how to set if a background image should be repeated
background-repeat:
//by default backgrounds will repeat
in css what is a media query
allows for the change of layout of the page elements based on the resizing of the page
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.
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.
in css and media queries, how do you specify a media query based on the screen size
@media screen and (min-width:x){
}
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
can css be shared across multiple html files?
yes
what are a few new features of css 3
rounded corners, box shadows, gradients, transitions/animations, flexbox
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)
in css what is a user agent style sheet
a browsers default css
in css, what is inheritence
its properties values are inherited from its parent
three methods to add css
inline, external, interal
in css how to use inline style
‘p style=”background:blue”’
in css, will inline styles override external style sheets?
yes
in css how to add internal css
in the head, using the style tag (type=”text/css”)
what is the downside of using internal css
they are downloaded each time the page is loaded
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
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
in css how do you import an additional stylesheet
using @import preceeding the other css, or internal in a style tag
what is the drawback of using @import in css
performance as it needs to call the server for each import
what is a universal selector in css
*{prop:value}//this sets it to every element on the page
in css what is a descendent selector
for example a h1 inside of a span: span h1{}
in css what symbol defines a direct child selector
> ; .main > a{} //this means only direct children instead of all
in css how do we define an adjacent sibling selector (using what symbol)
+; it targets only those that are directly adjacent to its parent
in css an attribute selector is defined how
[class]
in css how could you use an attribute selector to set the style of an input type
input[type=”submit”]{}
