CSS
-
background-image
: background-image: url('relative or absolute url path'); -
@import vs <link>
:
-
@import
- It is CSS mechanism to include a style sheet. You can use it when you want to hide styles from older browsers, because@import
can't be recognized by them. You can use it when you want to import style sheets into linked style sheets, in other words, you can use it in the css files that you linked in HTML file. -
<link>
- It is the HTML mechanism.<link>
is often more preferred over@import
. It provides many useful attributes like rel, you can use rel to choose alternate stylesheet, rel="alternate stylesheet"
box-sizing
-
content-box
: This gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px. width&height = content -
border-box
: It tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. width&height = border + padding + content So when we write css, we often set all elements box-sizing property to be border-box to avoid strange behaviors.
* {
box-sizing: border-box;
}
Flexbox
: It is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit into smaller spaces. Setdisplay: flex
property and value to the container element then it will act as a flexbox. The elements inside the container(flexbox) are called flexbox items.align-items: center & justify-content: center
:
-
align-items
: It defines how flexbox items are aligned according to the cross axis.-
align-items: center
: Set it to the containter element then the flexbox items are aligned at the center of the cross axis. By default, the cross axis is vertical. This means the flexbox items will be centered vertically.
-
-
justify-content
: It defines how flexbox items are aligned according to the main axis.-
justify-content: center
: Set it to the container element then the flexbox items are aligned at the center of the main axis.
-
vh & vw
: Both of them are relative css units.vh
means relative to 1% of the height of the viewport,vw
means relative to 1% of the width of the viewport. Viewport = the browser window size. If the viewport is 50cm wide, 1vw = (1% * 50) cm = 0.5cm.overflow
: It defines how overflowing content on both horizontal and vertical axis is displayed.
overflow: visible
: The overflowing content is visible, while the element itself stays at the specified height.overflow: hidden
: The overflowing content is hidden and can not be accessed.overflow: scroll
: The overflowing content is accessible thanks to a vertical scrollbar.overflow: auto
: The browser decides whether to display a vertical scrollbar or not.
background-size: cover
: The keywordcover
will resize the background image to make sure the element is fully covered.border-radius
: It defines the radius of the element's corners.cursor: pointer
: It sets the mouse cursor to pointer when hovering the element.transition
: Shorthand property fortransition-property
transition-duration
transition-timing-function
andtransition-delay
. Only transition-duration is required.-
@media
: The@media
rule is used in media queries to apply different styles for different media types/devices. For example,
@media (max-width: 480px) { .container { width: 100vw; } .panel: nth-of-type(4), .panel: nth-of-type(5) { display: none; } }
JavaScript
-
Document.querySelectorAll()
: TheDocument
methodquerySelectorAll()
returns a staticNodeList
representing a list of the document's elements that match the specified group of selectors. For example,
const panels = document.querySelectorAll(".panel");
Array.prototype.forEach()
: TheforEach()
method executes a provided function once for each array element. Syntax: forEach((element) => {function})EventTarget.addEventListener()
: TheaddEventListener()
method of theEventTarget
interface sets up a function that will be called whenever the specified event is delivered to the target.Element.classList
: TheElement.classList
is a read-only property that returns a liveDOMTokenList
collection of theclass
attributes of the element. This can then be used to manipulate the class list.DOMTokenList
: TheDOMTokenList
interface represents a set of space-separated tokens. Such a set is returned byElement.classList
and many others.DOMTokenList.add()
: Theadd()
method of theDOMTokenList
interface adds the given tokens to the list, omitting any that are already present.DOMTokenList.remove()
: Theremove()
method of theDOMTokenList
interface removes the specified tokens from the list.
Code in: Github
Top comments (0)