Training

Campus Services

Styling Site Content with CSS

See Also: Link to Ektron Training: Tables

CSS Class

CSS classes lets you apply pre-defined styles to specific elements throughout the site.

Example of how to make a CSS class and apply it:

Hello!

What is happening here? A CSS class is created inside a style block, this class tells that whatever it is applied to should have the text color purple, and a solid thin border

We then apply this style to the p tag so that it can inherit those styles.

In-line CSS

CSS styles can also be applied per tag and declared inline.

Buttons

Here is an example of how to make an iconic SDSM&T blue button:

Blue Button

Gray Button

Notice that styling a tag can be done by adding style="list of styles".

Also notice that even though we gave button inline stylings, we can still apply classes to the button.

Multiple classes can be given to a tag, separated by space.

Tables

See W3C Schools: Tables

Tables are great for conveying information effectively. After reviewing tables on w3c schools, consider this example taken from: Tuition and Fees

Undergraduate	SD Residents & Children of Alum	SD Advantage^ & MN Reciprocity**	WUE	Non-SD Resident
Tuition and Fees*	$10,770	$10,770	$14,580	$15,080
Books and Supplies (Includes Tablet PC Program)	$ 2,040	$ 2,040	$2,040	$ 2,040
Room and Board	$ 8,770	$ 8,770	$8,770	$ 8,770
Estimated Yearly Total	$21,580	$21,580	$25,390	$25,890

The classes are included from bootstrap.css, notice for styling the borders on the right and left are removed and this could be accomplished with a "border-left: none", "border-right: none". The attribute "cursor: default" refers to the mouse cursor. If it were to be set to active instead, it would cause the mouse to prompt the user that the item is clickable.

Bootstrap v3.3.4

See: List of components.

The list is quite long, so it may be handy to use the right hand navigation to find what you are looking for.

Bootstrap is an open source library of web components available for our use. We are currently on Bootstrap version 3.3.4, so when you are looking at the documentation, make sure you have the proper version.

Embedding Content

Embedding content is a great way to improve page appeal. Typically you get a code snippet provided from the site that you want to get content from. Then in the Ektron editor go to Review→View Source (located right below review). You then paste the code snippet from the site in the Source Viewer.

YouTube

See: How to embed a YouTube video

Facebook

See: Embed a facebook post