Create a meaningful, marked up hierarchy in preparation for styling
There are lots of ways to get started in Typecast, so take your pick. You can:
- Select a template on your dashboard to load up a project with readymade sample content and mark up.
- Type content directly into a blank canvas, creating a new paragraph (p element) every time you hit enter or return.
- Paste in marked up content, and the HTML structure will be retained, including custom classes.
- Use the Insert menu to add specific HTML elements, like headings, or groups of elements.
- Copy and delete blocks of content, or entire containers.
Next, make sure each block of content is marked up appropriately. You can:
- Change the HTML markup on blocks of content, e.g. change a paragraph (p element) to a heading (h1 element).
- Create and assign custom classes for unique styles, e.g. create a custom paragraph class (p.intro) for the first paragraph.
Change the markup on a block of content
If you want to change a p element to a heading, simply click the element pill to open the element menu, and select from the list.
In the example above, we pasted in content that already had a custom class set on the main heading, "h1.main". We want to switch this to a regular heading, so we need to select "h1" from the element menu.
Create and assign a custom class
The element menu includes a button to create a custom class. Doing so will create the class and apply it to the element that is currently active. As soon as you apply a style to it, it will also appear in your CSS. Easy!
Assign an existing custom class to a block of content
Click anywhere within the block of content and open the element menu. Then select the custom class you want to apply to this content from the menu.
The styles set for the custom class will immediately be applied to the block, and any style changes will take effect on all blocks with that custom class.
Find out more in the Add & structure content section.