| Creation of a simple document |
I just launched Composer and made a very simple document.
It contains a div carrying class "mainDiv", itself containing an h1
and a p.
|
Open
the stylesheet editor
|
The stylesheet editor is a modal dialog presenting
on the left all the stylesheets and rules attached to the document,
and on the right the information or properties specified by a sheet/rule.
The dialog also contains button allowing to create/move/remove external
stylesheets, embedded stylesheets, imported stylesheets, style rules,
and at-media at-rules.
|
Attach
an external stylesheet to the document
|
I have just clicked on the "Link elt." button and
I am about to attach an external stylesheet for media "screen" to
the document. It is also possible to attach alternate stylesheets
that the browser will propose to the user under View > Use Stylesheet.
|
The
stylesheet is now attached to the document
|
The external stylesheet is added to the list of stylesheets.
Clicking on the item unfolds the list of rules specified by the sheet.
All items are in italic because they are external to the document and
cannot be modified.
The right part of the dialog shows the intrinsic data of the stylesheet.
|
| The
"disable stylesheet" button |
Please notice the "disable stylesheet" that allows
to disable the application of the sheet w/o unloading it. It is then
very easy to see the difference between a document with a given sheet
and without.
|
See
a CSS rule
|
I have selected a CSS rule and the right part of the
dialog shows me the intrinsinc data of the rule
|
See
what background defines a rule
|
This rule defines a grey uniform background for the
body of my document
|
Another
rule
|
This rule specifies a lot of declarations
|
See
what text and font it defines
|
This rule specifies a right alignment (and a silver
background but that's not shown in this tabpanel)
|
Let's
create an embedded stylesheet
|
I have clicked on the "Style elt." button and am about
to add a STYLE element to the document.
|
Add
a rule to the new sheet
|
The stylesheet is created, let's add a rule applying
to all h1 elements
|
Specifying
color
|
Specifying blue text color for all h1 elements
|
The
text tabpanel for this rule
|
This rule specifies blue, bold, italic, right-aligned
text, in "Georgia" font (or the default serif font is Georgia is not
available on the system) of size 18 points ; the text is also
underlined and overlined. A preview is available. Please note that
the editor's session behind is immediately updated.
|
Let's
create another rule
|
I want to create another rule for the body of my document
|
Specify
a background
|
I want the body of my document to be white with a
tiled background image that does not scroll when I scroll the document's
content in the viewport.
|
A
last rule
|
I also want the subtitle of my document to have its
own style.
|
Specifying
text/font data
|
My subtitle's text is centered, in black colour, uses
a smaller font than the normal text and uses font Arial, or Helvetica
if Arial is not available, or sans-serif is none is available.
|
The
end result
|
Finally, I have added two stylesheets to my document
in one minute and its look is now absolutely different even if I did
not change any bit of the contents of its body.
|
