T2: Cascading Style Sheets Tutorial for Kentico CMS

   —   

In Tutorial 1 we covered the basics of CSS. CSS is a style based language used to describe the look and formatting of a markup based document. Kentico CMS takes extensive advantage of CSS to allow the change of the look and feel of your Web site. In this tutorial we will look at the ways that you can edit CSS within the Kentico CMS Web user interface. We will also look at one of the basic CSS properties color and how this can be used within your site.

Tutorial 2: CSS Editing with Kentico

By default every Kentico Web site contains a site wide default style sheet. This site wide CSS is the base style sheet for the entire site. The default style sheet is available within CMS Site Manager- Development CSS style sheets as shown below.

The built in editing interface provides a text editor and a block location tool designed to make it easier for the navigation of CSS code. This enables the ability to comment code blocks in the format /* #BlockName# /* or sub blocks in the format /* #BlockName/SubBlock# /* as shown below.

In addition to the site wide default each Web page can use either the site wide default style sheet or its own style sheet. The page style sheet is set threw CMS Desk Content Properties tab General and removing the inheritance checkbox as shown below.

Example 1: The color property

The color property is used to describe the foreground color of an element. Many times this property is used to change the headlines or the HTML Element <h1> . For example, we could change the default headlines within Kentico CMS to all blue by modifying the global stylesheet as shown below.

Open the Kentico default style sheet and locate the <h1> tag block as shown below.

Modify this tag block to change the default color to blue using the hexadecimal values shown below.

Note: Colors can be interested as hexadecimal values, name, or rgb values.

Once saved view the results on the corporate site front page as shown below.

Share this article on   LinkedIn Google+

Thomas Robbins

I spend my time working with partners and customers extending their marketing and technology to the fullest.

Comments

alla commented on

thanx