Topics

All topics

CSS widget

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.

Additional resources

ARTICLES

External links

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

JavaScript widget