Deep dive into styles – Robert Ivens
Robert Ivens takes us back to the CSS fundamentals (even some HTML)
HTML Elements and Attributes
- HTML has 118 defined elements, but only about 20-25 are commonly used.
- HTML elements have meaning and default styling in browsers, such as headings, paragraphs, lists, images, and structural elements.
- Attributes can be applied to HTML elements, including global attributes like ID, class, direction, and data attributes.
- Specific attributes include href, rel, and type.
- ARIA attributes are used for accessibility, such as aria-label.
CSS Fundamentals
- CSS uses inheritance, where child elements inherit styles from parent elements unless specified otherwise.
- The cascade in CSS determines which styles are applied when multiple styles are defined for the same element.
- The browser's inspector tool can help identify which styles are being applied and overridden.
- Specificity in CSS determines which styles are applied to an element.
- The order of selectors in a stylesheet matters, with more specific selectors overriding less specific ones.
CSS Box Model and Units
- The box model in CSS consists of the content, padding, border, and margin of an element.
- The
box-sizing
property can be set toborder-box
to ensure that the width of an element includes the padding and border.
- CSS has various units for specifying lengths, including absolute lengths (e.g., centimeters, inches, pixels) and relative lengths (e.g.,
em
,rem
,%
).
CSS Selectors
- CSS classes and IDs cannot start with a number.
- A descendant selector (e.g.,
p .my-class
) selects elements that are descendants of a specific parent element.
- Descendant selectors provide more specificity to styles by targeting elements within a specific parent element.
- Pseudo-classes are used to define special states of an element, such as when it is hovered over or visited.
- The
is()
pseudo-class allows you to target elements that match a specific selector without adding extra specificity.
- The
has()
pseudo-class allows you to target the parent of an element that matches a specific selector.
- Pseudo-elements are used to style specific parts of an element, such as the first line or first letter.
CSS Functions and Media Queries
- CSS functions can be used to perform calculations and manipulate values in your styles.
- Media queries allow you to apply CSS only when the browser or device environment matches a specific rule, such as a certain screen size or print mode.
CSS Layouts and Animations
- Grid and flexbox are responsive layout techniques that don't necessarily require media queries to adapt to different screen sizes.
- CSS animations can be used to create advanced visual effects and transitions.
- CSS can be used to create animations and graphics without JavaScript.
Examples of CSS Animations and Graphics
- There are many examples of CSS animations and graphics available online, such as a 3D phone, a MacBook Air with animations, sliders, and an interactive solar system explorer.
Kevin Powell's YouTube Channel
- Kevin Powell is a YouTuber who creates instructive videos about HTML and CSS, including videos on CSS animations and graphics.
- Kevin Powell's videos are easy to follow and he provides live coding demonstrations.
- Kevin Powell has been creating videos for over five years and has a wide range of videos for beginners and experienced users.