CSS Tool for Work - PHPStorm

PHPStorm is a powerful development tool used by professional developers to create and edit websites, including CSS files. It allows you to organize and edit code quickly with numerous features that make the work easier. How to work with PHPStorm when editing CSS:

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>how to work with css in phpstorm</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            padding: 30px;
            height: 100%;
            width: 100%;
        }

        h1 {
            text-align: center;
            color: green;
            border: 2px solid red;
            border-radius: 5px;
            margin-bottom: 0;
            padding: 10px;
            font-family: "Bookman Old Style", sans-serif;
        }

        p {
            font-size: 20px;
            font-family: "Segoe UI Semibold", sans-serif;
        }

        img {
            width: 100%;
            height: auto;
        }

        h3 {
            font-family: "Trebuchet MS", sans-serif;
            color: red;
        }
    </style>
</head>
<body>
<h1>How to write your own website</h1>
<p>Welcome to the CSS tutorial, where we are at the beginning of writing styles for a website. Since we have covered the 
<a href="html.php">HTML</a> tutorial, we are now in the CSS tutorial and warmly welcome you. The first style (external) 
will be written right in a text editor.</p>

<img src="/demo/demo.png" alt="How to write your website">

<p>Lorem Ipsum is a dummy text used in typography development and print preparation. Lorem Ipsum has been in use for 
    over five centuries since an unknown printer combined characters into a sample book back in the early 16th century. 
    This text not only survived five centuries but has also successfully established itself in electronic desktop 
publishing with minor changes. Lorem Ipsum gained popularity in the 1970s when Letraset sheets with Lorem Ipsum 
paragraphs were released. Recently, Lorem Ipsum has also become popular in applications for desktop publishing such as 
Aldus PageMaker.</p>

<h3>Why do we use it?</h3>
<p>It has been proven that meaningful content during the review of a particular page's design solution unintentionally 
distracts the reader's attention. Lorem Ipsum, with its relatively uniform character distribution, successfully replaces 
temporary content-relevant text. Many desktop publishing programs and website editors use Lorem Ipsum as the default 
dummy text. Therefore, searching the web with the keywords "lorem ipsum" returns numerous unfinished websites. Over the 
years, various versions of this dummy text have been created, either accidentally or intentionally, with different 
humorous and other additions.</p>
</body>
</html>

RESULT

Creating a new CSS file
1. First, open PHPStorm and create a new project or open an existing one where you will be working on your website.
2. On the left side in Project View (file structure view), right-click, select New → Stylesheet (CSS), and name the file, for example, style.css. PHPStorm will automatically generate an empty CSS file.
Writing and editing CSS code
1. When you open the file style.css, you can start writing CSS rules. For example:
2. PHPStorm allows autocomplete, which suggests CSS properties and values while you type. This saves time and reduces the chance of errors.
Preview and linking with HTML files
1. Link the file style.css with an HTML file by using the <link> tag in the <head> section of the HTML document, for example:
2. Once you save changes in the HTML and CSS files, PHPStorm allows you to quickly preview them in a browser. Right-click on the HTML file and select Open in Browser.
Advantages of using PHPStorm for CSS
1. Color preview: If you use colors in CSS, like #ff0000 or rgb(255, 0, 0), PHPStorm automatically displays a small color icon next to them so you can see the actual color.
2. Automatic syntax checking: PHPStorm checks the CSS code for errors and immediately highlights them, for example, if you forget a brace {} or a semicolon ;.
3. Using templates: There are many design templates (Boilerplates) available that allow you to quickly start writing CSS or insert frequently used code patterns.
Saving and managing the project
1. You can save all changes using the Ctrl + S shortcut (Windows) or Cmd + S (Mac). PHPStorm also allows you to track project changes if you are using a version control system like Git.
Customizing the editor
1. If you prefer, you can customize the color scheme of the editor in PHPStorm to make working with CSS more eye-friendly. Change this in the settings under File → Settings → Editor → Color Scheme → CSS.

PHPStorm is an exceptionally versatile tool that simplifies working with CSS and enables faster and more accurate code writing. If you are looking for a professional way to develop websites, PHPStorm is one of the best choices.