Sometimes people ask me where to put CSS rules in AppGini projects. On this page I describe the options and tell you how I usually do it.
Option 1: hooks/header-extras.php
One way is to insert the CSS code in the already existing hooks/header-extras.php file. Since this is a .php file (not a .css file), however, we have to tell the browser that the inserted code is style information. We do this via the <style>-tag:
<!-- file: hooks/header-extras.php ?>
<style>
/* your CSS styles here */
</style>
<?php
// PHP code, if any
?>
Option 2: hooks/header-extras.css
For larger projects, I got used to writing my CSS specifications in a separate .css file. In addition to the additional .css file that has to be available on the server, I then have to make sure that it is also included. I include it in hooks/header-extras.php
Change in hooks/header-extras.php
<!-- file: hooks/header-extras.php --> <link rel="stylesheet" href="<?=PREPEND_PATH?>hooks/header-extras.css" />
New file: hooks/header-extras.css
/* file: hooks/header-extras.css */ /* your CSS styles here */
Note: When including the .css file using the <link>-tag you have defined that this is a stylesheet. The browser then interprets the file-content as style information. You therefore do not have to embed the style information in a <style>-tag here.
Caution: Your browser will cache the CSS file in the local cache unless you have configured it differently. After making changes in included/linked/referenced .css files (and also in javascript files), when reloading the page, you must ensure that the files are newly fetched from the server and not loaded from the cache.