JavaFX Java GUI Tutorial - 27 - CSS Custom Style Classes and Selectors Video Lecture | JavaFX Java GUI: Learn to build Powerful Applications - Front-End Programming

all right so now let me show you how to
make your own custom style classes and
also how to use IDs so we already know
that anytime you want to style all the
labels then you can just use the label
class anytime you want to style all the
buttons then you can just use the button
class and again the naming convention is
just whatever the name of the class is
and see if I could find a button so it's
pretty much the name of the class such
as button or label and then you just
lowercase it alright that's great and
I'll but we want to make our own custom
ones for example let's say that I wanted
to make an own custom style for a blue
button so I'm going to copy all the ones
from button because I don't feel like
typing it over again so you can actually
just say button and give your own name
blue so pretty much just like making
anything like CSS for a website you can
pretty much do in JavaFX
now it's actually probably going to do
if we get a blue color 7c AFC 2 7c AFC -
all right so this is going to give
whatever class button blue a cool blue
background so what we can do here is let
me add one more button to the screen
I'll say um so we have a login button
and if the user doesn't have an account
then they can just sign up and I'll just
like that I'm not lazy so button signup
button equals new buy in sign up
so grip pain second strengths so for the
Simon behind the position of this is one
three and that'll put it right under the
login button and of course we need to
add it to the screen so check it out
alright so right now I just made a plain
button and add it to the screen so of
course it's going to inherit all the
properties from the generic button class
however if I want to use my cool new
blue or excuse me button blue class then
what I can do is this for the signup
button I can get style class and then I
can add button blue to it so again this
is still going to inherit all the
properties from the buttons before but
it's going to be overridden with our
button blue so hopefully what we can see
is we get a cool looking blue button and
of course I would usually want to do
something like you know make the text a
little bit easier to read on that but
you guys understand the concept so that
is how you use your own custom style
classes in addition to the built-in ones
that are given to you by default and the
last thing I want to show you guys is
how to work with IDs because if you guys
ever use CSS you probably are going to
want to learn how to do that and just
like before I don't want to say before
maybe you never even use CSS but anytime
you want to add an ID use the pound sign
I think it's called the pound sign the
hash the number the tag whatever it's
called and you can just name your ID
anything you want so say that I wanted
to apply an ID to certain labels to bold
them I don't know maybe for some reason
this username labor label I want to be
bold
why have no idea but I'm doing it
anyways so I'll just call it something
like bold label and anytime you want to
bold something it's actually font
weights
and you can just set equal to a
numerical value or bold and you know
just keep a real simple art so now we
have this ID of bold label now we just
have to apply it to this name label so
name label set ID and I believe was
called bold measure bold label so now we
stuck this bold label ID on this name
label so whenever it's trying to style
it's going to say okay what do you want
me to do hop over this bold label
obviously be bolded or be bold all right
now check it out
you see how password is normal well this
bold label is now bold that might be a
little bit hard to see on your screen
but I assure you it is indeed bold and
now they understand the core basics of
working with CSS and Java FX the next
thing you probably want to do is start
learning about all of these different
properties the background color text
fill radius whatever but of course would
be kind of boring if I just sat here and
talk to you and when you can just look
online real quick and you know kind of
understand them all so there you go
hopefully you guys enjoyed this tutorial
if not well don't know what to tell you
but yeah thanks for watching and I'll
see you later