Designing websites using CSS

✖
Copy to clipboard

Kentico websites use standard CSS styles to define the appearance and design of pages and their components. The system organizes CSS code into stylesheets.

Every site has a CSS stylesheet that pages use by default. However, you can assign a different stylesheet to each page. When displaying pages, the system automatically adds a request that loads the assigned stylesheet into the HTML code. See Creating CSS stylesheets to learn more.

You can also define CSS styles for various types of page components. For further information, see Adding CSS stylesheets to page components.

Tips

Browser and language‑specific styles

The system automatically assigns CSS classes to the <body> element of pages according to the characteristics of the selected language (the text direction and exact culture) and the browser used to display the page. For example:




<body class="LTR IE IE9 ENUS">

Four types of classes are added:

  • Text direction - the LTR class is assigned for left‑to‑right languages, and RTL for right‑to‑left.

  • Browser type - added according to the browser in which the page is opened. The following classes are used:

    Browser

    Class names

    Internet Explorer

    IE

    Firefox

    Gecko

    Google Chrome

    Chrome, Safari

    Safari

    Safari

    Opera

    Opera

  • Browser version - the class name is the same as for the browser type, but with the number of the browser’s major version appended, for example IE9, Gecko26 etc.

  • Culture - the name of the class is added based on the culture code of the page’s content (without the hyphen), for example ENUS for pages using the en-US culture.

This feature allows you to style page elements differently according to the browsing environment of the current visitor. You can define styles for any combination of the classes mentioned above.

For example, you can add the following into a website’s stylesheet:




.IE9 .MyFont 
 {
   font-size: 20px;
 }

 .Opera .MyFont 
 {
   font-size: 18px;
 }

Now elements styled using the MyFont class have a different font size when viewed in the Internet Explorer 9 or Opera (all versions) browsers.