# Step 3 of 4: Applying a Cascading Style Sheet

Learn how to apply Cascading Style Sheet to a C1Editor control.

## Content



In this topic you will add the code that allows you to use a cascading style sheet (CSS) when the button is clicked.

1.  In the Visual Studio **File** menu, select **New | File**. The **New File** dialog box appears.
2.  Select **General** under _Categories_ and choose **Style Sheet** under _Templates_.
3.  Click **Open** and add this markup to the style sheet so it looks like the following:
    
    DOC-DETAILS-TAG-OPEN
    
    DOC-SUMMARY-TAG-OPEN
    
    Markup
    
    DOC-SUMMARY-TAG-CLOSE
    
    ```auto
    body
    {
    font-family: Verdana;
           font-size: 10pt;
           line-height: normal;
           margin-bottom: 0pt;
           margin-left: 0pt;
           margin-right: 0pt;
           margin-top: 0pt;
           color: Fuchsia;
    }
    h1 {
           font-family: Verdana;
           font-size: 20pt;
           font-weight: bold;
           line-height: normal;
           margin-bottom: 8pt;
           margin-left: 0pt;
           margin-right: 0pt;
           margin-top: 10pt;
    }
    h2 {
           font-family: Verdana;
           font-size: 16pt;
           font-weight: bold;
           line-height: normal;
           margin-bottom: 7pt;
           margin-left: 0pt;
           margin-right: 0pt;
           margin-top: 9pt;
           page-break-after: avoid;
    }
    h3 {
           font-family: Verdana;
           font-size: 16pt;
           font-weight: bold;
           line-height: normal;
           margin-bottom: 7pt;
           margin-left: 0pt;
           margin-right: 0pt;
           margin-top: 9pt;
           page-break-after: avoid;
    }
    h4 {
           font-family: Verdana;
           font-size: 12pt;
           font-weight: bold;
           line-height: normal;
           margin-bottom: 2pt;
           margin-left: 0pt;
           margin-right: 0pt;
           margin-top: 2pt;
           page-break-after: avoid;
    }
    .C1HBullet {
           font-family: Verdana;
           font-size: 10pt;
            font-style: italic;
           line-height: 14pt;
           margin-bottom: 0pt;
           margin-left: 18pt;
           margin-right: 0pt;
           margin-top: 5pt;
           text-indent: -18pt;
    }
    p {
           font-family: Verdana;
           font-size: 10pt;
           line-height: 14pt;
           margin-bottom: 0pt;
           margin-left: 0pt;
           margin-right: 0pt;
           margin-top: 5pt;
            text-indent: 18pt;
    }
    .C1SectionCollapsed {
           font-weight: bold;
    }
    ```
    
    DOC-DETAILS-TAG-CLOSE
    
4.  Click the **Save** button and save the style sheet as _myCSS.css_, for example.
5.  Right-click the project name in the Solution Explorer and select **Add | Existing Item**.
6.  Choose the CSS and click **Add**.
7.  Create a **Button1\_Click** event and add the following code there so the cascading style sheet is applied when the button is clicked. The location may be different, depending on where you save your Visual Studio project.
    
    DOC-DETAILS-TAG-OPEN
    
    DOC-SUMMARY-TAG-OPEN
    
    To write code in Visual Basic
    
    DOC-SUMMARY-TAG-CLOSE
    
    ```vbnet
    Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs)
        C1Editor1.LoadDesignCSS("C:\myCSS.css")
    End Sub
    ```
    
    DOC-DETAILS-TAG-CLOSE
    
    DOC-DETAILS-TAG-OPEN
    
    DOC-SUMMARY-TAG-OPEN
    
    To write code in C#
    
    DOC-SUMMARY-TAG-CLOSE
    
    ```csharp
    private void button1_Click(object sender, EventArgs e)
            {
               c1Editor1.LoadDesignCSS(@"C:\myCSS.css");
            }
    ```
    
    DOC-DETAILS-TAG-CLOSE
    

In the next step you will run the project and add text to the editor.