CSS 101 - Getting started with CSS and understanding how CSS works

[videogame95]

@j-e-f-f said in CSS 101 - Getting started with CSS and understanding how CSS works:

< span style=“background-color: red” class=“text-color-blue”>

Hi do I have to specify what element like calendar I am changing it in the begging do i have to name of the one i am using ? as I’ve tried changing my calendar border - black
and the text white not sure how to get it to go around the text border around my calendar I’ve tried to change it in the calendar css and on the custom css but nothing changed.

please show me how I should wright this code out .
and where I should change it css custom or css calendar or both ?
any help please
thank for help

[sdetweil]

@videogame95 only ever change custom.css

never change any file we ship or any module ships, as it will break update for any of those

so, in a css entry the stuff before the { is called the css selector clause, as it ‘selects’ the elements the info between the {} will apply to

in MagicMirror each module has a container element that uses is name in the class= attribute, so you can select stuff in the calendar module by using its classname

.calendar

I use this to help me remember all the stuff that can go in a selector clause
https://www.w3schools.com/cssref/css_selectors.php

you can use the developers window, elements tab to see and test changes on any element in the active browser window

see here for using the developer window
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1683502518638

[videogame95]

@sdetweil Hi I’ve add to the custom css
.MMM-Googlecalendar ,
But nothing is changing I just need to add
A border around my text .
}
border around the text

border-color:#000, = block
Border-size-width : 20px
Borde-size-hight: 20px
},

[sdetweil]

@videogame95 css is case sensitive like everything else

be careful on the selector clause, just module name applies to everything

[Chazzer]

@sdetweil Thanks for the initial tips here.

[Chazzer]

Great infos and good tips. Thank you 🙏