CSS Box Model Flashcards
Padding
-Separates the content from the border
Margin
-Area outside the border and is used to control the space between other elements.
-Vertical margin and horizontal margin
Code:
auto (centers the page)
margin: 2px //top and bottom 0 //left and right
Div element
Code:
<div></div>
Add divisions to a page
Link
- Self closing element
- You can link the CSS file here
Border shorthand
.class {
border: line-width line-style color
Overflow
Filter
-Applying filters
Code used:
filter: blur(2px);
Box-shadow
Border-radius
Defines the border radii with pixels. Rounds the edges
Transform
Can rotate an object in degrees
Code:
transform: rotate(0.6deg) (can also use negative to rotate the opposite direction
Meta
-Goes in the head element
Code:
name=”viewport”
content=”width=device-width, initial-scale=1”
Box-sizing
Display using flex
Flexbox
Flexbox is a one-dimensional CSS layout approach that focuses on the flow of content. It offers the ability to control the way items are spaced and aligned within a container.
Flex direction
Specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis.
Flex-wrap
Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.
Justify-content
Aligns flex items along the main axis of the current line of the flex container.
Align-items
Aligns flex items along the cross axis of the current line of the flex container.
Object-fit
Specifies how the contents of a replaced element should be scaled relative to the box established by its used height and width.
Font-weight
Makes text bolder
Letter-spacing
Spacing between letters (pixels)
Float
The float property is used to place an element on the left or right of its container, allowing other content (such as text) to wrap around it.
Rem
The rem unit stands for root em, and is relative to the font size of the html element.
Create an .sm-text selector and set the font-size to 0.85rem, which would calculate to be roughly 13.6px (remember that you set your html to have a font-size of 16px).
:not Pseudo selector
The :not pseudo-selector can be used to select all elements that do not match the given CSS rule.
Code:
div:not(#example) {
color: red;
}
Aspect-ratio
Targeting elements within elements
use <
Code:
nav > ul {
}
Action attribute on a form element
The URI of a program that processes the form information. This value can be overridden by a formaction attribute on a or element.
Method attribute on a form element
The HTTP method that the browser uses to submit the form. Possible values are:
post: Corresponds to the HTTP POST method ; form data are included in the body of the form and sent to the server.
get: Corresponds to the HTTP GET method; form data are appended to the action attribute URI with a ‘?’ as separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
dialog: Use when the form is inside a element to close the dialog when submitted.
This value can be overridden by a formmethod attribute on a or element.
Role attribute
Indicates a purpose behind an element on a page to assistive technologies
Aria-labelledby
linking to a page within the website
href=”#css-questions”
name attributes
Placeholder text
sometimes not always the best to do this since people may think that there is already text there
span element
linking inputs to labels
had to put id and name
link in a text
Code:
<a></a>
