CSS (Cascading Style Sheets) Flashcards
1
Q
CSS rule
A
A web developer uses CSS to write a list of rules. A CSS rule consists of a selector followed by a declaration block between braces ({ }).
2
Q
CSS selector
A
A CSS selector specifies the HTML elements to which the specific style rule applies.
3
Q
declaration block
A
A declaration block contains one or more declarations separated by semicolons (;).
4
Q
declaration
A
A CSS styling declaration is a CSS property followed by a colon (:) and the property value.
5
Q
inline style
A
An inline style places CSS declarations inside a tag’s style attribute.
6
Q
embedded stylesheet
A
An embedded stylesheet places CSS rules in an HTML document’s head using <style> tags.</style>
7
Q
external stylesheet
A
An external stylesheet places CSS rules in a separate file that is imported into an HTML document with a <link></link> tag.
8
Q
element selector
A
The element selector matches elements with the specified element names.
Ex: p { color: blue; } selects all p elements.
9
Q
class selector
A
The class selector, specified with a period character followed by the class name, matches elements that have the specified class name.
Ex: .notice { color: blue; } selects all elements with a class=”notice” attribute.
10
Q
ID selector
A
The ID selector, specified with a hash character followed by the ID name, matches the element that has the specified ID.
Ex: #byLine { color: blue; } selects the element with the id=”byLine” attribute.
11
Q
descendant selector
A
The descendant selector, specified with a selector followed by a space and another selector, matches elements that are contained in other elements.
Ex: h2 em { color: blue; } selects em elements contained in h2 elements.
12
Q
pseudo-class selector
A
The pseudo-class selector, specified with a colon character followed by a pseudo-class name, matches elements based on user behavior or element metainformation.
Ex: :hover { color: blue; } selects elements under the mouse cursor.
13
Q
class attribute
A
An HTML tag’s class attribute specifies the classes to which the tag belongs, with each class name separated by a space. Ex: <span> has two classes, highlight and first. While HTML elements’ IDs are unique, many elements may use the same HTML class name.</span>
14
Q
universal selector
A
The universal selector, specified using an asterisk character (*), matches all elements in the web page. The universal selector is implied when an element name is not specified. Ex: The CSS selectors .highlight and *.highlight match exactly the same elements, where the universal selector is implied in .highlight and explicit in *.highlight.
15
Q
multiple selector
A
The multiple selector, specified using a comma (,) to separate selectors, matches all listed elements to apply a style rule. Ex: ul, ol {
background-color: gray;
color: white;
font-weight: bold;
}
16
Q
child selector
A
The child selector, specified using a greater than character (>) between two selectors, matches any elements where the second element is a direct child of the first element.
17
Q
Sibling elements
A
Sibling elements are elements that share the same parent element.
18
Q
general sibling selector
A
The general sibling selector, specified using a tilde character (~) between two selectors, matches the second element if the second element occurs after the first element and both elements are siblings.
19
Q
adjacent sibling
A
The adjacent sibling selector, specified using a plus character (+) between two selectors, matches an element that immediately follows another element, where both elements have the same parent. Ex: The adjacent selector h1 + p in the figure below matches the first paragraph immediately following the <h1> header element, where both the paragraph and heading share the same section element parent.
20
Q
attribute selector
A
The attribute selector, specified with an attribute name and optional value comparison enclosed in square brackets ([ and ]), matches elements with the specified attribute or the specified attribute and value. Ex: a[target] selector matches anchor elements with a target attribute specified.
21
Q
pseudo element selector
A
The pseudo element selector, specified with two colon characters (::) followed by a pseudo-element, matches parts of elements. The pseudo-element selectors allow styles to apply to the first line or first letter of text of an element or to text that is selected by the user, or allow additional content to be inserted before or after an element.
22
Q
::after
A
Add content after the matched element. li::after { content: “<” }
23
Q
::before
A
Add content before the matched element. li::before { content: “***” }
24
Q
::first-line
A
Match the first line of text in a block element. p::first-line { color: red }
25
::first-letter
Match the first letter of text in a block element. p::first-letter { font-size:200% }
26
::selection
Matches the text selected by user. ::selection { background: yellow }
27
float property
The float property specifies whether the element will float to the right or left of the element's parent container, allowing text to flow around the element. Values for the float property include:
left - Element floats to parent container's left side
right - Element floats to parent container's right side
none - Element does not float (default value)
28
clear property
The clear property can stop elements from floating. Values for the clear property include:
both - No elements allowed to float
left - No element allowed to float on parent container's left side
right - No element allowed to float on parent container's right side
none - Elements allowed to float (default value)
29
display property
The display property controls the layout of the element on a web page. Values for the display property include:
inline - Displays the element as an inline element, like span or a elements.
block - Displays the element as a block element, like p, h1, or div elements.
none - Hides the element from being displayed, like style elements.
inline-block - Displays the contents of the element as a block element, but formats the element as an inline element.
list-item - Displays the contents of the element as a list item element.
30
CSS variable
A CSS variable is a custom CSS property that defines a value. A CSS variable is declared in a CSS selector that defines the variable's scope. A CSS variable can have global scope by declaring the variable in the :root selector, which targets the highest DOM element: the element.
31
box model
The box model describes the size of each element as a series of nested boxes.
32
Content
The innermost box contains the content of the element, such as text and images.
33
Padding
The padding box contains the content box and adds a transparent area around the content.
34
Border
The border box contains the padded content and adds an optionally colored area around the padding.
35
Margin
The margin box contains all three boxes and adds a transparent area around the border.
36
box model
The box model describes the size of each element as a series of nested boxes. The box model is important to understand when considering design and layout.
37
padding property
The padding property specifies the padding thickness. Ex: padding: 5px; creates a 5 pixel padding around the content.
38
border property
The border property specifies the border's thickness, style, and color. Ex: border: 2px solid blue; creates a solid blue border that is 2 pixels thick.
39
margin property
The margin property specifies the margin thickness. Ex: margin: 10px; creates a 10 pixel margin.
40
fixed layout
fixed layout, which uses a fixed-width container to envelop the web page contents. Resizing the browser does not change the width of the web page contents.
41
fluid layout
fluid layout allows the page contents to fill the browser, sometimes by using percentages for widths. Fluid layouts make better use of the available space than fixed layouts and do not produce a horizontal scroll bar when the browser is resized.
42
wireframe
wireframe, a blueprint for a web page that shows how future content will be arranged.
43
flexbox
flexbox is a CSS layout mode that provides an efficient way to lay out elements in a container so the elements behave predictably when the container is resized or viewed on different screen sizes.
44
flex container
A flex container is an element that has the CSS property display set to flex to create a block-level flex container or inline-flex to create an inline flex container. Ex:
. Flex containers hold flex items. A flex item is a child element of a flex container that is positioned and sized according to various CSS flexbox properties.
45
flex item
A flex item is a child element of a flex container that is positioned and sized according to various CSS flexbox properties.
46
flex-direction
The flex-direction property defines the direction of flex items within the container using values:
row (default)
row-reverse
column
column-reverse
47
gap:
The gap property defines the space between flex items. Ex: gap: 10px; puts a 10px gap between all items.
48
justify-content
The justify-content property justifies the flex items within the container using values:
flex-start (default)
flex-end
center
space-between
space-around
49
flex-wrap
The flex-wrap property determines if or how flex items wrap onto multiple rows when the container is not wide enough to hold all items, using values:
nowrap (default)
wrap
wrap-reverse
50
flex-basis
The flex-basis property sets the initial length of a flex item. The values can be auto (the default), a percentage, or a length unit. The default value auto makes the flex item the same initial length as the content.
51
flex-grow
The flex-grow property sets a proportion that determines how much of the available container space should be assigned to the item. The default is 0, meaning the size should be based on the item's content.
52
flex-shrink
The flex-shrink property sets a proportion that determines the item's minimum size. The default is 1, meaning the size should shrink at the same rate as other items when the container width shrinks. A value of 0 means the item should not change sizes when the container width shrinks.
53
flex:
The shorthand property flex specifies flex-grow, flex-shrink, and flex-basis together.
Ex: flex: 0 1 auto; is the same as flex-grow: 0; flex-shrink: 1; flex-basis: auto;
54
Grid layout
is a CSS layout mode that divides a web page into a rectangular grid in which to position page elements. Grid layout is ideal for designing two-dimensional web page layouts.
55
grid container
A grid container is an element that has the CSS property display set to grid to create a block-level grid container or inline-grid to create an inline grid container.
Ex:
.
56
grid item
A grid item is a child element of a grid container that is by default placed into a single grid cell.
57
grid-template-columns
The grid-template-columns property defines the grid container's number of columns and optionally the width of each column.
Ex: grid-template-columns: 50px 90px auto auto; specifies 4 values that create 4 columns: the first is 50px wide, the second is 90px wide, and the third and fourth columns are automatically sized to fit the remainder of the grid width.
58
grid-template-rows
The grid-template-rows property defines the height of each row.
Ex: grid-template-rows: 20px 40px; makes the first row 20px tall and the second row 40px tall.
59
justify-content
(grid container)
The justify-content property horizontally aligns the grid items inside the grid container using values:
start
end
center
stretch
space-around
space-between
space-evenly
60
align-content
The align-content property vertically aligns the grid items inside the grid container using values:
start
end
center
stretch
space-around
space-between
space-evenly
61
row-gap and column-gap
row-gap and column-gap can also be used to set the row and column gaps.
Ex: row-gap: 10px;
62
grid-row
The grid-row property lists the grid item's starting and ending row line numbers.
Ex: grid-row: 1 / 3; makes the grid item start at row line 1 and end at row line 3, so the grid item spans 2 rows.
63
grid-column
The grid-column property lists the grid item's starting and ending column line numbers.
Ex: grid-column: 1 / 4; makes the grid item start at column line 1 and end at column line 4, so the grid item spans 3 columns.
64
grid-area
The grid-area property lists the grid item's starting and ending row and column numbers.
Ex: grid-area: 1 / 2 / 3 / 4; makes the grid item start at row line 1 and column line 2 and end at row line 3 and column line 4, so the grid item spans 2 rows and 2 columns.
65
grid-template-areas
Grid items may be assigned names with the grid-area property. The grid container's grid-template-areas property specifies the grid layout using the named grid items.
66
position property
The CSS position property gives developers more control over where elements should appear in the browser.
67
position has four possible values:
static - Static positioning is the default positioning
relative - Relative positioning positions the element relative to the element's default position
fixed - Fixed positioning positions the element relative to the viewport in a fixed location
absolute - Absolute positioning positions the element relative to the nearest positioned ancestor
68
Viewport
A viewport is the visible area of a web page.
69
z-index property
the CSS z-index property is used to specify a relative distance that orders the appearance of elements. Elements with higher z-index values are placed on top of elements with lower z-index values.
70
text-shadows
Shadows are added to text using the CSS property text-shadow, which accepts four values:
offset-x - Horizontal pixel offset of shadow
offset-y - Vertical pixel offset of shadow
blur-radius - Optional shadow blur (default is 0)
color - Optional shadow color (default is usually the current CSS color)
71
property box-shadow
The CSS property box-shadow adds a shadow to the box around an element using the following properties:
inset - Optional value that draws the shadow inside the box (default is outside the box)
offset-x - Horizontal pixel offset of shadow
offset-y - Vertical pixel offset of shadow
blur-radius - Optional shadow blur (default is 0)
spread-radius - Positive value causes shadow to grow, negative values to shrink (default is 0)
color - Optional shadow color (default is usually the current CSS color)
72
border-radius
An element border's corners can be rounded using the CSS property border-radius, which is assigned one to four radius values.
Single value - All four corners are equally rounded
Two values - First value is top-left and bottom-right corners, second value is top-right and bottom-left corners
Three values - First value is top-left, second is top-right and bottom-left, third is bottom-right
Four values - First value is top-left, second is top-right, third is bottom-right, fourth is bottom-left
73
border-image
The CSS property border-image renders an element's border using sections of an image. The border image takes the place of any border properties specified by border-style.
border-image-source - Image URL
border-image-slice - Image section size
border-image-repeat - "repeat" to repeat the image section, "round" to repeat the image section but resize the image if needed to fit, or "stretch" to stretch an image section
74
vendor prefix
A vendor prefix is a prefix added to an experimental or nonstandard CSS property that only works on a specific browser type. Typical vendor prefixes are:
-webkit- for Chrome, Safari, and newer versions of Opera
-moz- for Firefox
-ms- for Internet Explorer
-o- for older versions of Opera
75
linear-gradient (color1, color2)
The CSS function linear-gradient(color1, color2) creates a linear gradient that transitions from color1 to color2 when moving from the top edge to the bottom edge.
76
Direction
A direction of left, right, top, or bottom with the word to in front.
Ex: to left creates a linear gradient that moves from right to left, and to bottom right goes from the top-left corner to the bottom-right corner.
77
Angle
A CSS angle that points in the direction of the linear gradient. The angles 0deg, 90deg, 180deg, and 270deg correspond to to top, to right, to bottom, and to left, respectively.
78
repeating-linear-gradient()
The repeating-linear-gradient() function repeats a linear gradient where the color values are supplied an optional percent. The percentage value after the last color is the percent of the gradient's total length the repeating gradient should occupy. Ex: repeating-linear-gradient(red, yellow 10%) means the red to yellow gradient occupies 10% of the gradient's total length and is repeated to fill the entire background.
79
radial-gradient(color1, color2)
A radial gradient is created with the CSS function radial-gradient(color1, color2), which creates an ellipse-shaped gradient that begins with color1 in the center and ends with color2 on the perimeter. More than two colors may be specified. A percentage or length can be placed after a color to give more emphasis to the color.
Ex: radial-gradient(red 10%, yellow 30%) gives more emphasis to red and yellow than the default rendering.
80
Positioning radial gradients
A radial gradient's ellipse or circle is centered by default in the enclosing rectangle, but the center position can be specified using "at centerX centerY" where centerX and centerY specify a distance or percentage.
Ex: radial-gradient(at 50px 10px, yellow, green) specifies a center that is 50px from the left edge and 10px from the top.
81
Positioning radial gradients
closest-side - Circle touches the rectangle's side closest to the circle's center. Ellipse touches the vertical and horizontal sides closest to the ellipse's center.
farthest-side - Circle touches the rectangle's side farthest from the circle's center. Ellipse touches the vertical and horizontal sides farthest from the ellipse's center.
closest-corner - Circle or ellipse touches the corner closest to the shape's center.
farthest-corner - Circle or ellipse touches the corner farthest from the shape's center. (Default behavior.)
82
CSS animation
A CSS animation transforms an element's styles over a set time period, producing an animation. CSS animations have three advantages over JavaScript animations:
CSS animations do not require any JavaScript code.
CSS animations often put less load on the computer and can use techniques to produce smoother animations when the computer's resources are limited.
CSS animations allow the browser to more efficiently control animations and stop animations from running in browser tabs that are not visible.
83
@keyframes
(keyframe list)
A keyframe list has a name and contains the keyframes or the properties and values that will be animated. A keyframe list contains two keyframe selectors:
from - The animation starting state that lists the CSS properties and values that apply when the animation begins
to - The animation ending state that lists the CSS properties and values that the "from" values become by the time the animation ends
84
To create an animation, two CSS properties must be defined:
animation-name - Names the keyframe list associated with the animation
animation-duration - Length of the animation in seconds (s) or milliseconds (ms)
animation-delay - is used to delay the start of the animation.
85
animation-timing-function
The animation-timing-function property controls an animation's speed between keyframes. Several timing functions are available:
ease - Slow start, then fast, then slow end (default)
linear - Same speed throughout
ease-in - Slow start
ease-out - Slow end
ease-in-out - Slow
start and end
cubic-bezier(n1,n2,n3,n4) - Specify numbers that control speed based on a Bezier curve
86
animation-iteration-count
Indicates the number of times the animation will run. The value infinite runs the animation repeatedly without stopping.
Ex: animation-iteration-count: 3 runs the animation three times.
87
animation-direction
Indicates animation direction
normal - Normal direction (default)
reverse - Reverse direction
alternate - Alternate between normal and reverse
alternate-reverse - Alternate between reverse and normal
88
animation
Shorthand property indicating the animation name, duration, timing function, delay, iteration count, and direction.
Ex: animation: move 3s linear 2s infinite normal.
89
CSS transition
A CSS transition animates an element's transition from one state to another when an element's CSS property changes value. Ex: A transition may animate an element getting wider when the element's width is increased. Transitions are commonly used with the :hover pseudo-class to trigger an animation when the user mouses over an element.
90
transition property
The transition property defines a transition by specifying one or more CSS properties and each property's transition duration.
91
transition-timing-function property
The transition-timing-function property controls the speed of the transition. Several timing functions are available, and all complete in the same amount of time:
ease - Slow start, then fast, then slow end (default)
linear - Same speed throughout
ease-in - Slow start
ease-out - Slow end
ease-in-out - Slow start and end
cubic-bezier(n1,n2,n3,n4) - Specify numbers that control speed based on a Bezier curve
92
transition-delay property
The transition-delay property delays the transition's start.
93
transform
The transform property applies a 2D or 3D transformation to an element.
94
transformation
A transformation is a graphical operation that alters the position, shape, or orientation of an object. The transform property is assigned a transformation function.
95
Selected 2D transformation functions:
translate(x, y) Moves an element on the x-axis x distance and along the y-axis y distance
/* Moves right 10px and up 20px */
translate(10px, -20px)
scale(x, y) Increases (values > 1) or decreases (values < 1) the width and height by the x and y multiplier
/* Halves the width, doubles the height */
scale(0.5, 2)
rotate(angle) Rotates clockwise by angle
/* Rotates clockwise 45 degrees */
rotate(45deg)
96
appearance: none;
The CSS property appearance is used to control a widget's appearance based on the operating system's theme. Setting appearance to none hides the widget.
97
Sass
Sass is a popular CSS preprocessor that uses CSS-like syntax to build complex CSS stylesheets.
98
Sassy CSS (SCSS)
Sass version 3
Sass version 3 introduced a new syntax called Sassy CSS (SCSS), which uses semicolons and brackets like CSS.
99
SassScript
SassScript is a set of extensions to CSS that allow properties to use variables, arithmetic, and functions. SassScript also provides basic control directives for performing conditional logic and looping.
100
A SassScript variable begins with a $ and can store one of the following data types:
Number - Any number that is optionally followed by a CSS unit. Ex: 3, 5.1, 20px
String - "Double", 'single', or unquoted strings. Ex: "red", 'red', red
Color - Color name or value. Ex: green, #00ff00, rgb(0,255,0)
Boolean - true or false
Null - null
List of values - Separated by spaces or commas. Ex: 10px 20px 30px 40px, Helvetica, Arial, sans-serif
Map - Key/value pairs. Ex: (111:red, 222:blue)
101
lighten(color, amount)
Returns a color lightened by an amount between 0% and 100%
/* Returns #d00 */
$color: lighten(#a00, 10%);
102
invert(color)
Returns the inverse (negative) of a color
/* Returns #5ff */
$color: invert(#a00);
103
to-upper-case(string)
Returns string using all uppercase characters.
/* Returns "BEHOLD!" */
$message: to-upper-case("Behold!");
104
round(number)
Returns a number rounded to the nearest whole number
/* Returns 21px */
$width: round(20.5px);
105
random(limit)
Returns a random integer between 1 and limit (inclusive)
/* Returns a number between 1 and 5 that is multiplied by 20px */
$width: random(5) * 20px;
106
@mixin
A mixin is set of reusable styles and is defined by the @mixin directive.
107
directive
A directive is an extension to the CSS at-rules, which are statements that begin with the @ character.
108
@include
Mixins are included in a document using the @include directive.
109
Control directives
like @if and @for, that support conditional styling and looping
Ability to import SCSS and Sass files using the @import directive
Ability to extend the styles in a class with the @extend directive
110
mobile web browser
A mobile web browser is a web browser designed for mobile devices that can display web pages using HTML, CSS, and JavaScript.
111
Responsive web design (RWD)
Responsive web design (RWD) is a collection of techniques to create web pages that adapt to the browser's size. RWD allows developers to create a single web page that looks good on mobile, desktop, and tablet browsers.
112
adaptive website
An adaptive website adapts to the width of the browser at specific widths. Ex: A container is 400 pixels wide when the browser is wider than 500 pixels, but the container shrinks to 200 pixels when the browser is less than 500 pixels wide. A responsive website will instead smoothly adjust the width of the container to fit the browser width.
113
Graceful degradation
Design the desktop website first and modify the design to fit smaller screens.
114
media query
A CSS media query is a combination of media type and optionally one or more media feature expressions that evaluate to true or false.
115
media type
A media type is a device category that a media query applies to.
all: All devices (default value if no media type is listed)
print: For printers and documents viewed on screen in print preview mode
screen: Intended for screens
116
media feature
A media feature is a characteristic of a browser, device, or environment.
aspect-ratio: Viewport's width-to-height aspect ratio
height:
Viewport's height
width:
Viewport's width
orientation: Viewport's orientation: portrait or landscape
resolution: Device's pixel density
Some media features may be prefixed with "min-" or "max-" to express ≥ or ≤ constraints. Ex: min-width:200px means width ≥ 200px.
117
media attribute (in a link)
A media query in a is specified with the media attribute. When the media query matches (evaluates to true), the link's stylesheet is downloaded.
118
@media
A media query in a stylesheet is specified with the @media at-rule. An at-rule is a CSS statement that starts with the @ character and instructs the CSS engine how to behave. When a media query in a stylesheet matches, the @media's inner rules are defined.
119
breakpoint
Developers choose "breakpoints" to determine when content should be displayed, resized, or hidden in a web page. A breakpoint is the screen width that activates a media query. Ex: In the media query @media screen and (max-width: 800px), 800 is the breakpoint.
120
bootstrap
Bootstrap is one of the most popular free, open-source frameworks. It uses HTML, CSS, and JavaScript to help a developer create responsive websites.
Responsive design is the main usage of Bootstrap.
121
typography
typography is a Bootstrap feature that helps the developer to work the fonts of the page like headings, links, semantic elements,
122
123
-
Key Links
-
Subjects
-
Company
-
Find Us
-
