You can use a code editor or text editor to create a CSS file. There are many different applications available, and you can use any that support saving with a .css file extension.
Before you create your own CSS, it is important to understand that the CSS is for styling the HTML/HTML5 output. You do not style the Paligo XML that you see in the Paligo editor. The conversion of Paligo XML elements to HTML elements is handled automatically when you publish. Paligo also gives many HTML elements class names or IDs, so you can style them with CSS. (You can Add your Own Class Names, if needed).
To create a CSS file:
-
Use a third-party code or text editor to create or update a CSS file.
For example,
mystyles.css
. -
Add the styling rules that you want to apply to your content.
To create your own CSS stylesheet, you need to identify the classes that you want to change. You can do this by publishing an HTML output and then using the Browser Inspection Tool to view the class names of the elements. When you have the class names, you can add them to your CSS and include attributes and values for styling.
If you are completely new to CSS, you can find a Basic CSS Syntax below. We also have a Branding HTML Tutorial that will guide you through some basic CSS styling.
Tip
To learn about CSS, this CSS Tutorial covers the basics and has links to more resources.
-
Save your CSS file.
-
Upload Customized CSS to the Layout you will use for publishing.
A CSS stylesheet contains a list of instructions or "rules". They tell the browser how to style content that is marked up to have a class name or id. For example, a paragraph could have the class name "aside" and you could then use a CSS rule for "aside" to define the color, font, margins, etc., to apply to that paragraph.
For a CSS rule, you define the selector and then the attributes and values that will apply. Here is a simple example of the styling for a class named "para-main".
.para-main { font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px; line-height: 1.5pt; color: #333; background-color: #f5f5f5; }
-
The rule begins by defining the class the style rules will apply to. This is the "selector" and it can include one or more classes. Here, there is just one and it is preceded by a period ( . ) so that it can apply to different HTML elements. For example, if there was an h1.para-main selector, the style rules would only apply to heading 1 (h1) elements that have the class "para-main".
-
An opening curly bracket begins the rules for styling.
-
On each line, there is an attribute and the value(s) for that attribute. For example, font-size is the attribute and 13px is the value. Note that the font-family attribute has several values, each separated by a comma. In this case, the browser will use the Open Sans font. If that is unavailable, it will use Helvetica Neue instead. If that is unavailable, it will use Helvetica, and so on.
-
A colon separates a value from its attributes.
-
A semi-colon is used to mark the end of the value(s).
-
A closing curly bracket ends the rule.
This is a basic example, but the main principles are the same for CSS styles. You begin with a selector to define which class the rules apply to , then define the rules for that class as attributes and values.
Tip
To learn about CSS, this CSS Tutorial covers the basics and has links to more resources.
Comments
0 comments
Article is closed for comments.