Hi there! Welcome to OSU Drupal Droplets! This is Joe Fenn with Oregon State
University's Web and Mobile Services.
Today we're going to continue our
exploration of the CKEditor
by taking a look at heading styles and
paragraph styles. With no further
hesitation here, let's go ahead and click
on our Edit tab to get into our test
page. What we're focusing on here is
actually this drop-down, so notice when
we click on it it's called the paragraph
format. The default paragraph format that
we'll use is Normal. This is just a basic
paragraph style. We also have a Normal
Div, we have formatted text and we
have Address. Formatted is when you want
to keep a particular formatting style.
Commonly this would be used maybe with code. Maybe you want to show the
structure of a code and not execute the code. Formatted would be good for that. One
thing it does do is it doesn't break. So
if you happen to have a really long line
of text that long line of text will
extend beyond the boundaries of your
text editor on the screen so it renders
weird.
Address is actually used to contain
contact information about a site or a
page. That's an HTML element, it's pretty
common we don't use it very often but
it's here if you need it.
Other than Normal, the most common things
that you'll be using will be your
headings, most likely. So, let's take a
look at these real quick. I'll just go ahead and apply all of them starting with Heading Three,
Heading Four...
Heading Five...
and let's put Heading Six in here also.
Nnotice each of these has a slightly
different style visually that will
indicate a different level. So headings
are actually semantic. What this means is
they provide some extra information when
a screen reader comes across them...that
screen reader uses that particular
heading style as navigation. It's also
used to indicate something of an outline
form on a page. Notice that we do not
have Heading One or Heading Two
located in the Body area this is by
design. Heading One indicates that it is
a site title. Heading Two indicates that
it is a page title. Within the body area
you should only use headings three
through six and they should be used in a
nested fashion. This actually isn't isn't
me being sticky. This is part of the WCAG
guidelines. If you're not familiar with
them you can find them by doing a quick
Google search and this is just the
guideline on how to set things up on a
page using headings. It's pretty
good information to know if you're a
content creator. It's accessibility
and it's kind of important to get a get
a good grasp with this. So, once we have
applied our headings and we hit Save,
you'll see that they look the same upon
rendering to your audiences as they do in
the administrative screen and that's
about it!
This has been Joe Fenn with Oregon State University's Web and Mobile Services and
I hope to see you soon in more
tutorials!
