Tutorial: A very basic website - Create a stylesheet

Tutorial: A very basic website - Create a stylesheet

In this part you're going to create a basic stylesheet for the Basic demo design and link it in the page template.

Steps

Open Design Manager (Layout → Design Manager). On the Stylesheets tab click the Create a new Stylesheet link.

In the Name field type: Basic demo css.
Copy the code below into the Stylesheet field:

h1 {
 color: red;
}

ul li a {
 color : green;
}

On the Designs tab select the Basic demo design.
Submit the stylesheet.

Open Design Manager (Layout → Design Manager). On the Templates tab click the Basic demo - 1 template.

Replace the code in the Template Content field:

<!doctype html>
<html>
<head>
  <title>{sitename} :: {title}</title>
  <meta name="description" content="{description}">
  {cms_stylesheet}
</head>
<body>
  {Navigator}
  <h1>{title}</h1>
  {content}
  <hr>
  {content_image block='image1'}
  <hr>
  {content block='content2' label='Second content block'}
</body>
</html>

Submit the template.

Refresh the webpage (front end) and notice that the basic menu links now are green and the heading with page title is red.

Visuals

More info

Tutorial contents