Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

CSS widget | MVC

You use the CSS widget to refer Cascading Style Sheets (CSS) resources in your pages. The widget provides capabilities for referring both inline styles and references to CSS files into the page <head> tag.

After you place the CSS widget on your page you configure which CSS files to include. To do this, click Edit button in the upper-right corner of the widget. The following sections describe the properties and settings you need to define.

Add CSS

You can either wrte a new CSS file from scratch or link to an existing CSS file. Choose one of the options: 

  • Write CSS
    Directly type the CSS rules into the code area, so that it is included in the HTML <head> tag. For example:
     body { background: #fff; font-size: 12px; }

    NOTE: You do not need to add a <style> tag, since it is automatically added.

  • Link CSS file
    Do one of the following:
    • Select a CSS file from your file system by directly typing the path to the CSS file
    • Click Select to browse the file system.
      You can choose a file from the your web application folder and its children.

Select media type

Under Media, select the media type that refers the CSS file:

  • All
    Includes all types of media.
  • Selected media types...
    Choose from the following options:
    • braille
    • print
    • speech
    • embossed
    • projection
    • tty
    • handheld
    • screen
    • tv

      NOTE: For details on types, see Media types.

    • More options

    Expand More options section to optionally add a description for the referenced CSS file. This description is displayed only when pages are in edit mode, so that you easily distinguish CSS files.

    Model settings

    Model settings display all properties directly bound to the CSS widget model. Access these properties by clicking the Model button in Advanced settings.

    • Description
      Gets and sets the description of the CSS that is referenced. This field is for your convenience only.

    • InlineStyles
      Gets and sets inline styles that are displayed in the code area when the widget is in Write CSS mode. The content of this field is rendered inside <style> tag, in the <head> section of your HTML file.

    • MediaType
      Gets and sets the media types to which the CSS is applied.

    • Mode
      Defines the supported ways to refer CSS through the widget. Choose one of the options:

      • Inline
        This is the default option. You use it when you want to enter CSS directly into the code area. If you enable this mode, any URL selected through Link to CSS file will not be added.
      • Reference
        You use this option for referring resources from your file system. If you enable this mode, any CSS typed directly into Write CSS code area will not be included.

    • ResourceUrl
      Gets and sets resource URL which is referenced in the page <head> tag. This ResourceUrl is used only when the CSS widget is in Reference mode.

Back To Top

Next: JavaScript widget | MVC

Additional resources

ARTICLES

External links