How to create a new css file in webstorm

To create a new CSS file in WebStorm: Open the project structure, right-click "New" > "CSS File" in the target folder. Enter the file name, select the preset template, encoding, whether to include the file title, and click "Create".

How to create a new CSS file in WebStorm

Steps to create a new CSS file:

1. Open WebStorm and create a new project or open an existing project.
2. Navigate in the project structure to the folder where you want to create the CSS file.
3. Right-click the folder and select New >CSS File.
4. Enter a name for the new CSS file.
5. Click "Create".

Advanced options:

• Select a preset template: WebStorm provides a variety of preset CSS templates , such as resetting a style sheet or grid layout. You can select the template you need from the Template drop-down list.
• Set encoding: Make sure to select the correct encoding, such as UTF-8 or UTF-16.
• Add file title: The included file title will appear at the beginning of the CSS file. You can choose whether to include it or not.

The newly created CSS file will look like this:

<code class="css">/*
 * CSS Reset
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Fix margins for blockquote elements in IE 11+ */
blockquote {
  margin: 0;
}

/* Normalize line height for headings 1 to 6 in Chrome, Firefox, and Safari */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}</code>

You can now start writing styles in the CSS file.

The above is the detailed content of How to create a new css file in webstorm. For more information, please follow other related articles on the PHP Chinese website!