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; |