JavaFX Java GUI Tutorial - 26 - CSS Inline Styles and Selectors Video Lecture | JavaFX Java GUI: Learn to build Powerful Applications - Front-End Programming

alright guys so our program is looking a
lot better we got our font size and our
background setup however whenever we
change the background dark gray these
labels since they're black they are now
incredibly harder to read so we want to
change these to white or some kind of
brighter color so I'll show you guys a
couple different techniques on how you
can do that the first technique is using
inline styles now whenever you use the
inline style what you can do is you can
take a style and apply it to a single
element or a single item on your page so
say that you only wanted to change the
text font or the text color of this name
label right here well what you could do
is you can get name label set style and
this is only going to apply this style
to this name label and nothing else so
inside here you can just write something
like FX text fill this is your text
color and you can either just give it a
name and they have a couple names that
you can choose from so you obviously see
what that does or you can give a hex
color like before and let's pick dat
88888 and there you go alright - looking
good but you know what I actually want
to apply this to every single label so
what we can do is we can copy this and
set it for every label in our program or
there's actually an easier way so I'm
actually going to copy this because I'm
gonna use it in just a second and check
it out so anytime we want to apply a
style to every single label we can hop
back over in Viper dot CSS and we oh
what I was I get all right my bad guys I
had a kennel cough attack right there
alright so what we can actually do is we
can call dot label and this is going to
apply whatever style we write in here to
every
a single label so anytime you want to
select the element it's essentially just
the name of the element right here the
name of the class but it's lowercase so
just remember that that's kind of the
naming convention and then we can paste
our style right in there so if I run
this
holy-moly oh you know what mother some
book all right got a little click happy
there and check it out now every single
label in our program is now 888 and you
can do the same thing say you wanted to
UM you know change the buttons show you
guys a really cool way that you can work
with buttons boom alright so you can
call FX say we want to change the
background color and I don't know like
maybe the roundness of the corner so FX
background color and you can just stick
a solid color in here let's say you
wanted to make your background a B 4642
a B 4642 so you could do that and that's
going to give it a red background you
guys already know what that's going to
look like or I'll show you guys this
anytime you want to have a gradient you
can actually call linear gradient and
this is gonna give you know the gradient
effect
it looks like it's fading from one color
to another color so let's pick two
colors let's pick on DC 9656 DC 9656 and
we'll say that that is fading into a b
4642 ub 4642 so now we can run this and
see how it looks alright not horrible
but actually prefer just a solid or red
background and also I want to bump my
font size back down I think that looks
kind of goofy so I'm going to change
this and also get rid of this gradient
you just add that solid color and I also
like to capitalize everything keep it
kind of consistent so now we just have a
solid red background and since we have
red it's probably a good idea to FX text
fill and I'll use that yi8 she let me
make this just white so F so six FS is
just all white and also let me show you
guys how to change the roundness or the
border radius of your bun so FX
background radius you can just set to
let's say six so this is going to round
it by six pixels the higher the number
the more rounded your button is going to
be so there you go
looking good and I actually think that I
don't know that rounding this is pretty
good probably want to bump it down I
don't know maybe a four