...
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 |
---|
borderStyle | solid |
---|
title | Override | borderStyle | solid |
---|
| .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 |
---|
borderStyle | solid |
---|
title | HTML | borderStyle | solid |
---|
| <div class="fl-col-flex3">
<div class="fl-col">...</div>
<div class="fl-col">...</div>
<div class="fl-col">...</div>
</div>
|
|
Column |
---|
Code Block |
---|
borderStyle | solid |
---|
title | Override | borderStyle | solid |
---|
| .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. |
|
...