Change the default markup style

For content editors, we can choose a markup style for the ribbon to format the text.

These styles are defined in core.css. We can overwrite them in our custom css file by adding the following classes:

.ms-rteElement-H1
{
font-size:x-large !important;
font-weight:normal;
}
.ms-rteElement-H2
{
font-size:large !important;
font-weight:normal;
}
.ms-rteElement-H3
{
font-size:medium !important;
}
.ms-rteElement-H4
{
font-size:medium !important;
font-weight:normal;
font-style:italic;
}
.ms-rteElement-H1B
{
/* [ReplaceColor(themeColor:”Accent1″)] */ color:#028CD3;
font-size:x-large !important;
font-weight:normal;
}
.ms-rteElement-H2B
{
/* [ReplaceColor(themeColor:”Accent2″)] */ color:#052569;
font-size:large !important;
font-weight:normal;
}
.ms-rteElement-H3B
{
/* [ReplaceColor(themeColor:”Accent3″)] */ color:#028CD3;
font-size:medium !important;
}
.ms-rteElement-H4B
{
/* [ReplaceColor(themeColor:”Accent5″)] */ color:#058036;
font-size:medium !important;
font-weight:normal;
font-style:italic;
}
.ms-rteElement-Hr
{
/* [ReplaceColor(themeColor:”Light1-Medium”)] */ background-color:#b6b6b6;
height:1px;
}
.ms-rteElement-P
{
/* [ReplaceColor(themeColor:”Dark2-Darker”)] */ color:#576170;
}
.ms-rteElement-Callout1
{
color:660000;
background-color:#fef4e4;
float:left;
width:25em;
padding:10px;
border:1px solid #FD9F08;
}
.ms-rteElement-Callout2
{
color:#353738;
background-color:#f2f2f2;
float:left;
width:100%;
padding:10px;
text-align:justify;
border:1px solid #5a6600;
}
.ms-rteElement-Callout3
{
font-style:italic;
color:#CA0078;
float:right;
width:25em;
padding:10px;
}
.ms-rteElement-Callout4
{
color:#005677;
float:right;
width:20em;
padding:10px;
background-color:#d8f4ff;
font-family:Verdana,Geneva,sans-serif;
border:1px solid #00ADEE;
}
.ms-rteStyle-Normal
{
-ms-name:”Normal”;
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
/* [ReplaceColor(themeColor:”Dark1″)] */ color:#676767;
/* [ReplaceColor(themeColor:”Light1″)] */ background-color:#fff;
}
.ms-rteStyle-Highlight
{
-ms-name:”Highlight”;
/* [ReplaceColor(themeColor:”Dark1-Darker”)] */ color:#312a26;
/* [ReplaceColor(themeColor:”Accent6″)] */ background-color:#fae032;
}
.ms-rteStyle-Byline
{
-ms-name:”By Line”;
/* [ReplaceColor(themeColor:”Dark1″,themeTint:”0.29″)] */ color:#b6b6b6;
}
.ms-rteStyle-Tagline
{
-ms-name:”Tag Line”;
font-size:1.3em;
/* [ReplaceColor(themeColor:”Dark1″,themeTint:”0.45″)] */ color:#8b8b8b;
}
.ms-rteStyle-Comment
{
-ms-name:”Comment”;
font-style:italic;
/* [ReplaceColor(themeColor:”Accent5-Darkest”)] */ color:#36b000;
/* [ReplaceColor(themeColor:”Dark1″)] */ text-shadow:0px 0px 5px #000;
}
.ms-rteStyle-References
{
-ms-name:”References”;
/* [ReplaceColor(themeColor:”Dark1-Lightest”)] */ color:#828282;
}
.ms-rteStyle-Caption
{
-ms-name:”Caption”;
/* [ReplaceColor(themeColor:”Accent3″)] */ color:#00adee;
}