HomeDesigning › Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

The Your Web Department platform includes all the style sheets you need to build great websites.

In addition you have completele freedom to override YWD’s default classes, as well as add your own. There are many places and options for you do that, which we will discuss here.

Adding custom CSS globally via YW Designer

If you would like to add custom CSS that will be loaded by all pages, click Designer on the main toolbar to launch YWD Designer, and then go to Apps > Custom CSS. YWD offers several fields where you can either type or paste your CSS code. You can also enter CSS specifically for mobile to override a generic setting.

Custom CSS in Designer
Custom CSS fields in YWD Designer


Applying classes to individual content blocks

You can also apply custom CSS to specific content blocks. You can either write your own styles and add them to the Design settings as described above, or use one or more predefined styles. For instance, you could add a new CSS class called homepage-hero that you would only like to apply to one content block – the Home page hero. To do so, after adding the CSS code to YWD Designer all you need to do is edit the content block, and in the Advanced options of the content block enter the name of that class:

Custom CSS field
Assigning a class to a content block

That’s it. The class will be applied to the content block when the page is displayed.


Applying styles to elements within the Word Processor

You can also apply stylesheet classes to certain elements within a Word Processor content block, directly from the editor. You can do that for links, images and tables. Simply enter the class(es) that you would like to apply into the Stylesheet Classes field of the element’s Advanced tab. You can combine custom CSS classes that you create and add to YWD Designer with one ore more of YWD’s predefined styles. If using more than one class, separate them with a space. In the example below, one of YWD’s predefined classes (button) is being combined with a custom class (animated) written by the website’s designer.

Stylesheet Classes
Assigning classes to a link


Applying inline styles

In some very special cases, you may want to apply a style to a specific element. You can use the Style field of the element for that. Try to avoid that practice though, as it may make your website difficult to maintain.

Inline styles

Adding inline CSS to a specific element


Top of page