User Tools

Site Tools


css_overview

CSS Workshop

The Cascading Style Sheet (CSS) is used to control most aspects of web pages visual design. It can be used to control typography, colors, and spatial arrangement of elements on a page. If you have designed web pages, you may already be familiar with CSS; but it is likely that you styled the elements on your page individually (especially if you used Frontpage or MS Word.) Becoming an expert in CSS can require quite a bit of work, but we can easily learn enough to get us started. Here is another way that working with Markdown will help us, since the number of elements we need to style are quite finite.

Advantages of CSS Styling

  1. Establishes site consistency and easy changes
  2. One CSS file can define the look for all your pages
  3. Compatability with different browsers and mobile access
  4. Allows you to concentrate on creating content
  5. Websites load faster

Let's look at a few examples of how changing CSS can alter a web page - CSS Example 1 - blackish - CSS Example 2 - earth) - CSS Example 3 - grayish)


Challenge: What change was made to alter the three pages above?

Test it: Login to your CPanel and edit your index.html file. What is the result?


Workshop

Part 1 : Getting to Know CSS

CSS use requires two steps. It works placing all the style in one file: filename.css which is placed on a web server. A CSS file can be small or large. Then that file is available and all the pages you want to know about it are linked to it. (For our purposes, we will not discuss inline styles or internal style sheets, since I think they confuse matters and don't really give much benefit. )

Here is a simple CSS file:

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

So you can see that three elements are being styled here: the body <body>, the first-level heading <h1>, and the paragraph '<p> text. You can try out this example on the W3schools page. Change the heading color to “black” or “blue”. Change the font-size, etc.

Pretty much any element (think tag) in an html file can have style information associated with it. Again we can than Markdown for keeping things simple. In developing a style sheet for a document creating in Markdown, we pretty much only have to worry about these elements: <body>, headings <h1> ... <h6>, paragraphs <p>, quotations <block-quote>, lists <ul> and <ol>. In fact, we don't even have to give style information for all of them if we don't want.

CSS can be complex. For instance, even a font-size can be expressed in terms of pixels or ems or percentages (of the default font). But you can simply learn as you go, and fortunately, it is very easy to see what other people have done to style their pages.

Part 2 : Learning BASIC CSS Elements

CSS For this page

One strategy: reveal codes and copy (the hacker's approach)

Since we do not have several weeks to immerse ourselves in CSS, let's take a short cut and look atthe CSS used to visually style this page. http://digital-english.net/summer2012/markdown.css. Some of these descriptors are obvious. Use the W3 schools site as a reference if you can't figure any of these out.

Now let's play around with this page a bit.

You'll need to make one change at the top of the document. You'll notice the following <link rel="stylesheet" type="text/css" href="http://digital-english.net/summer2012/markdown.css" > </link>

What change do we have to make in order to be able to modify the styles on our local machines?

Web designers often create subdirectories for style sheets, images, and such. This is not a bad idea, but for now we'll keep all our files in one directory so that we don't lose them.

  • Make changes to the CSS and refresh the webpage. Are they reflected?

Code Academy Tutorial

another strategy: follow a tutorial and work incrementally (systematic)

I am a fan of the tutorial's on this website. They walk you through various steps, allow you to see the results, and give you hints if you get something wrong. Let's all spend about 25 minutes walking through the basic CSS tutorial. Go at your own pace; I'll help you if you get stuck.

Code Academy Basic CSS

When you feel comfortable with basic CSS (or we run out of time), we'll begin to apply it to our Markdown generated pages.

Part 3: Style Your Own Page

Now we will try to create a style sheet, link it to an HTML file you have created through Markdown, and upload them both to your web space. If you get frustrated at any point, remember to read closely (a single missing hyphen or extra space can break your code). And remember that the virtue of CSS is that once you settle on a good style sheet, your second, third, fourth and fifth pages all reuse it. Very ecological!

  1. Using your favorite text editor, create a file and begin to add CSS. Use W3S as a reference or the Page-css for this page.
  2. Tweak and test on your desktop. Remember that you will have to use your Markdown converter to render the marked up text to html.
  3. Upload both files to your web space and see if it works.
/home/kenneths/public_html/engl7881/wiki/data/pages/css_overview.txt · Last modified: 2016/05/16 17:08 by kwsherwood