Designing your JavaScript game from scratch sort of: CSS

When you start your design, after you put your thoughts on paper or in a software package that can help you with your design like PowerPoint Storyboarding tool which gets loaded when you have Visual Studio Ultimate, Visual Studio Premium, or Visual Studio Test Professional.  If you are a STEM student get the Visual Studio Ultimate from Dreamspark Premium at your school, if you are a professional, hopefully you have a version of MSDN and get one of the versions that way.

If you get Visual Studio Premium and have to download it one time, then the web installer is faster overall, because it downloads and installs at the same time.  For more then one installation you might want to download the iso, in Windows 8 you just have to right click and select mount to use the *.iso image (in the past you had to use a tool like SlySoft to do the installation).

You will need to use the Storyboard in Power point and I have discussed the use of the Storyboard in other blog posts.

In this one let’s take a look at the impact of CSS and how to use it in your HTML code, JavaScript and so forth.

On the HTML you will need to reference your CSS if you create a stylesheet outside of the Default CSS, here I am using the SpaceCadet reference from the Win8Game found at https://win8gamekit.codeplex.com/releases.

At the top of the default.htm you will find two lines of code that look like:

<!-- SpaceCadet references -->
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/css/space.css" rel="stylesheet"/>

There is a default style sheet and another stylesheet named space.css.  With CSS there are all kinds of scary stuff from the filename space.css, so download and take a look at the CSS.  If you are just reading this blog for class (such as CSUDH) or just for pleasure, fine, if you need to learn, really learn, then go to the site: JavaScript Fundamentals, a 21 element series that I am working through looking for material I can reuse in my blog. 

Anyway, I just want to go over some css items:

 

#txtScore {
    font-family: 'Final Frontier Old Style';
    font-size: 50px;
    color: #ffd800;
    text-align: left;
    margin-left: 10px;
}

How did that font show up on the machine that is surely not a shipping font with Windows 8?  Where do you get the color number?  What about font-size? What is margin-left?

Fonts:

font-family: How do you find out the names of the font-family and what happens if the font isn’t on the system?

For instance start with the font you like, “Final Frontier Old Style” then add at least one font that is a “standard” font, some of these are: "times", "courier", "arial", or others.

In this case you would write the font-family in this manner to make sure that one of the fonts display, Final Frontier Old Style have white space and must have quotes around it, times and courier do not:

font-family: ‘Final Frontier Old Style’, times, courier

font-size is obvious, sort of, px is the Pixel size or length.  Here is a table:

Value

           Description

            Example

xx-small

Sets the font-size to an xx-small size

font-size:xx-small;

x-small

Sets the font-size to an extra small size

font-size:x-small;

small

Sets the font-size to a small size

font-size:small;

medium

Sets the font-size to a medium size. This is default

font-size:medium;

large

Sets the font-size to a large size

font-size:large;

x-large

Sets the font-size to an extra large size

font-size:x-large;

xx-large

Sets the font-size to an xx-large size

font-size:xx-large;

smaller

Sets the font-size to a smaller size than the parent element

font-size:smaller;

larger

Sets the font-size to a larger size than the parent element

font-size:larger;

length

Sets the font-size to a fixed size in px, cm, etc.

font-size:length

%

Sets the font-size to a percent of  the parent element's font size

font-size:10px;

Reference: https://www.w3schools.com/cssref/pr_font_font-size.asp

Color of the Font (and colors in general):

Best way to do this is to use Blend for Visual Studio, but if you want to know how the Hex number works for a specific color there is a way to remember them: Memorize the list.  It really isn’t that big right?  Oh…I just use one of the tools on the web, and to irritate people who loath W3CSchool, that is the page I am going to recommend, there are others: https://www.w3schools.com/html/html_colornames.asp.

Text-align

The text-align property specifies the horizontal alignment of text in an element.  Here are some formatted lines:

text-align:center
text-align:left << this is the one in use
text-align:right

Margin-Left

Value

Description

auto

The browser calculates a left margin

length

Specifies a fixed left margin in px, pt, cm, etc. Default value is 0px

%

Specifies a left margin in percent of the width of the containing element

inherit

Specifies that the left margin should be inherited from the parent element

 

Something I wrote about but isn’t in the example, useful, but just included because:

Position:

Value

Description

Example

static

Elements renders in order, as they appear in the document flow. This is default.

position:static;

absolute

The element is positioned relative to its first positioned (not static) ancestor element

position:absolute;

fixed

The element is positioned relative to the browser window

position:fixed;

relative

The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

position:relative;