CSS Flashcards
Flexbox
A layout model for aligning items in rows/columns.
Pseudo-class
Target specific states of an element (ex.: img:hover, :link).
Media query
Applies styles based on screen size. Ex.:
@media (max-width: 600px) {
body { font-size: 14px; }
}
Give the different ways to use CSS
- Inline: <p style="color: blue, font-size: 20px;">Styled with CSS</p>
- Internal:
<style>
p {
color: red;
font-size: 18px;
}</style>- External:
<head>
<link></link>
<head>
</head></head>
Give the different selectors in CSS
- Universal: *
- Class: .title
- Element: h1
- ID: #heading
How do you select an attribute with a specific link in CSS?
a[href=”https://example.com”] {
color: green;
}
How do you select an attribute with a specific value in CSS?
a[href*=”blog”] {
color: orange;
}
Pseudo-elements
Allows logical, not actual elements to be defined. (Ex.: article p::first-line)
What is the difference between these selectors?
- p.intro
- p .intro
- p:first-child
- p :first-child
- p.intro = paragraph with class intro
- p .intro = element with class intro descendant of a paragraph
- p:first-child = paragraph that is the first child
- p :first-child = element that is the first child of its parent and descendant of a paragraph
What is the cascading priority?
Its the order the browser assigns CSS rules depending on the type of selectors:
- Important!
- Inline CSS
- ID
- Class
- Element
More specific selectors have higher priority.
How do you use at-rules?
At rules tell the CSS how to behave. Ex.:
@identifier (RULE);
@charset “utf-8”;
@import ‘mobile.css’ screen and (max-width: 300px);
Explain the Box Model:
- Content box: area where content is displayed (inline-size, block-size, width, height)
- Padding box: space between content and border
- Border box: wraps around the content and padding
- Margin box: whitespace between next element
Block display types
Extrinsic sizing:
- Box will break into new line
- Width and height properties are respected
- Padding, margin and border make other elements be pushed away from the box
- If width not specified then the box will extend in the inline direction to fill the space available by its container
Intrinsic sizing:
- Box will not break into new line
- Width and height properties will not apply
- Top and bottom padding, margins and borders will apply but not cause other inline boxes to move away from the box
- Left and right padding, margins and borders will apply, will cause other inline boxes to move away
How do you specify the use of a remote font?
@font-face {
font-family: “Open Sans”;
src: url(“/fonts/OpenSans-Regular-webfont.woff2”) format(“woff2”);
}
Also:
@import
url(‘https://fonts.googleapis.com/css?family=Lora:400,700’);
What is rem and em?
Font-relative units that are used to create scalable layouts.
rem: relative to root element size -> change the font-size of the root element
em: relative to parent element’s size
