curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md
Review the concepts below to prepare for the upcoming exam.
meta name="viewport" Element: This meta element gives the browser instructions on how to control the page's dimensions and scaling on different devices, particularly on mobile phones and tablets.style attribute. Most of the time you will not be using inline CSS due to separation of concerns.<style> tags inside the head section of an HTML document. This can be useful for creating short code examples, but usually, you will not use internal CSS.link element in the head section. For most projects, you will use an external CSS file over internal or inline CSS.width and height Propertieswidth Property: This property specifies the width of an element. If you do not specify a width, then the default is set to auto. This lets the browser determine the element's width based on its content, parent, and display type.min-width Property: This property specifies the minimum width for an element.max-width Property: This property specifies the maximum width for an element.height Property: This property specifies the height of an element. Similarly, the height is auto by default, which means it will adjust to the content inside.min-height Property: This property specifies the minimum height for an element.max-height Property: This property specifies the maximum height for an element.Descendant Combinator ( ) *a single space between selectors: This combinator is used to target elements that are descendants of a specified parent element.
Child Combinator (>): This combinator is used to select elements that are direct children of a specified parent element.
Next-sibling Combinator (+): This combinator selects an element that immediately follows a specified sibling element.
Subsequent-sibling Combinator (~): This combinator selects all siblings of a specified element that come after it.
span, anchor, and img elements.div, p, and section elements.inline-block by using the display property. These elements behave like inline elements but can have a width and height set like block-level elements.margin Property: This property is used to apply space outside the element, between the element's border and the surrounding elements.margin Shorthand: You can specify 1–4 values to set the margin sides. One value applies to all four sides; two values set top and bottom, then right and left; three values set top, horizontal (right and left), then bottom; four values set top, right, bottom, left.padding Property: This property is used to apply space inside the element, between the content and its border.padding Shorthand: You can specify 1–4 values to set the padding sides. One value applies to all four sides; two values set top and bottom, then right and left; three values set top, horizontal (right and left), then bottom; four values set top, right, bottom, left.style element in the head section of the HTML document. It has lower specificity than inline styles. Both internal and external CSS share the same specificity level, which is determined by their selectors, not their location.link element in the head section and is written in separate .css files. Like internal CSS, its specificity is determined by the selectors used. When two rules have equal specificity, source order determines the winner — the rule that appears later in the document takes precedence. External CSS provides the best maintainability for larger projects.*): This is a special type of CSS selector that matches any element in the document. It is often used to apply a style to all elements on the page, which can be useful for resetting or normalizing styles across different browsers. The universal selector has the lowest specificity value of any selector. It contributes 0 to all parts of the specificity value (0, 0, 0, 0)..) followed by the class name. The specificity value for a class selector is (0, 0, 1, 0). This means that class selectors can override type selectors, but they can be overridden by ID selectors and inline styles.#) followed by the ID name. ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is (0, 1, 0, 0).!important keyword: used to give a style rule the highest priority, allowing it to override any other declarations for a property. When used, it forces the browser to apply the specified style, regardless of the specificity of other selectors. You should be cautious when using !important because it can make your CSS harder to maintain and debug.dialog element, you will get a lot of the functionality and accessibility benefits built in.px (Pixels): This absolute unit is a fixed-size unit of measurement in CSS, providing precise control over dimensions. This means that 1px is always equal to 1/96th of an inch.in (Inch): This absolute unit is equal to 96px.cm (Centimeters): This absolute unit is equal to 25.2/64 of an inch.mm (Millimeters): This absolute unit is equal to 1/10th of a centimeter.q (Quarter-Millimeters): This absolute unit is equal to 1/40th of a centimeter.pc (Picas): This absolute unit is equal to 1/6th of an inch.pt (Points): This absolute unit is equal to 1/72th of an inch.width: 50%; on an element, it will occupy half the width of its parent container.em Unit: These units are relative to the font size of the element. If you are using ems for the font-size property, the size of the text will be relative to the font size of the parent element.rem Unit: These units are relative to the font size of the root element, which is the html element.vh Unit: vh stands for "viewport height" and 1vh is equal to 1% of the viewport's height.vw Unit: vw stands for "viewport width" and 1vw is equal to 1% of the viewport's width.calc Functioncalc() Function: With the calc() function, you can perform calculations directly within your stylesheets to determine property values dynamically. This means that you can create flexible and responsive user interfaces by calculating dimensions based on the viewport size or other elements.:active Pseudo-class: This pseudo-class lets you select the active state of an element, like clicking on a button.:hover Pseudo-class: This pseudo-class defines the hover state of an element.:focus Pseudo-class: This pseudo-class applies styles when an element gains focus, typically through keyboard navigation or when a user clicks into a form input.:focus-within Pseudo-class: This pseudo-class is used to apply styles to an element when it or any of its descendants have focus.input elements based on the state they are in before and after user interaction.:enabled Pseudo-class: This pseudo-class is used to target form buttons or other elements that are currently enabled.:disabled Pseudo-class: This pseudo-class lets you style an interactive element in disabled mode.:checked Pseudo-class: This pseudo-class is used to indicate to the user that it is checked.:valid Pseudo-class: This pseudo-class targets the input fields that meet the validation criteria.:invalid Pseudo-class: This pseudo-class targets the input fields that do not meet the validation criteria.:in-range and :out-of-range Pseudo-classes: These pseudo-classes apply styles to elements based on whether their values are within or outside specified range constraints.:required Pseudo-class: This pseudo-class targets input elements that have the required attribute. It signals to the user that they must fill out the field to submit the form.:optional Pseudo-class: This pseudo-class applies styles to input elements that are not required and can be left empty.:autofill Pseudo-class: This pseudo-class applies styles to input fields that the browser automatically fills with saved data.:any-link Pseudo-class: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it's visited or not.:link Pseudo-class: This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them.:local-link Pseudo-class: This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones.:visited Pseudo-class: This pseudo-class targets a link the user has visited.:target Pseudo-class: This pseudo-class is used to apply styles to an element that is the target of a URL fragment.:root Pseudo-class: This pseudo-class is usually the root html element. It helps you target the highest level in the document so you can apply a common style to the entire document. :empty Pseudo-class: Empty elements, that is, elements with no children other than white space, are also included in the document tree. That's why there's an :empty pseudo-class to target empty elements.:nth-child(n) Pseudo-class: This pseudo-class allows you to select elements based on their position within a parent.:nth-last-child(n) Pseudo-class: This pseudo-class enables you to select elements by counting from the end.:first-child Pseudo-class: This pseudo-class selects the first element in a parent element or the document.:last-child Pseudo-class: This pseudo-class selects the last element in a parent element or the document.:only-child Pseudo-class: This pseudo-class selects the only element in a parent element or the document.:first-of-type Pseudo-class: This pseudo-class selects the first occurrence of a specific element type within its parent.:last-of-type Pseudo-class: This pseudo-class selects the last occurrence of a specific element type within its parent.:nth-of-type(n) Pseudo-class: This pseudo-class allows you to select a specific element within its parent based on its position among siblings of the same type.:only-of-type Pseudo-class: This pseudo-class selects an element if it's the only one of its type within its parent.:hover, :focus), functional pseudo-classes accept arguments.:is() Pseudo-class: This pseudo-class takes a list of selectors (ex. ol, ul) and selects an element that matches one of the selectors in the list.:where() Pseudo-class: This pseudo-class takes a list of selectors (ex. ol, ul) and selects an element that matches one of the selectors in the list. The difference between :is and :where is that the latter will have a specificity of 0.:has() Pseudo-class: This pseudo-class is often dubbed the "parent" selector because it allows you to style elements who contain child elements specified in the selector list.::before Pseudo-element: This pseudo-element uses the content property to insert cosmetic content like icons just before the element.::after Pseudo-element: This pseudo-element uses the content property to insert cosmetic content like icons just after the element.::first-letter Pseudo-element: This pseudo-element targets the first letter of an element's content, allowing you to style it.::marker Pseudo-element: This pseudo-element lets you select the marker (bullet or numbering) of list items for styling.blue, darkred, lightgreen.rgb() Function: RGB stands for Red, Green, and Blue — the primary colors of light. These three colors are combined in different intensities to create a wide range of colors. The rgb() function allows you to define colors using the RGB color model.rgba() Function: This function adds a fourth value —alpha— that controls the transparency of the color.hsl() Function: HSL stands for Hue, Saturation, and Lightness — three key components that define a color.hsla() Function: This function adds a fourth value — alpha — that controls the opacity of the color.box-shadow Propertybox-shadow property applies one or more shadows around an element.offset-x) and vertical (offset-y) values. Positive offset-x moves the shadow to the right, while negative values move it to the left. Positive offset-y moves the shadow down, while negative values move it up. If a value is 0, you do not need to include a unit.0, which creates sharp edges. The higher the value, the softer the shadow.0.rgb(), rgba(), hsl(), or hsla() functions.inset Keyword: Adding the inset keyword places the shadow inside the element instead of outside.box-shadow: offset-x offset-y blur-radius spread-radius color;
:::interactive_editor
<div class="shadow-box">Shadow Example</div>
<style>
.shadow-box {
width: 200px;
padding: 20px;
margin: 20px;
background-color: lightblue;
text-align: center;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
}
</style>
:::
appearance: none for Inputsappearance: none: Browsers apply default styling to a lot of elements. The appearance: none CSS property gives you complete control over the styling, but comes with some caveats. When building custom styles for input elements, you will need to make sure focus and error indicators are still present.datetime-local and color Propertiesoverflow-x: The x-axis determines horizontal overflow.overflow-y: The y-axis determines vertical overflow.translate() Function: This function is used to move an element from its current position.scale() Function: This function allows you to change the size of an element.display: none or visibility: hidden, rather than simply being visually moved off-screen.padding, border, margin.padding: The padding is the area immediately after the content area. It's the space between the content area and the border of an element.border: The border is the outer edge or outline of an element in the CSS box model. It's the visual boundary of the element.margin: The margin is the space outside the border of an element. It determines the distance between an element and other elements around it.content-box and border-box Property Valuesbox-sizing Property: This property is used to determine how the final width and height are calculated for an HTML element.content-box Value: In the content-box model, the width and height that you set for an element determine the dimensions of the content area but they don't include the padding, border, or margin.border-box Value: With border-box, the width and height of an element include the content area, the padding, and the border, but they don't include the margin.sanitize.css and normalize.css.blur() Function: This function applies a Gaussian blur to the element. The amount is defined in pixels and represents the radius of the blur.brightness() Function: This function adjusts the brightness of the element. A value of 0% will make the element completely black, while values over 100% will increase the brightness.grayscale() Function: This function converts the element to grayscale. The amount is defined as a percentage, where 100% is completely grayscale and 0% leaves the image unchanged.sepia() Function: This function applies a sepia tone to the element. Like grayscale, it uses a percentage value.hue-rotate() Function: This function applies a hue rotation to the element. The value is defined in degrees and represents a rotation around the color circle.flex-direction Propertyflex-direction is row, which places all the flex items on the same row, in the direction of your browser's default language (left to right or right to left).flex-direction: row-reverse;: This reverses the items in the row.flex-direction: column;: This will align the flex items vertically instead of horizontally.flex-direction: column-reverse;: This reverses the order of the flex items vertically.flex-wrap Propertyflex-wrap can take three possible values: nowrap, wrap, and wrap-reverse.flex-wrap: nowrap;: This is the default value. Flex items won't be wrapped onto a new line, even if their width exceed the container's width.flex-wrap: wrap;: This property will wrap the items when they exceed the width of their container.flex-wrap: wrap-reverse;: This property will wrap flex items in reverse order.flex-flow Property: This property is a shorthand property for flex-direction and flex-wrap.justify-content Propertyjustify-content: flex-start;: In this case, the flex items will be aligned to the start of the main axis. This could be horizontal or vertical.justify-content: flex-end;: In this case, the flex items are aligned to the end of the main axis, horizontally or vertically.justify-content: center;: This centers the flex items along the main axis.justify-content: space-between;: This will distribute the elements evenly along the main axis.justify-content: space-around;: This will distribute flex items evenly within the main axis, adding a space before the first item and after the last item.justify-content: space-evenly;: This distributes the items evenly along the main axis.align-items Propertyalign-items: center;: This is used to center the items along the cross axis.align-items: flex-start;: This aligns the items to the start of the cross axis.align-items: stretch;: This is used to stretch the flex items along the cross axis.font-family PropertyDefinition: These fonts are a subset of fonts that are very likely to be installed on a computer or device. When the browser has to render a font, it tries to find the font file on the user's system. But if the font is not found, it will usually fall back to a default system font.
Web Safe Fonts:
@font-face At-rule@font-face: This allows you to define a custom font by specifying the font file, format, and other important properties, like weight and style. For the @font-face at-rule to be valid, you also need to specify the src property. This property contains references to the font resources.collection, embedded-opentype, opentype, svg, truetype, woff, and woff2.woff and woff2: woff stands for "Web Open Font Format." It's a widely used font format developed by Mozilla in collaboration with Type Supply, LettError, and other organizations. The difference between woff and woff2 is the algorithm used to compress the data.tech(): This is used to specify the technology of the font resource. This is optional.link element or @import statement inside your CSS.text-shadow PropertyAccessibility tree is a structure used by assistive technologies, such as screen readers, to interpret and interact with the content on a webpage.
max() FunctionThe max() function returns the largest of a set of comma-separated values:
img {
width: max(250px, 25vw);
}
In the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels (since 250px is greater than 25% of that viewport width). If the viewport width is greater than 1000 pixels, the width of the image will be 25vw. This is because 25vw is equal to 25% of the viewport width.
display: none;: Using display: none; means that screen readers and other assistive technologies won't be able to access this content, as it is not included in the accessibility tree. Therefore, it is important to use this method only when you want to completely remove content from both visual presentation and accessibility.visibility: hidden;: This property and value hides the content visually but keeps it in the document flow, meaning it still occupies space on the page. These elements will also no longer be read by screen readers because they will have been removed from the accessibility tree..sr-only CSS class: This is a common technique used to visually hide content while keeping it accessible to screen readers..sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
scroll-behavior: smooth;: This property and value enables a smooth scrolling behavior.prefers-reduced-motion feature: This is a media feature that can be used to detect the user's animation preference.@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
In the above example, smooth scrolling is enabled if the user doesn't have animation preference set on their device.
aria-hidden attribute: Used to hide an element from people using assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.hidden attribute: This attribute is supported by most modern browsers and hides content both visually and from the accessibility tree. It can be easily toggled with JavaScript.:::interactive_editor
<p aria-hidden>This paragraph is visible for sighted users, but is hidden from assistive technology.</p>
<p hidden>This paragraph is hidden from both sighted users and assistive technology.</p>
:::
placeholder AttributeUsing placeholder text is not great for accessibility. Too often, users confuse the placeholder text with an actual input value - they think there is already a value in the input.
attribute selector allows you to target HTML elements based on their attributes like the href or title attributes.title Attribute: This attribute provides additional information about an element.lang and data-lang Attributelang Attribute: This attribute is used in HTML to specify the language of the content within an element. You might want to style elements differently based on the language they are written in, especially on a multilingual website.data-lang Attribute: Custom data attributes like the data-lang attribute are commonly used to store additional information in elements, such as specifying the language used within a specific section of text.type Attributetype Attribute: When working with ordered lists in HTML, the type attribute allows you to specify the style of numbering used, such as numerical, alphabetical, or Roman numerals.clear property is used to determine if an element needs to be moved below the floated content. When you have multiple floated elements stacked next to each other, there could be issues with overlap and collapsing in the layouts. So a clearfix hack was created to fix this issue.top, left, right and bottom properties to position the element within the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page.position: fixed, it is removed from the normal document flow and placed relative to the viewport, meaning it stays in the same position even when the user scrolls. This is often used for elements like headers or navigation bars that need to remain visible at all times.z-index Propertyz-index property in CSS is used to control the vertical stacking order of positioned elements that overlap on the page.all Media Type: This is suitable for all devices. This is the default if no media type is specified.print Media Types: This is intended for paged material and documents viewed on a screen in print preview mode.screen Media Types: This is intended primarily for screens.aspect-ratio: This describes the ratio between the width and height of the viewport.orientation: This is used to indicate whether the device is in landscape or portrait orientation.resolution: This is used to describe the resolution of the output device in dots per inch (dpi) or dots per centimeter (dpcm).hover: This is used to test whether the primary input mechanism can hover over elements.prefers-color-scheme: This is used to detect if the user has requested a light or dark color theme.and operator is used to combine multiple media features, while not and only can be used to negate or isolate media queries.@property Rule@property rule is a powerful CSS feature that allows developers to define custom properties with greater control over their behavior, including how they animate and their initial values.@property --property-name {
syntax: '<type>';
inherits: true | false;
initial-value: <value>;
}
--property-name: This is the name of the custom property you're defining. Like all custom properties, it must start with two dashes.
syntax: This defines the type of the property, which can be things like <color>, <length>, <number>, <percentage>, or more complex types.inherits: This specifies whether the property should inherit its value from its parent element.initial-value: This sets the default value of the property.var() function, just as you would with standard custom properties.display property to grid.fr (Fractional) Unit: This unit represents a fraction of the space within the grid container. You can use the fr unit to create flexible grids.column-gap property to create gaps between columns. You can use the row-gap property to create gaps between rows. Or you can use the gap shorthand property to create gaps between both rows and columns.repeat() Function: This function is used to repeat sections in the track listing. Instead of writing grid-template-columns: 1fr 1fr 1fr; you can use the repeat() function instead.grid-template-columns or grid-template-rows properties.minmax() Function: This function is used to set the minimum and maximum sizes for a track.grid-auto-flow property controls this behavior, using values like row, column, or dense to influence the placement direction and whether empty gaps are backfilled.grid-column-start and grid-row-start properties. To specify where the item ends on the line, you can use the grid-column-end and grid-row-end properties. You can also choose to use the grid-column or grid-row shorthand properties instead.grid-template-areas: This property is used to provide a name for the items you are going to position on the grid.justify-items and align-items to control how items are aligned within their grid areas. Use justify-self and align-self on individual grid items to override the alignment set on the container.@keyframes Rule: This rule defines the stages and styles of the animation. It specifies what styles the element should have at various points during the animation.animation Property: This is the shorthand property used to apply animations.animation-name: This specifies the name for the @keyframes rule to use.animation-duration: This sets how long the animation should take to complete.animation-timing-function: This defines how the animation progresses over time (such as ease, linear, ease-in-out).animation-delay: This specifies a delay before the animation starts.animation-iteration-count: This sets how many times the animation should repeat.animation-direction: This determines whether the animation should play forwards, backwards, or alternate.animation-fill-mode: This specifies how the element should be styled before and after the animation.animation-play-state: This allows you to pause and resume the animation.prefers-reduced-motion Media Queryprefers-reduced-motion Media Query: One of the primary accessibility concerns with animations is that they can cause discomfort or even physical harm to some users. People with vestibular disorders or motion sensitivity may experience dizziness, nausea, or headaches when exposed to certain types of movement on screen. The prefers-reduced-motion media query allows web developers to detect if the user has requested minimal animations or motion effects at the system level.Review the CSS topics and concepts.