WordPress CSS Stylesheet & WordPress Style.css File
Style.css is one of the essential files for a new WordPress theme. The style.css file in every WordPress theme contains the CSS codes required for the pages.
Style.css File Location
Style.css must be located in the root directory of the WordPress theme.
Adding Custom WordPress CSS File to Pages
In order for the WordPress style CSS file to be pulled from the theme’s pages, it must be added to the pages via functions.php.
wp_enqueue_style( 'style', get_stylesheet_uri() );
When header.php is added to the pages, style.css is also added to these pages.
Style.css Structure
While creating the WordPress style file, information about the theme is given in the comment field at the beginning of the file. This structure is generally used when preparing a theme for the WordPress theme market. We don’t need to add all these elements when making a personal WordPress theme.
Example WordPress style.css file:
/*
Theme Name: Twenty Twenty
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty
This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others.
*/Descriptions of Style.css Elements
Theme Name (*): Theme name.
Theme URI: The URL of the page where the theme is located so users can learn more about the theme.
Author (*): The name of the person or institution making the theme.
Author URI: The URL of the page of the person or organization that created the theme.
Description (*): A brief description of the theme.
Tags: Theme tags to help users find the theme using tag filters. (Link for theme tags: https://make.wordpress.org/themes/handbook/review/required/theme-tags/)
Version (*): The version of the theme specified in X.X or X.X.X format. (1.2.4 or 1.2 as an example).
Requires at least (*): The oldest WordPress version supported by the WordPress theme created in X.X format. The created theme should work with the latest three versions of WordPress.
Tested up to (*): The latest version testing the theme in X.X format.
Requires PHP (*): The oldest PHP version supported by the theme in X.X format. (7.2 as an example).
License (*): License of the theme.
License URI (*): The URL of the theme license.
Text Domain (*): A unique specific domain addition for the theme.
Note: When “Version” is specified in this file, the WordPress theme market determines if there is a new available version of the theme.
Source:
https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/