Whitley's School of Art and Design

ANATOMY 101 LESSON 1: Facial Anatomy Step-By-Step

1. The upper edge of the eyes' y-level is 2/5 the way down from the top of the head
2. The bridge of the nose y-level is 3/5 the way down from the top of the head
3. The lower lip's y-level is 4/5 the way down from the top of the head
4. The middle of the eyes is the same y-level as the top of the ears.
5. The top of the upper lip is the same y-level as the bottom of the ears.
6. The inner tip of each eye is the same x-level as the outer points of the nose.
7. The outer tips of the lips's x-level goes 1/3 the way into the eyes

BBCODE AND CSS 101 LESSON 1: Styling a button

Here we have code for a button! Today, we'll learn how to style it. First, let's review our BBCode.

• [center] will center the button inside of our container.
• [url=link] will link to where we want our button to take us.
• [sc=mybutton] will load the style of our button. Inside here is where we'll label our button.
• [/sc] will end our styling.
• [/url] will close out our link.
• [/center] will stop centering anything below that point.

Next, let's color our button. Open up a [style] tag at the beginning of your post, and close with [/style] right before your post content starts. Inside, we'll define our button style. Like so. In between the brackets { } is where we'll add our coding for colors. to start, the color: tag defines text color. the background-color: tag defines the box color. We'll also want a red text-shadow:, You'll see why later. So since we want a red box with a red text shadow and black text, we'll type: Make sure to close out each line with a ;, otherwise, both that line and the one below it won't work. Now, we'll add our border. To get a uniform border all around, you only need to specify one border: line. However since we have 4 border colors on our button, we'll be using border-left:, border-right:, border-top:, and border-bottom: like so. Now, we need four extra lines to make our button really work and look good. display: inline block; will make our button flow with text, and center like it too. width: will set how big our button gets. padding: will add extra space around our box so our text has a little breathing room, and box-sizing: border-box; makes it so that even though we're adding padding, our box won't go over it's set width. So let's add that. But we're not done yet! We want our button to change color when we hover over it, and when we click on it! So we're going to be opening up two actions by our classes: .mybutton:hover{ } and .mybutton:active{ }! Hover changes color on, well, hover-- and active changes color on click. And now we can see our beautiful text-shadow on an action, too! And there you go! You have a button code that you can put into any template! Good work!

Try it yourself! Post your custom button below!