# Using a Cascading Style Sheet with C1Editor Learn how to use cascading style sheet in C1Editor for WinForms control. ## Content 1. Create a .NET project and add a [C1Editor](/componentone/api/win/online-richtexteditor/dotnet-framework-api/C1.Win.C1Editor.4.8/C1.Win.C1Editor.C1Editor.html) and **Button** control to the form. 2. In the Solution Explorer, double-click **Resources.resx**, click **Add Resource**, and select **Add New String**. 3. Enter **sEditorText** as the **Name** of the resource. 4. In the **Value** column, enter some content for the .xml document. You can copy this sample content and enter it if you prefer. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Sample content DOC-SUMMARY-TAG-CLOSE \"C:\\Users\\jjj\\AppData\\Local\\Temp\\tmpB1BB.tmp"[\]>xmlns="http://www.w3.org/1999/xhtml">\\Famous<br />Pittsburgers\content="text/html; charset=utf-8" />\\\

Famous
Pittsburghers\

\

Many famous and successful
people were born and raised in Pittsburgh; although they found
fame in other cities, they called Pittsburgh home.\

class="C1SectionCollapsed">Actors/Comedians\

\class="C1SectionCollapsed">TV Legend\

\
    \
  • class="C1HBullet">Fred Rogers (Producer and host of PBS's "Mister
    Rogers' Neighborhood")\

    \
    • \
class="C1SectionCollapsed">Artists\

\
    \
  • class="C1HBullet">Mary Cassatt (Impressionist
    painter)\

    \
    • \
  • \

    Andy Warhol (Pop
    artist; Pittsburgh is the home of the Andy Warhol Museum)
    \

    \
    • \
\

Sports
Legends\

\
    \
  • \

    Dan Marino (Quarterback
    of the Miami Dolphins and University of Pittsburgh
    Panthers)\

    \
    • \
  • \

    Joe Montana (Super
    Bowl champion quarterback of the San Francisco
    49ers)\

    \
    • \
  • \

    Joe Namath (Outspoken New
    York Jets quarterback; victorious in Super Bowl
    III)\

    \
    • \
  • \

    Johnny Unitas (Quarterback
    of the Baltimore Colts for 17 years)\

    \
    • \
  • class="C1HBullet">Arnold Palmer (Golf legend and winner of more
    than 60 PGA events, including the Masters and the U.S.
    Open)\

    \
    • \
class="C1SectionCollapsed">Singers\

\
    \
  • class="C1HBullet">Perry Como (Recorded over 100 hit
    singles)\

    \
    • \
  • \

    Bobby Vinton ("Roses
    are Red" and "Blue Velvet" hit #1 on the Billboard
    charts)\

    \
    • \
class="C1SectionCollapsed">Writers\

\
    \
  • class="C1HBullet">Rachel Carson (Author of "Silent Spring," as
    well as a pioneering
    environmentalist)\

    \
    • \
\\








































DOC-DETAILS-TAG-CLOSE 5. Go back to your form and double-click it. 6. In the **Form\_Load** event, enter code to load the .xml document so it looks like the following: DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN To write code in C# DOC-SUMMARY-TAG-CLOSE ```csharp private void Form1_Load(object sender, EventArgs e) { c1Editor1.LoadXml(Resources.sEditorText, null); } ``` DOC-DETAILS-TAG-CLOSE ### Load a CSS 1. Create a CSS and add it to your project by right-clicking the project name in the Solution Explorer, select **Add Existing Item**, choosing the CSS, and clicking **Add**. You can use this sample CSS if you don't already have one. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Sample CSS DOC-SUMMARY-TAG-CLOSE ```auto html { ``` ```auto font-family: Verdana; ``` ```auto font-size: 10pt; ``` ```auto line-height: normal; ``` ```auto margin-bottom: 0pt; ``` ```auto margin-left: 0pt; ``` ```auto margin-right: 0pt; ``` ```auto margin-top: 0pt; ``` ```auto } ``` ```auto ``` ```auto h1 { ``` ```auto font-family: Verdana; ``` ```auto font-size: 20pt; ``` ```auto font-weight: bold; ``` ```auto line-height: normal; ``` ```auto margin-bottom: 8pt; ``` ```auto margin-left: 0pt; ``` ```auto margin-right: 0pt; ``` ```auto margin-top: 10pt; ``` ```auto } ``` ```auto ``` ```auto h2 { ``` ```auto font-family: Verdana; ``` ```auto font-size: 16pt; ``` ```auto font-weight: bold; ``` ```auto line-height: normal; ``` ```auto margin-bottom: 7pt; ``` ```auto margin-left: 0pt; ``` ```auto margin-right: 0pt; ``` ```auto margin-top: 9pt; ``` ```auto page-break-after: avoid; ``` ```auto } ``` ```auto ``` ```auto h3 { ``` ```auto font-family: Verdana; ``` ```auto font-size: 16pt; ``` ```auto font-weight: bold; ``` ```auto line-height: normal; ``` ```auto margin-bottom: 7pt; ``` ```auto margin-left: 0pt; ``` ```auto margin-right: 0pt; ``` ```auto margin-top: 9pt; ``` ```auto page-break-after: avoid; ``` ```auto } ``` ```auto ``` ```auto h4 { ``` ```auto font-family: Verdana; ``` ```auto font-size: 12pt; ``` ```auto font-weight: bold; ``` ```auto line-height: normal; ``` ```auto margin-bottom: 2pt; ``` ```auto margin-left: 0pt; ``` ```auto margin-right: 0pt; ``` ```auto margin-top: 2pt; ``` ```auto page-break-after: avoid; ``` ```auto } ``` ```auto ``` ```auto .C1HBullet { ``` ```auto font-family: Verdana; ``` ```auto font-size: 10pt; ``` ```auto font-style: italic; ``` ```auto line-height: 14pt; ``` ```auto margin-bottom: 0pt; ``` ```auto margin-left: 18pt; ``` ```auto margin-right: 0pt; ``` ```auto margin-top: 5pt; ``` ```auto text-indent: -18pt; ``` ```auto } ``` ```auto ``` ```auto p { ``` ```auto font-family: Verdana; ``` ```auto font-size: 10pt; ``` ```auto line-height: 14pt; ``` ```auto margin-bottom: 0pt; ``` ```auto margin-left: 0pt; ``` ```auto margin-right: 0pt; ``` ```auto margin-top: 5pt; ``` ```auto text-indent: 18pt; ``` ```auto } ``` ```auto ``` ```auto .C1SectionCollapsed { ``` ```auto font-weight: bold; ``` ```auto } ``` DOC-DETAILS-TAG-CLOSE 2. Add a **button1\_Click** event and use the [LoadDesignCSS](/componentone/api/win/online-richtexteditor/dotnet-framework-api/C1.Win.C1Editor.4.8/C1.Win.C1Editor.C1Editor.LoadDesignCSS.html) method: DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN To write code in C# DOC-SUMMARY-TAG-CLOSE ```csharp privatevoid button1_Click(object sender, EventArgs e) { c1Editor1.LoadDesignCSS(@"C:\CSS1.css"); } ``` DOC-DETAILS-TAG-CLOSE ### Run the Project 1. Press F5 to run the project. Notice the document is loaded in the C1Editor. 2. Click the button. The document is formatted with the CSS. For a detailed example of using custom cascading style sheets, see the **UserCSS** sample that comes with this product.