Editor for WinForms | ComponentOne
Editor for WinForms Quick Start / Step 3 of 4: Applying a Cascading Style Sheet
In This Topic
    Step 3 of 4: Applying a Cascading Style Sheet
    In This Topic

    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:

      Markup

      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;
      }
      
    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.

      To write code in Visual Basic

      Visual Basic
      Copy Code
      Private Sub button1_Click(ByVal sender As Object, ByVal e As EventArgs)
          C1Editor1.LoadDesignCSS("C:\myCSS.css")
             
      End Sub
      

      To write code in C#

      C#
      Copy Code
      private void button1_Click(object sender, EventArgs e)
              {
                 c1Editor1.LoadDesignCSS(@"C:\myCSS.css");
              }
      

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