Hi, I’m unable to add new css either to the existing assets/css/index.css or a new css file in assets/css.
I’ve tried adding
p {border: red;} to the end of index.css or putting it in a new css file and adding
<?= css('assets/css/new.css') ?>
to header.php
just realized that should be p {border: solid 2px red; }
So ignore this post -
David
The reason why this doesn’t work is because your CSS is not quite correct, try:
p {
border: 1px solid red;
}
Thanks Sonja - once the css was correct all worked ok
If you use your developer tools, you would see if a style is applied or not or if there is just something wrong with your syntax. I can only highly recommend you get familiar with using these tools if you are not yet.
For example, in this screenshot you can see on the right that the highlighted p element in fact has the style applied:
But without the color and style of the border, it doesn’t have any effect.
Thanks for this, yes I do use F12, but have difficulty seeing all the styles that have been applied to an element, also when some styles appear crossed out - like your example - I understand they’re not applied, but don’t understand why - have they been over-ridden somewhere else?
Yes, the ones that are crossed out are overwritten by other styles, e.g. in the example above, the margin applied to all elements (*) is overwritten by the styles applied the p (and h1 etc.) elements. That is why it’s called CSS (Cascading Style Sheet)
But if you are not familiar with HTML and CSS basics, which are really required if you want to work with Kirby or any CMS or creating websites in general, I can suggest some tutorials or you google them (there are loads out there), as we cannot give support here for these basic skills. I hope you understand.
These things all work the same, no matter if you apply them to a Kirby template or to a basic index.html file in a static website.
