...
Overriding an entire class doesn't mean that you have to change all of the properties specified. To override fl-para, you can copy and paste the code into your imported or embedded style sheet and modify it however you like. Here's an example:
| Section |
|---|
| Column |
|---|
| Code Block |
|---|
| borderStyle | solid |
|---|
| title | Original Style |
|---|
| borderStyle | solid |
|---|
|
.fl-para {
font-family: "Times New Roman";
font-size: 1.2em;
text-align: left;
}
.fl-footer {
font-family: "Arial";
font-size:
0.9em;
}
|
|
| Column |
|---|
| Code Block |
|---|
| title | Override |
|---|
| borderStyle | solid | title | Override |
|---|
|
.fl-para {
font-family: "Arial";
font-size: 1.4em;
}
|
This "re-styles" fl-para by overriding the font-family and font-size. Whatever is left out (text-align in this example) is inherited from the original fl-para; so the text remains aligned to the left. |
|
...
In some cases, you may only wish to override an FSS style for one element that the class is applied to. This can be accomplished by using a selector that is specific to only that element, for example by adding a class name, or using other specifics.
| Section |
|---|
| Column |
|---|
| Code Block |
|---|
| title | HTML |
|---|
| borderStyle | solid | title | HTML |
|---|
|
<div class="fl-col-flex3">
<div class="fl-col">...</div>
<div class="fl-col">...</div>
<div class="fl-col">...</div>
</div>
|
|
| Column |
|---|
| Code Block |
|---|
| title | Override |
|---|
| borderStyle | solid | title | Override |
|---|
|
.fl-col-flex3 .fl-col:first {
margin-left: "10px";
margin-right: "10px";
}
|
In this example, the custom stylesheet overrides the default margins for only the first column of the three-column layout. |
|
...