Form decorating using CSS

Just wrote a form in my personal portfolio project.,
I have no idea how to style it using CSS.
How do I achieve this outcome???
I will post my prototype and my code in below.

And here are a few things I need to do.

1 Center the whole form. I know some people center their form using

I have no idea whether it is the best way to do it or not. I personally feels it is not.
2 Make the form bigger.

http://codepen.io/zhouxiang19910319/pen/jVqbmg/?editors=1100

1 Like

Play around with padding and margin

After watched a few youtube vids I think I am gonna re do it.
Will post/change the question here once I finish.
Thanks

Give your inputs block display, a little padding and margin and you’re good to go.

1 Like

I used margin, did not work… Also I had no idea how to make the form appear at the center of the page…
I did change some… Add paddings to inputs as well as textarea. You can take a look.

I had a play around with it here http://codepen.io/loomernescent/pen/PbJJLQ?editors=1100

It might help you to use div or section tags to structure your different sections of the page - I’ve put your form in a as an example of what I mean. Your input, textarea selector didn’t seem to be working so I selected the inputs with greater specificity. https://developer.mozilla.org/en/docs/Web/CSS/Specificity.

Wow. Thanks! I’ve been a little bit frustrated with all these small issues lately.
If I have any more questions I will post it here!

And sorry for the late reply.

I’ve found one of the best ways to learn how CSS works is to play around with the DOM in chrome Dev tools. That way you can go in disable / change css and see what its doing. Code Pen doesn’t really make this too easy so you might be better off getting sublime or brackets and working on code locally. You can always copy and paste into Code pen later.
http://discover-devtools.codeschool.com/?locale=en

3 Likes

On change view tab in Codepen, you can hit Debug Mode, which is just like a local build with no codepen influence - very easy to debug in dev tools, I do it all the time whenever I need to quickly create a UI :slight_smile:

2 Likes

Add a little more spice to it :wink:

1 Like

Yeah… I’ve heard a lot of people saying get away from code pen as soon as possible.
I messaged Quincy and he told me to stick with it.
I will take a look at what you said, after I finish this portfolio project.
Still couldn’t wait to get rid of it though. LOL
Thank you for your suggestion!

Hey, I changed some of your codes. And achieved a pretty much same result. If you are interested. Here it is:

http://codepen.io/zhouxiang19910319/pen/jVqbmg/?editors=1100

Also do you know how am I supposed to move the word contact a little down , a.k.a having a little space between the word contact and the grey area I had above it??? I tried padding… did not work…