CSS

CSS adds style and visual design to HTML, allowing developers to create beautiful and responsive websites with ease

Properties
Styling Text

Add SCSS support to your NPM project

To add SCSS support to your NPM project, you can follow these steps:

Install the node-sass package using npm:

npm install node-sass --save-dev

Create an SCSS file in your project directory, for example styles.scss.

In your project's package.json file, add the following lines to the "scripts" section:

"scripts": {
   "scss": "node-sass --watch styles.scss styles.css"
},

This sets up a script called scss that watches for changes to your styles.scss file and compiles it to styles.css.

Run the script by entering the following command in your terminal:

npm run scss

This will start the node-sass watcher and compile your SCSS file to CSS whenever changes are made.

Link the generated CSS file in your HTML or other project files.

<link rel="stylesheet" href="styles.css">

With these steps, you should now have SCSS support in your NPM project.

Vertically align text in div

How do I vertically align text in a div?

The best choice for vertically aligning a text in a div is to use the display: flex property on the parent div. Doing that, you can then use the align-items: center attribute to the same element. That way everything inside that div will come to center on the vertical axis. 

You can also use the justify-content: center attribute in order to align the div on the horizontal axis. Keep in mind that justify-content: center is not equivalent  to text-align: center. The first aligns the hole div when the second aligns the text inside it.


 

Prevent break column within a ul/ol element using CSS columns

Prevent column breaking when we use CSS columns attribute

When we use CSS columns: n on a ul or ol element sometimes we need to prevent splitting an element between two columns.

For example we want the second title below to be above it's items on the second column

Title
Item1
Item2
Item3
Title		Item1
Item2
Item3
Title
Item1

After applying the break-inside: avoid-column CSS rule the result will be like this:

Title
Item1
Item2
Item3

 		Title
Item1
Item2
Item3
Title
Item1

CSS attribute: break-inside
Available values: auto | avoid | avoid-page | avoid-column | avoid-region
Initial: auto

Box shadow

Drop a shadow to your HTML elements using box-shadow property

You can specify a single box-shadow using the following options:

  • box-shadow can accept two, three, or four values.
    • If only two values are given, they are interpreted as OFFSET-X and OFFSET-Y values defining the distance of the box-shadow from the element. You can specify negative values.
    • If a 3rd value is given, it is interpreted as a BLUR-RADIUS and adds the blurring effect to the shadow.
    • If a 4th value is given, it is interpreted as a SPREAD-RADIUS.
  • Optionally, the inset keyword.
  • Optionally, a COLOR value.

To specify multiple shadows, provide a comma-separated list of shadows.


 

Line-clamp CSS: Text overflow max lines with CSS line-clamp

line-champ is a CSS attribute for controlling how many lines of text will be visible in your paragraph

When combined with the display attribute, the line-champ CSS property (first check browser compatibility: https://caniuse.com/?search=line-clamp) will confine text to a specified number of lines: -webkit-box or -webkit-inline-box. It will end with an ellipsis when text-overflow: ellipsis is included. The -webkit-box-orient property must be set to vertical.

Note: Don't forget to add max-height and overflow: hidden to your div so that the rest of the text (after the ellipsis) doesn't show up.

Can accept either a number specifying the visible columns or none.