User Tools

Site Tools


# 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

### Challenge: Add the following to your index.html file and visit the page.

<link rel=“stylesheet” type=“text/css” href=“” > </link>

What happened?

## 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:

  font-family:"Times New Roman";

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.

### More on Colors and Fonts

For text-heavy websites, controlling Font style, size, and colors are key.

* Colors can be named, using simple words like 'black' and 'red' but are usually expressed on the web using RGB or Hex codes. W3 Schools provides this simple [guide]( Consider using this Hex Color scheme generator like [Palleton](

* Text: skip to W3 Schools tutorials on [Text formatting]( [Font families and sizing](

### Recommendation: Use a simple text editor like Notepad++ for editing CSS.

## Apply simple CSS modification to style your index page:

1. Add this text in the header area of your page: <link rel=“stylesheet” type=“text/css” href=“markdown.css” > </link> 2. Edit CSS values for the color of headers in Notepad++ 3. Same the file as “markdown.css” using Notepad++ 4. Upload the file to your /public_html director 5. Refresh your homepage.

### 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[]( []( 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.

* Download one of the webpage files. * Download the css file

  Save these to a subfolder on your desktop and explore changes there.

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=“” > </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?

## W3 Schools Tutorials

*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.

### Suggested Modules

- [Intro](

- [Syntax](

- [How to]( see section on External Style Sheets

- [Colors](

- [Backgrounds](

- [Text](

- [Fonts](

- [Lists](

- [Shadows](

- [Nav Bar](

- [Dropdown](

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.

css_overview.txt · Last modified: 2020/05/16 05:18 by admin