Friday, November 21, 2014

Lesson 7: More on Array; then Intro to Stylesheet

I want to do last example of array.

Do you think you can do this planet display? I found all the images from wikipedia.

To make this happen, naturally you will need array to hold the image and names. Then you assign a function to the buttons to change the index and then do something with it!

Styles

Styles can be hard coded, but generally not a very good practice

<h1 style="font-size:60px;font-family:Tahoma;color:red">big header</h1>

Better practice is to define overall styles and add named styles.

Stylesheet

Stylesheet is the real power of modern web site programming... Programmers can focus on the logic and designers can focus on styles. Stylesheets usually lives in its own CSS file. <link rel="stylesheet" type="text/css" href="mystyle.css">
Javascript files usually lives in its own file too: <script type="text/javascript" src="somefile.js"></script>
<!--
CSS is real powerful.
You are defining your own style. It uses "selector".
Usually it is in its own file.

# is for a specific id
. is for class

-->



<head>
<style>
h1 {
    font-size: 60px;
    font-family: Tahoma;
    color: red;
}

#para1 {
    text-align: center;
    color: green;
}

.mystyle {
    font-family: Times;
    color: blue;
}

</style>
</head>

<body>

<h1>big header</h1>

some unaffected text

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the para1 style.</p>

<div class="mystyle">
I am some blue thing
</p>

</body>

big header

some unaffected text

Hello World!

This paragraph is not affected by the para1 style.

I am some blue thing
I'd like you to take a look at some of these here: http://www.w3schools.com/css/css_examples.asp.

Take a special look at

Magic time


An useful example of show/hide: validation messages. You can put all your error messages in, but hidden initially, and set style=block to display it in your validation routine.

Enter some positive number please:

No comments:

Post a Comment