CSS Flashcards
where does CSS go ?
in a separate file.
how to link CSS in a separate file?
put in the head
<link></link>
what is the whole thing called? :
p {
color:red;
font-weight:bold;
}
a rule
in :
p {
color:red;
font-weight:bold;
}
what is p called?
the selector (the element we want to style.)
in:
p {
color:red;
font-weight:bold;
}
what is whats between the brackets called?
a declaration block composed of declarations
what is a declaration composed of?
a property and value pair.
what does the Cascade mean ?
CSS is read from top to bottom but what is below can override what is above.
what does CSS stand for ?
Cascading Style Sheet.
why do you use many fonts in css ?
backup
where do we link our google fonts?
before our stylesheet
how to turn code into comment on CSS?
select and ctr+/
how to underline text on css ?
text-decoration : underline;
how to change the size of a text in CSS?
font-size: ?px;
how to select an element that is the direct descendant of another element?
parent > child
how to select an element thats is the child but not the direct descendant of an element?
parent child
how to select an element that is the direct sibling of another element?
element + element (it only works if it has a sibling above it)
how to select one distinct element?
id syntax: #id (elements can only have one id, there can oly be one id of the same value in the document.)
what are classes for?
they are for selecting multiple elements syntax : .className
what is specificity
tags classes ids and other have points, to override a rule with a certain specificity you need the same or more value
how many points of specificity does tags classes and ids have?
tag: 1 classes: 10 ids:100 other(inline !important):1000
what is the box model ?
every element is a box composed of the element + padding+border and a margin bully to push it around
how to apply margin or padding on the top and botom only?
padding 10px 0; it read clockwise starting from the top
how to center an element?
margin: 0 auto;
how to clear an element for floats?
clear:both;
how to tell the browser to ignore borders in the box model?
box-sizing: border-box
how to make an element disappear ?
display:none;
how to contain float element?
use the cllearfix hack and give the class to the containing element
what is line height?
it si the distance between two lines of text . it is controlled using the line-height property (general guide line is 1.5 or 150%)
how to center a text vertically using line-height?
by using the same value of height and line height (mainly for short text like btns)
how to add a background img?
background-image:url(‘img.png’)
how to display a background image once?
background images by default repeat indefinitely, to not repeat use: background-repeat:no-repeat;
how to get a linear gradient background?
background:linear-gradient(color1,color2)
how to get a radial gradient background
radial gradiant means from the center outwards, its using the function background: radial-gradiant(color1,color2)
how to control the direction of a linear gradiant background?
using to-left to-right to right-bottom etc or using degrees like 315deg (before the colors)
how to set te size of a background image?
background-size: width height; (use auto for second value)
what is the start attribute for ol?
the start attribute defines a number for the list to start <ol start='20'>
what is the reversed attribute?
the reversed attribute, when used on the <ol> element, allows a list to appear in reverse order.
<ol>
</ol>
how to create a dropdown list?
To create a drop-down list we’ll use the <select> and <option> elements. The <select> element wraps all of the menu options, and each menu option is marked up using the <option> element.</option></select></option></select>
how to center a block element horizontally?
text-align:center;
what is relative position?
it allows you to move the element relative to the position it would be if it was static using top bottom left and right.
how to center an element using positions
the parent element should be position relative and the element should be absolute , move to center with left:50% top:50%
complete the centering with translate transform -50%, -50%
