Reproduced with permission of the authors. Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Further reproduction or distribution is prohibited without written permission.
id
attribute

Spatula City! Spatula City!

Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers <q>esplode</q> with splendor!

Visit  textpad.com to get the TextPad editor.

View our Mission Statement

#
#mission { font-style: italic; font-family: "Garamond", "Century Gothic", serif; }
Spatula City! Spatula City!
Our mission is to provide the most
spectacular spatulas and splurge on our specials until our
customers esplode
with splendor!
mission
p#mission {
class
attribute

Spatula City! Spatula City!

See our spectacular spatula specials!

Today only: satisfaction guaranteed.

I don't want ALL paragraphs to be yellow, just these three...)
id
, a class
can be reused as much as you like on the page.special { /* any element with class="special" */ background-color: yellow; font-weight: bold; } p.shout { /* only p elements with class="special" */ color: red; font-family: cursive; }
Spatula City! Spatula City!
See our spectacular spatula specials!
Today only: satisfaction guaranteed.
special
, or a p
with class shout

Spatula City! Spatula City!

See our spectacular spatula specials!

Satisfaction guaranteed.

We'll beat any advertised price!

See our spectacular spatula specials!
Satisfaction guaranteed.
We'll beat any advertised price!
.special { background-color: yellow; font-weight: bold; } .shout { color: red; font-family: cursive; }

a section or division of your HTML page (block)

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

See our spectacular spatula specials!
We'll beat any advertised price!

an inline element used purely as a range for applying styles

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

See our spectacular spatula specials!
We'll beat any advertised price!
span
selector1 selector2 { properties }
selector1 > selector2 { properties }

Shop at Hardwick's Hardware...

The best prices in town!

Act while supplies last!

li strong { text-decoration: underline; }

Shop at Hardwick's Hardware...

The best prices!

Act while supplies last!

#ad li.important strong { text-decoration: underline; }
h2 { border: 5px solid red; }
| property | description |
|---|---|
border
|
thickness/style/size of border on all 4 sides |
px
, pt
, em
, or thin
, medium
, thick
)none
,
hidden
,
dotted
,
dashed
,
double
,
groove
,
inset
,
outset
,
ridge
,
solid
)
| property | description |
|---|---|
border-color ,
border-width , border-style
|
specific properties of border on all 4 sides |
border-bottom ,
border-left , border-right ,
border-top
|
all properties of border on a particular side |
border-bottom-color ,
border-bottom-style , border-bottom-width ,
border-left-color , border-left-style ,
border-left-width , border-right-color ,
border-right-style , border-right-width ,
border-top-color , border-top-style ,
border-top-width
|
properties of border on a particular side |
| Complete list of border properties |
h2 { border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double; }
border-bottom-width
above)border-radius
p { border: 3px solid blue; border-radius: 12px; padding: 0.5em; }
This is a paragraph.
This is another paragraph.
It spans multiple lines.
| property | description |
|---|---|
padding
|
padding on all 4 sides |
padding-bottom
|
padding on bottom side only |
padding-left
|
padding on left side only |
padding-right
|
padding on right side only |
padding-top
|
padding on top side only |
| Complete list of padding properties |
p { padding: 20px; border: 3px solid black; } h2 { padding: 0px; background-color: yellow; }
This is the first paragraph
This is the second paragraph
p { padding-left: 200px; padding-top: 30px; background-color: fuchsia; }
This is the first paragraph
This is the second paragraph
| property | description |
|---|---|
margin
|
margin on all 4 sides |
margin-bottom
|
margin on bottom side only |
margin-left
|
margin on left side only |
margin-right
|
margin on right side only |
margin-top
|
margin on top side only |
| Complete list of margin properties |
p { margin: 50px; background-color: fuchsia; }
This is the first paragraph
This is the second paragraph
p { margin-left: 8em; background-color: fuchsia; }
This is the first paragraph
This is the second paragraph
p { width: 350px; background-color: yellow; } h2 { width: 50%; background-color: aqua; }
This paragraph uses the first style above.
| property | description |
|---|---|
width ,
height
|
how wide or tall to make this element (block elements only) |
max-width ,
max-height , min-width ,
min-height
|
max/min size of this element in given dimension |
auto
marginsp { margin-left: auto; margin-right: auto; width: 750px; }
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
width
is set (otherwise, may occupy entire width of page)
text-align: center;
float
property
(reference)
| property | description |
|---|---|
float
|
side to hover on; can be left , right , or none (default)
|
 Borat Sagdiyev (born July 30, 1972) is a ...
img.headericon { float: left; }
div
s from being aligned to floated...
float
ing content and widthI am not floating, no width set
I am floating right, no width set
I am floating right, no width set, but my text is very long so this paragraph doesn't really seem like it's floating at all, darn
I am not floating, 45% width
I am floating right, 45% width
width
property value
width
is specified, other content may be unable to wrap around the floating elementclear
property
p { background-color: fuchsia; } h2 { clear: right; background-color: yellow; }
Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ...
| property | description |
|---|---|
clear
|
disallows floating elements from overlapping this element; can be left , right , both , or none (default)
|
div#sidebar { float: right; } p { clear: right; }

 Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ....

p { border: 2px dashed black; } img { float: right; }
p
containing the image to extend downward so that its border encloses the entire image
overflow
property
p { border: 2px dashed black; overflow: hidden; }
Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ....
| property | description |
|---|---|
overflow
|
specifies what to do if an element's content is too large; can be auto , visible , hidden , or scroll
|

the first paragraph

the second paragraph

the third paragraph
 Some other text that is important

p { float: right; width: 20%; margin: 0.5em; border: 2px solid black; } div { border: 3px dotted green; overflow: hidden; }
position
property
(examples)
div#ad { position: fixed; right: 10%; top: 45%; }
| property | value | description |
|---|---|---|
position
|
||
static
|
default position | |
relative
|
offset from its normal static position | |
absolute
|
a fixed position within its containing element | |
fixed
|
a fixed position within the browser window | |
top ,
bottom , left ,
right
|
positions of box's corners |
#menubar { position: absolute; left: 400px; top: 50px; }
absolute
or relative
positioning)top
, bottom
, left
, right
valueswidth
property as well#area2 { position: relative; }
absolute
element in an element whose position
is relative
text-align
vertical-align
vertical-align
property| property | description |
|---|---|
vertical-align
|
specifies where an inline element should be aligned vertically, with respect to other content on the same line within its block element's box |
top
, middle
, bottom
, baseline
(default), sub
, super
, text-top
, text-bottom
, or a length value or %
baseline
means aligned with bottom of non-hanging lettersvertical-align
example
  Don't be sad! Turn that frown  upside down!  Smiling burns calories, you know.  Anyway, look at this cute puppy; isn't he adorable! So cheer up, and have a nice day. The End.

padding
and margin
of 0vertical-align
to bottom
fixes the problem (so does setting line-height
to 0px
)width
, height
, min-width
, etc.) are ignored for inline boxesmargin-top
and margin-bottom
are ignored, but margin-left
and margin-right
are nottext-align
property controls horizontal position of inline boxes within it
vertical-align
property aligns it vertically within its block box
display
property
h2 { display: inline; background-color: yellow; }
| property | description |
|---|---|
display
|
sets the type of CSS box model an element is displayed with |
none
, inline
, block
, run-in
, compact
, ...

Item 1

Item 2

Item 3

#topmenu li { display: inline; border: 2px solid gray; margin-right: 1em; }
visibility
propertyp.secret { visibility: hidden; }
Since nobody can see this anyway: ca-ca poo-poo pee-pee!!!
| property | description |
|---|---|
visibility
|
sets whether an element should be shown onscreen; can be visible (default) or hidden
|
hidden
elements will still take up space onscreen, but will not be shown
display
to none
insteadopacity
property
body { background-image: url("images/marty-mcfly.jpg"); background-repeat: repeat; } p { background-color: yellow; margin: 0; padding: 0.25em; } p.mcfly1 { opacity: 0.75; } p.mcfly2 { opacity: 0.50; } p.mcfly3 { opacity: 0.25; }
Marty McFly in 1985
Marty McFly in 1955 fading away, stage 1
Marty McFly in 1955 fading away, stage 2
Marty McFly in 1955 fading away, stage 3
| property | description |
|---|---|
opacity
|
how not-transparent the element is; value ranges from 1.0 (opaque) to 0.0 (transparent) |
class
and id
attributes, rather than through the tag elements themselves


Utopian.io is a wonderful project which I'm really proud to be part of. We are empowering a community of people to create awesome projects using free and open-source software. We are building tools to help them grow and sustain their projects in the long-run.
I was hired to work in the development of the 2nd version of the platform (Utopian v2). And we're using Node.js for the backend and vue.js with the Quasar framework in the frontend. The platform is built on top of the Steem blockchain and will integrate with some of the biggest blockchains out there.
During the 9 months I was working at Swapy, I learned a lot about blockchain, business, and development. I had a lot of fun going through a few challenges, such as connecting a Chrome extension (MetaMask) within an Electron application and using uPort to manage identity in our dapp. It was a great experience, especially because of the team. We built a strong culture of learning with our mistakes and improving ourselves as developers, at the same time we became great friends. After working for 2 years as a fully-remote employee, I was missing the social relationships that are developed within a company's office, so that was really great for me.
After start working at Swapy, I became a lot more interested in blockchain and its potential to change the world. Today I'm really enthusiastic about this technology, which I truly believe that it will bring great progress to our world.
I was hired to work as a Frontend Developer, but since the beginning, I got involved with the backend as well. In Nebulab we developed a tool to help researchers throughout the data management process that can be very complex. From data storage to contextualization, the software handles different kinds of research data and on top of that is built for a strong teamwork among lab members, including task management, role/permission management, etc.
Since we were a small startup with just 3 engineers, we were always involved in all the process of developing the products, from creating new features to managing data in S3 servers. So in the past 2 years, I've been involved with AngularJs, NodeJs, Mongo, MySQL, Redis, Amazon AWS and S3, Codeship and many other tools, as well in the business side where we all worked together doing customer development and market research.
This was my first job and I was hired as an intern to work in the development of an internal tool for Teknisa. The software was a "visual" tool to build cross-platform apps called Developer Studio. During the 1 year that I worked there, I became the lead developer of Developer Studio and learned a lot in the process.
In this job I worked with AngularJs, PHP, MySQL and had my first contact with simple scripts in NodeJs.


For the Mac Movie Makers
We've focused pretty heavily on iMovie here. iMovie comes preinstalled on your Mac, it's free, and it's easy to use. It also makes editing soundtracks and syncing them up with your film as easy as editing your video. Below that we've listed some additional software available from the app store. We've also included a couple iphone apps for those of you who want to film and edit your video all in one place.
Everything You Need to Know About iMovie
iMovie has pretty much everything you need to make your basic amateur film. Just beware of overusing the sound effects or transitions - remember restraint is key. We've got two options for you here for tutorials: The comprehensive tutorial is about a half an hour. It's kind of long (I highly recommend watching it at double speed), but it covers a lot of great features and will help you elevate your film editing. The quick and dirty tutorial teaches you all the basics in about five minutes.
Other Options
Below are a few additional optons available for iOS and OSx. Some of these are strong and powerful, while others will need to be used in conjunction with other tools like iMovie. Try them out and see what you think.
- VidLib - a library of often affordable stock video footage to round out your film (available for iOS and OSx).
- Screen Record Lite - an excellent simple screen record software for capturing video of the action on your computer screen.
- Splice - a simple iPhone/iPad video editing tool for cropping, borders, transitions, and more.
- Magisto - an iPhone/iPad app that automatically edits stills and video footage into a coherent video. We're not sure how it works, but it's a pretty cool concept for the lazy editors out there.


If you're using a fairly new browser, you should see a somewhat realistic fire simulation to the left.
This is a fire simulation based on the same code I wrote for a cartoonish fire simulation. I got inspired by those simulations (select one of the fire simulations) that a commenter on reddit posted.
You can fork the code on github: https://github.com/zufallsgenerator/firesimulation
Options for tweaking the fire simulation.
Run the actual fire simulation.
 (May cause artefacts if over 100)
A weight of the cells own value when calculating the new one under influence of adjactent cells.
Fuel power, upper bound.
Fuel power, lower bound.
Influence of cells to the side of the cell
The variance of influence for horizontal cells
Influence of cells to above and below the cell
The variance of influence for vertical cells
Normalizer value to compensate for changes in other variables. Example: when raising horizontal influence, decrease this value to compensate.
An offset used for calculating color of a cell. The higher the value, the more white areas.


My quiz title.
Which of the following were not Beatles?
John
Paul
Charlie
Ringo
Yoko
What is your opinion of the color green?


NODAL / IN 3 Selects nodes inside a rectangular area
This operation builds a fence and selects the nodes inside.
Move the cursor to one corner of the fence and press 3.
Rubber banding enabled.
Move the cursor to the diagonal corner and press 3.
The nodes inside the fence are added to the NODAL buffer.
Nodal / OUT 3 UN-Selects nodes inside a rectangular area


To display the contents of a directory that is listed in the directory
list table, just double click on that directory or right click on the
directory and, choose
Open
from the context menu.
To traverse one level up in the directory tree, click on the button located in the top-right corner of the remote pane.
If you have a filter set up, only files that match your filter criteria are displayed in the directory list table.


Default Disabled With event listener Multiple disabled Label This is a custom label text Accepts "image/*" Shows previews Reset Shows previews without preserving Max File size 2kb Custom styling Drop it! This is a test Custom styling disabled Custom styling with preview


This site will allow you to create new blog posts and publish them immediately to the client applications. It's important to carefully review the content you create before you post it because, currently, this site doesn't allow you to remove posts once you create them.
If you spot any bugs, send an email over to<EMAIL_ADDRESS>and he'll figure it out! If he doesn't respond, feel free to tweet him at @PatConrey.
Here are all the current posts. We're showing their titles and the pictures associated with them. As of now, these are just for display. You can't click them or otherwise interact with them. They're just here to give you a quick look at what's already out there.
To create a post, just fill in the information below. If you want to add a picture to the post, select "Attach Image". The preview on the right gives you an idea of how the post will look on the client. Of course, some sizing will be different, but it is important to consult the preview before publishing the blog to ensure that all data was entered correctly.
After you publish the post, you will receive verbal confirmation by some text saying that your post was successfully published. The post should also pop up under the "Current Posts" section immediately. If it doesn't, your post might not have been published. Wait a little bit and check back. If it still hasn't popped up, publish it again.