Close

*FREE* - New Music Updates

Get new music and info on GratuiTous.
comment for free sound kit

Welcome to part 9 of Making a Website for Beatmakers series!

We have come a VERY long way. You now officially have a website, and you are ready to take off even without watching the next two videos. However, by watching, you may learn some awesome tricks to help you on your way, which I didn’t know when starting up :).

In this video, which is part 9, we covered a lot to do with CSS. First, we embedded the MyFlashStore player. I then went a bit off topic, showing you about Floating.

Float

Floating is an amazingly powerful tool, allowing your text to beautifully wrap around your images, while maintaining an appealing structure to your content!

As you can see, I’m being silly, and showing off a bit of my CSS skills with that big purple box floated to our right. No, that is not an image, it’s just text I wrapped around one of those <div> tag! (As you can also see if you hit CTRL + SHIFT + C on the Float text, I used inline-css. In other words, I didn’t create a class — Oh my! ­čśë — remember inline-CSS is not the best way of doing things, but at times like these, it’s quick and easy).

Also to prove it’s not an image, try to highlight the text to copy. That’s how you know it’s not an image!

But really, as you can see, the float looks so nice, it allows you to fit your images, or silly float squares, but still be able to read the blog post fluidly! (It also makes your post look fuller, so if you have trouble writing lots of words, an image floated to the right or left fills up space, and keeps it looking professional!).

Putting a DIV Around MyFlashStore,

Now, when we put the <div> tag around the MyFlashStore player, you saw how much space it gave us around it, even without using padding etc. This was okay, depending on what you want to use it for, but I liked when I added the CSS style inside the iframe with the aligncenter style.

Remember, if you want to add two or more classes, just put a space in between them:

<div class="yourCSSCLASS anotherCSSCLASS thirdCLASS"> </div>

CSS to Make Your Website Pretty,

Just overall, part 9 of this series showed you what you are capable of doing with CSS, and how you can implement cool ideas into your website, allowing your website to be more dynamic (more fun, things can move around), and allow for a prettier look to your website. (A nice website always compliments a nice beat right ;)).

Creating your Own CSS Class,

As you saw how easy it is to create your own CSS class, this allows you to recall this CSS style anywhere on your website while you’re writing your content! You can name the class what ever, just try not to duplicate words. Keep them original.

Creating a Button with your Own CSS Class

Now, you saw how we created a button in the video. This again, allows for a more fun website, especially when you hover your mouse over stuff, and special things happen!

Using position:relative and the :hover, we made the button move down on hover, and it goes back to its original place when the mouse leaves the object. (See the previous and next post buttons below for an example). Also, using the cursor:pointer gives your button the hand icon! Another thing to mention on hover: is if you use transition, you can delay the time of how quick things move, or the color change!

Example:
.classname { transition: .4s;}

But, one thing I didn’t show, is how to make the button actually work when you click on it. (I think with PayPal, when you create the PayPal button within the PayPal website, there is an option to include your own button.. I haven’t done that sorry). But, if you want your button to link to a certain page, you would use the code below:

<div><a href="Website URL">Your Text</a><div>

Or sometimes you can get away with putting the class within the <a! — Which remember, is called an anchor:

<a class="classname" href="Website URL">Your Text</a>

Next Video — Conclusion,

So the next video just ties everything together, going over most things we’ve talked about through these videos.

If you followed from Part. 1 till now, awesome! — I hope you enjoy you’re new website, and should now be off to a great start. All this information takes a lot of time to learn, but when someone breaks it down like this, wow it can make things easier :).

To watch the next video, simply click next, or to go back, hit previous. To start from the beginning, click here!

free fl studio music course

Repay Me with a Comment Below !

how-to-master-loud-example

Take my FREE Production Course

These emails are aimed to make you a better producer. Learn why I do certain techniques, and see my favorite tools in the industry.

You have Successfully Subscribed!

how-to-master-loud-example

Take my FREE Production Course

These emails are aimed to make you a better producer. Learn why I do certain techniques, and see my favorite tools in the industry.

You have Successfully Subscribed!

how-to-master-loud-example

Get More Videos +Tips

I've been producing music very actively since 2011. I've also worked with a GRAMMY Nominated artist, too!

Let my experience help speed up your FL Studio learning process.

I've created a series of emails to help you become a better producer.

You can also email and ask me questions at any time! :)

You have Successfully Subscribed!

Take my FREE Course

Let my production experience help you learn quicker.

You have Successfully Subscribed!

Share This