CSS Flashcards
What does the . before the class name mean?
differentiates between a tag and a class
What happens?
.title{
color: red;
}
.title{
color: blue;
}
The last one will be displayed
What happens?
.main-brand-2{
color: red;
}
.title-2{
color: green;
}
<h1>This is a heading</h1>
Will be green, as it is last. Easier to think of as that something can have multiple classes, and css works that it will apply the first, then update as it goes along
What happens?
.main-brand-2.title-2{
color: red;
}
.title-2{
color: green;
}
</style>
<h1>This is a heading</h1>
The first one bc it is more specific. (DO NOT ADD SPACE)
What happens?
<div>
<div></div>
</div>
<style>
.test-parent{
width: 100px;
height: 100px;
background-color: blue;
}
.test-child{
width: 50px;
height: 50px;
background-color: red;
}</style>Will have a blue box that is 100 x 100, and in it a red 50 x 50 box
Specifity order
Tags are your base level of specificity
Classes are always more specific than tags
Ids are always more specific than classes
What should you put at the start of every css code relating to the box model?
*, *::before, ::after {
padding: 0;
margin: 0;
box-sizing: border-box;
How to change boldness of text
font-weight
Different types of font-weight
normal, bold, light, 100, 700
How to change font size
font-size
What is text-decoration?
Decorates text
Examples of text-decoration
underline, underline dotted, green wavy underline etc
How to put a border on text
border: 3px solid pink;
What is text-transform used for?
capitalize, uppercase, lowercase
How to use the hover element?
Style your element e.g. a button, then make a separate styling with :hover after you state your class. Style that, and then the button will appear as the first class, and when hovering it will display the :hover element
What does adding :first-child do?
Adds whatever styling inside it to the first child
What does display:inline do?
▪ Makes the element behave like text, allows things to sit beside it
▪ Unable to change values of some properties like height, width, padding, or margin
What does display:block do?
▪ Makes the tag element take up the full width of the screen
▪ Able to change values of properties
What does display:inline-block do?
Makes the elements behave as though it was inline, but with the ability to change values of properties like height, height, width, padding, margin, etc…
What does display:flex and inline-flex do?
Changes the element to a “flex
container” and allows you to change the layout of the children inside the element
What does display:flex do?
Takes up the entire width of the screen
What does display:inline-flex do?
Hugs the contents
What does justify-content do?
Determines the spacing of elements within a container on the horizontal axis
What does display:block and inline-block do?
Similar to “block” and “inline-block” in that it affects
the elements around it, but gains access to new properties that affect the element itself and those inside it. Given the ability to control children’s spacing in two-dimensions
What does the * class do?
Selects everything
What to do if you want to set distance and it be the same regardless of margin, padding etc..
*, *::before, *::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
What to do if you have to code a recipe page and want a thing in the middle?
position: relative;
left: 50%;
transform: translateX(-50%);
