CSS Styling

What is CSS?

CSS stands for Cascading Style Sheets language and is used to stylize elements written in a markup language such as HTML. So while HTML largely determines textual content, CSS determines visual structure, layout, and aesthetics for screen sizes and devices variations.

When should I use it?

You can use CSS whenever you want to change the style of an element automatically in Titan Web. With CSS code, you can quickly and easily change an element’s background, font color, font type, and so much more.

CSS styling works on both the Element Level and Project Level in Titan Web.

Note:

We advise you to only make use of CSS if you are familiar with CSS code. Alternatively, Titan offers a number of code-free styling options.

How to Video

Video Coming Soon!

How to Guide

This guide uses the Button element as an example. However, you can choose other components to work with.

User CSS Styling on an Element Level

  1. Click on the plus (+) icon in Titan Web to open the element panel on the left.
  2. Click and drag any element to the canvas. In this example, the button option is selected, and the primary button element is dragged onto the canvas:
Drag the element to the canvas
  1. Click the Styling icon to open the Button Styling screen:
Styling icon
Styling icon
  1. On the Button Styling screen, expand the + icon next to User CSS to open the User CSS field.
User CSS option
User CSS option
  1. Add your desired styling code in the User CSS field (according to CSS syntax). Below are some examples:
    • color:#560BAD. You have the option to copy and paste a hex code from another element in your web project. Use the hex code preceded by “color:” to change the button’s font color.
    • background-color:pink. This code will change the color of the button’s background to pink.
User CSS Applied to Button
User CSS Applied to Button

CSS Styling on a Project Level

  1. Click the Gear icon next to the Plus (+) icon in Titan Web to open the Project Settings screen.
Gear Icon
Gear Icon
  1. Choose the Tools option, switch on the Custom Styles toggle, and then click the Gear icon to open the Custom Styles screen:
Custom Styles
Custom Styles
  1. Click Write Content and add your desired styling code in the Content field. Below is an example:
    • Copy the element field ID (in this case #e49 – taken from Button Settings > Metadata) and paste it into the CSS code while maintaining the syntax as follows: #e49{background-color:green ! important;} to change the background color of a button:
CSS example
CSS example
Note:

There are of course many more use cases and examples on how best to deploy CSS in Titan Web, and these will be dependent on your styling needs as well as your knowledge of this coding language.

Hidden Title

Need more help?