Styling Site Content with CSS

CSS Class | In-line CSS | Button | Tables | Bootstrap v3.3.4 | Embedded Content

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:


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.


Here is an example of how to make an iconic SDSM&T blue 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.


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


SD Residents & 
Children of Alum

SD Advantage^ & 
MN Reciprocity**


Non-SD Resident

Tuition and Fees* $10,770 $10,770 $14,580
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

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.


See: How to embed a YouTube video


See: Embed a facebook post