Design (Figma)
The !important rule in CSS is used to give a CSS property higher priority than other rules.
It overrides any other declarations, even if they have higher specificity.
Example:
p {
color: blue !important;
}
In this example, the paragraph text will always be blue, regardless of other CSS rules.
CSS positioning allows you to control the layout of elements on a webpage. The main position values are:
relative until it reaches a specified scroll position, then it becomes fixed.Pseudo-elements: are used to style specific parts of an element.
They are prefixed with two colons (::). Example: ::before, ::after.
::before - Inserts content before the content of an element.::after - Inserts content after the content of an element.::first-letter - Styles the first letter of an element.::first-line - Styles the first line of an element.::selection - Styles the portion of an element that is selected by the user.Pseudo-classes: are used to define a special state of an element. They are prefixed with a colon (:).
:active - Applies when an element is being activated (e.g., clicked).:visited - Applies to links that have been visited by the user.:hover - Applies when the user hovers over an element.:checked - Applies to radio buttons or checkboxes that are checked.:disabled - Applies to elements that are disabled.:enabled - Applies to elements that are enabled.:focus - Applies when an element has focus (e.g., when a user clicks on an input field or navigates to it using the keyboard).:read-only - Applies to elements that are read-only.:empty - Applies to elements that have no children (including text nodes).:not(selector) - Applies to elements that do not match the specified selector.Example: :not(.active) - Applies to all elements that do not have the class "active".:first-child - Applies to the first child of a parent element.:first-of-type - Applies to the first element of its type among a group of sibling elements.:last-child - Applies to the last child of a parent element.:last-of-type - Applies to the last element of its type among a group of sibling elements.:nth-child() - Applies to elements based on their position in a parent element.:nth-of-type() - Applies to elements based on their type and position in a parent element.:nth-child() and :nth-of-type() pseudo-classes accept a formula as an argument, such as 2n (for even elements) or 2n+1 (for odd elements).Site responsiveness refers to the ability of a website to adapt its layout and design to different screen sizes and devices.
Example of a media query:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
In this example, the background color of the body will change to light blue when the viewport width is 600 pixels or less, making the site more user-friendly on smaller devices.
This project applies responsive design in practice by splitting the layout across dedicated desktop, small-screen, and mobile stylesheets.
Open Project 03
The calc() function in CSS allows you to perform calculations to determine CSS property values.
It can be used with various units, such as pixels (px), percentages (%), ems (em), and more.
Example:
.container {
width: calc(100% - 50px);
}
In this example, the width of the container will be 100% of its parent element's width minus 50 pixels, allowing for dynamic sizing based on the available space.
