Style Sheets Tutorial

Share

Today we are going to use last week’s tutorial, the Twitter feed custom element, to demonstrate how you can use stylesheets to modify the appearance of elements on your page.

Last week we left the element with its default appearance: http://www.ecu.edu/cs-training/hallwa/Twitter-Feed.cfm.  Today we are going to use a stylesheet to transform it to this: http://www.ecu.edu/cs-training/hallwa/Twitter-Feed-styled.cfm.

First, create a empty text file in DreamWeaver, Expressions Web, notepad or any other plain text editor.  (Do not use Word.)  Save it as myStyles.css.  Then upload it to your tools page.  I put mine in a subfolder called tweetStyles, but you can put yours in the tools root if you want.

Let’s see how to include that style sheet into a page.  While in Author mode, click on the Properties and Actions option from the submenu. A popup window will appear.  Make sure that “Use Style Sheet and prevent element style override” is checked.  Click Next.  The Style Sheet Sets window will appear.

If you have never edit the style sheets for your page, then the default set should be the only one listed.  At this point, you have two options:

  1. You can create a new set containing your style sheet.  This will have the affect of removing the default styles, as defined in the default.css file, from your page.  It will not remove the general default ECU styles, which are defined else where.
  2. You can add your stylesheet to the default set.  This is probably the better option.

When you add your style sheet to a set, the style sheet listed at the bottom is the one that will take precedence. So if a style is set in both default.css and myStyles.css, and myStyles.css is listed after default.css, then the style set in myStyles.css will override the one set in defaults.css.

styles

To insert a style into the set, click the pencil icon next to the set name and select Style Sheets… from the submenu.  Use the “Click here to add a new style sheet” link to insert the sheet.  Check the “Explicit File” option and type the location of your file into the “Logical Path” box.  It should be something like “/cs-[siteName]/[subfolder]/customcf/myStyles.css.  Click Finish.  You should see your file listed after default.css.  Click Close.  Click Finish.  You page should reload, and if you view the source, you will see you CSS file listed near the top.

code

Now that our style sheet is referenced in our HTML code, we can change the way the page displays just by editing that file, without using any of the CommonSpot authoring tools.

First, let’s add a thin black border around the entire element.  If you remember from the image that shows diagrams the layout, the element is in a div with a class of “tweetContainer”.  So, open your myStyles.css file and add this CSS code:
.tweetContainer{
border: solid thin #000000;
}

The “.” denotes a CSS class (“#” is used to denoted an id).  Classes can be reused, but ids need to be unique on a page.  Upload myStyles.css to your tools page and then reload your CS page that has your Twitter feed on it.  It should now have a border around it.

Next, let’s get rid of the the default horizontal line separating the individual tweets and replace it with a dotted ECU purple line.  Add this code to myStyles:

hr.tweetSeparator {
display: none;
}
p.tweet {
border-top: dashed thin #592a8a;
}

First, by setting display to “none” the browser will stop displaying the hr tag, even though it is still in the HTML code.  Next, we are adding a dotted purple top border to each paragraph.  Upload the file and reload the page to see the results.

Now, both the border around the whole element and top border on the paragraphs are too close to the text, so let’s add some padding to both:

.tweetContainer {
border: thin solid #000000;
padding: 10px;
}
.tweet {
border-top: dashed thin #592a8a;
padding-top: 10px;
}

OK, last let’s make the “Latest tweets from…” text appear all to the right of the Twitter image.  Add this code, upload, and reload:

.twitterImage {
float: left;
padding: 0 10px 5px 10px;
}
.tweets {
clear: both;
}

With just these few lines of code, we changed the appearance rather substantially.  You can learn more about CSS many places.  One of my favorite CSS reference/tutorial sites is the W3Schools (http://w3schools.com/css/).  The site covers HTML, CSS, XML, JavaScript, and many other web technologies.

2 thoughts on “Style Sheets Tutorial

  1. Pingback: Tech Tips » Tuesday Tutorial: Adding Style Sheets in CommonSpot

Leave a Reply