CSS in OutSystems
CSS Basics, Part 1
This lesson is part of the CSS in OutSystems course.

Welcome to the CSS workshop
this workshop is essentially introductory but even if you have been using CSS for
it can still be useful
most people think that CSS is like a mystical art
that nobody truly understands sometimes it works
sometimes it doesn't
people usually are afraid of CSS and try to understand it
as little as possible and hack it instead of building with it
browser bugs and incompatibilities do not help here
but the fact that people don't even try to read
and understand the specifications helps even less
so typically this is how our CSS
looks at the end
so our agenda for this workshop will be this one
we'll start with the CSS basics
then we are going to understand what is the inspector
after that we're going to understand how we can bring HTML
other elements it to the platform
followed by the box model and box placement
vertical alignment browser compatibility CSS best practices
grids and media queries so let's start our agenda
CSS basics the web applications are composed by three
elements structure presentation and behavior
these three elements is what allow us to create web applications as we know
probably understood immediately HTML
is what defines the structure while CSS defines a presentation
and JavaScript the behavior so
what does CSS stand for CSS stands for
cascading style sheets but
why cascading style sheets are set up so that you can have multiple properties
all affecting the same element some of those properties may conflict
with one another for example you might set the font color of a link
to red on one part and then later on set the color of that
link to blue, how does the browser know which one to apply
first of all we're going to see that there are three different types of Style
there is the author Style Sheets which is actually it the Style Sheet we create
when we are doing our project
so imagine this example we are defining that the links are going to be red
then there is the
user style sheet one of the interesting things that
the browsers allow you to do and that the CSS allows you to do
is that the user can on its own computer define
hold the site should look and what was going to happen is that
the browser will apply the the style
over this one, meaning the user can define
in this case that the links are going to be grey
additionally and something that you probably have already used but it's not
good practice to use
is actually the important - the important
actually allow us to override
whatever the user asked or
requested to change so in this case we are
really saying that no, the links are going to be purple
so the user even if he mentions that
the link is going to be grey or even if we initially mentioned that the link is going
to be red
it doesn't matter because it's important
for the links to be purple
additionally there is also the user-agent Style Sheet
so the user agent style sheets is
the style sheet that all of the browsers have
by default. So imagine if you create an empty
HTML file and if you put there
the tag h1 meaning heading 1
and put there some text, if
you open it in the browser you're going to see that the heading has a style
that style is coming from the browser so the browser has a
setup of initial styles so it's all about
what rule to apply to a certain element but
why CSS? why should we use CSS
at all
first of all it's a clear separation between what is
presentation and what is content. CSS
is nothing less nothing more that the set of rules telling the browser how to
display the elements
it allows us to the something very interesting
which is allow us to share the same style sheet
across several documents and by documents I mean
by several web pages and
and this of course allows us to create something that we already know
which is the skin of our sites, the theme
that we use in the platform. So we have one application
and we can just go there if things are correctly done
we can just go there and change the theme
from Chicago to London or to Las Vegas for example
and application will have the new look and feel
of that theme
for the browser to know to which element that style should
be applied we have this selector.
which is the first part. The selector indicates that
the following style is going to be applied
to this element or to this group of
elements, so let's see what type of selectors do we have
We have selectors by tag, meaning that we are
picking HTML tags for example
in this example we are selecting all DIVs
so in the example below what would we be selecting?
we would be selecting the DIV then
we have selectors by class, meaning that we are going to
select every element and we don't care about which tag
that element is, we're going to apply
this to every element that has the class
main content in this example and once again
in this example we are going to select the DIV
then we can have selectors
by ID, meaning that had no IDs don't repeat
in a web page, the ID is unique
so this means that a certain style will apply
to that specific example examples that are useful,
that is very common for you to find, is styles that are affecting
the menu of the application, and in most applications we only have one menu
and the style will be in the style sheet and will have the ID
we'll see later on how we can do this in the platform or
how we should avoid this. Then of
course in this example we would select the DIV once again
then we have selectors by pseudo class
and in this example we have several
pseudo classes, like first child, last child
and here we have hover.
what is it going to be selected with this
pseudo class?
so imagine that we apply this pseudo class to the DIV
this means that when the user does
a mouse over our DIV those styles
the styles that were created for the hover
are going to be applied to that element
additionally you can have selectors by at attribute
in which we actually selected a given element depending on
given attribute, so HTML attributes, this is useful for example for using to
the disabled
in this case we are actually selecting the input
but we can even create our own
attributes, like in the platform we can just go to the extended
create a specific attribute and use it in the CSS
okay finally we can also
create selectors by type. And here, by type, we can
mention that we are going to select everything
that has the attribute type
and that the attribute has the value checkbox. In this example would be
exactly the same
thing. so more about selectors: when we are using
so that's a slick any example for example you we are using
first child last child but not to state first of all
we have here you symbol and we have here space
a good man Monica regarding do
CSS is the following when it does have a space
or symbol we are going to do next element
and we are going to start to read from their so imagine this case
so we are seeing here main content space and simple
okay we having to start from these soul hallways dat we can reduce
night and this is my aim at birth cert way or the easiest
there with the way that I think that it's the easiest to do it
so we start by the end we are going to select
the first child that is a direct descendant
and the symbol acs. actually mean direct descendant
all an element
that has the class content so in the example below what is that we're going
to select
we're going to select
the input type checkbox. Why? Because it's the first
direct child
of the element main content
and how about second one? try to read it yourself
so this can be read like the following:
I'm going to select the last child
that is a direct descendant of an element that has a class
main content, and in our example
we would be selecting this DIV
selectors can be also by parent
as we have already seen, so in this example
once again we have space
or a symbol, so we start by the end
so we are going to select
all inputs that are
of the type text that are direct descendants
of an element that has a class main content
so looking at our example which one are we going to select?
this one or this one?
if you answered this one,
you are right: we're going to select
this element. How about this one?
once again we have space, we don't have a symbol, so we start by the end
I'm going to select all inputs
that are direct
and indirect, so I'm going to set all inputs
that are inside an element that has the class
main content, so in our example how does it translate
to this: we're going to select every
input. How about this
selector, what is it that we are going to select?
we have here a new symbol
and this symbol can be read like
is immediately preceded by, so
it has a symbol, so first of all it has a space
then it has a symol, so we start by the end so I'm going to select
all inputs that are immediately preceded by any
input that is inside an element that has the class
main content. So in our example
we would be selecting this one
this input. Why? Because first of all it is and input
then its perceded by another input
check HERE, and it's inside an element that has the class main content
want more selectors?
there's a bunch of them and be sure at
people that are used to work with CSS and depending, for example,
in what is the browser specifications they are working on
people will tend to use all of these
so get to know them and get to, at least
know that they exist.