CSS (Cascading Style Sheets) Flashcards
CSS rule
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 ({ }).
CSS selector
A CSS selector specifies the HTML elements to which the specific style rule applies.
declaration block
A declaration block contains one or more declarations separated by semicolons (;).
declaration
A CSS styling declaration is a CSS property followed by a colon (:) and the property value.
inline style
An inline style places CSS declarations inside a tag’s style attribute.
embedded stylesheet
An embedded stylesheet places CSS rules in an HTML document’s head using <style> tags.</style>
external stylesheet
An external stylesheet places CSS rules in a separate file that is imported into an HTML document with a <link></link> tag.
element selector
The element selector matches elements with the specified element names.
Ex: p { color: blue; } selects all p elements.
class selector
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.
ID selector
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.
descendant selector
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.
pseudo-class selector
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.
class attribute
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>
universal selector
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.
multiple selector
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;
}
child selector
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.
Sibling elements
Sibling elements are elements that share the same parent element.
general sibling selector
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.
adjacent sibling
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.
attribute selector
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.
pseudo element selector
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.
::after
Add content after the matched element. li::after { content: “<” }
::before
Add content before the matched element. li::before { content: “***” }
::first-line
Match the first line of text in a block element. p::first-line { color: red }
::first-letter
Match the first letter of text in a block element. p::first-letter { font-size:200% }
::selection
Matches the text selected by user. ::selection { background: yellow }
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)
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)
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.
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 <html> element.
box model
The box model describes the size of each element as a series of nested boxes.
Content
The innermost box contains the content of the element, such as text and images.
Padding
The padding box contains the content box and adds a transparent area around the content.
Border
The border box contains the padded content and adds an optionally colored area around the padding.
Margin
The margin box contains all three boxes and adds a transparent area around the border.
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.
padding property
The padding property specifies the padding thickness. Ex: padding: 5px; creates a 5 pixel padding around the content.
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.
margin property
The margin property specifies the margin thickness. Ex: margin: 10px; creates a 10 pixel margin.
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.
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.
wireframe
wireframe, a blueprint for a web page that shows how future content will be arranged.
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.
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: <div style="display: flex">. 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.
flex item
A flex item is a child element of a flex container that is positioned and sized according to various CSS flexbox properties.
flex-direction
The flex-direction property defines the direction of flex items within the container using values:
row (default)
row-reverse
column
column-reverse
gap:
The gap property defines the space between flex items. Ex: gap: 10px; puts a 10px gap between all items.
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
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
