Tutorial site 2: StylingCyteis Help
In this tutorial, we will be creating a page for a fictitious site and applying more sophisticated styling techniques. It is assumed that you have read the previous tutorial and are now familiar with:
Please use the previous tutorial as a guide to create a page with the following layout and contents (or other content of your choice):
We want to decorate the Menu section with some padding space and a border to help seperate it. To do this, click on the menu rectangle under Layout and in the "Other CSS", append the following:
Next, we want to have two div containers for the menu: one for Topics and one for Contact. Div is a container for seperating sections of a page. First of all, click on the Show Blocks button to activate block display in the Editor. Next, click on the Create Div Container and then on the Advanced tab. Here, you can specify the ID, Style or classes for the Div. Please add the following in the style textbox:
This will add a white border and a 5px padding space at the bottom. Write your Topic menu contents inside this div. Next, please create a second div element and move the Contact menu content in there. This is what it should look like now:
Finally, we want to change the font-family to "Courier New", Courier, monospace for everything and to change the background-color to black and the font color to lime. One of the ways to achieve this is to highlight all of the text and then select lime as the font color. However, there is a better way to do this. In the Body section, change the Background color to Black.
In the Header, add the following:
This CSS code specifies that we want the font to be "Courier New", Courier, monospace and the color to be lime for the whole page (body refers to the contents of the page). This is what the Header should look like:
Of course, you can enter any CSS code that you like in the Header (for global CSS settings), Layout (for CSS specific to the section), or embed it within the actual section's contents for more granular styling.
In this tutorial, we changed the styling and layout of a page, partially through using CSS code. Assuming that all went well, this is how our site should look like: Menu page