The purpose of this page is to work on your styling skills. As you do your styling change make the changes in your style sheet. In this case it is bryan.css. Make whatever html changes to this page you want. Practice different ways of achieving the same effect.
To start, copy the content of this page and create your own under your main page. This will then become the page you will be working on.
To help you with this learning go through the W3Schools CSS tutorial. It does a really good job of explaining and showing. Practice with their local examples and then apply it here on this page. As you get excited about CSS it is ok to jump around and try new things. Just come back to where you left off and keep going.
Some Design Implementation Basics for This
Your browser has an "inspect" capability. It is vital to doing styling on a website. Right click on the page you want to click and select "inspect" or whatever is like it in the specific browser you use. It will bring up the html behind the page and show you the CSS that is currently being applied. It will even show you what CSS is being overwritten, but that if for a future discussion.
The aspect here that is critical for now if finding out what unique identifier is being applied to your page. Being learning that you will be able to target only this page for styling. Otherwise, you run the danger of targeting the whole website with your styling. This will make more sense as we go forward.
Let us take Bryan's page as an example of how we found his unique identifier. Every page has a class assigned to that page as "page-node-"number" that can be found in the body section of the HTML.
So, now that we know how to get your unique page identifier you are able to take that and apply it to your css file so that you are only targeting your page. Here is an example of how we do it on Bryan's page.
What is of particular importance here is the space between .page-node-20 and .cool_box. You will play around with this as this spacing or none spacing is important. For your page you will use your inspector and find your page-node-number and use that for all the styling where you only want it to impact your page and not the whole site.
Developer Notes
One of the great aspects of this training is that you will directly experience the challenges of working with dev, test, and live while committing your changes to dev. Remember live is the gold standard for content. NEVER move the db from dev to live in this exercise. In the end whatever content changes you make you need them to be up in live to keep them. So you can either begin with them in live and keep pulling them down to dev or make them in dev and then copy or duplicate them in live.
The paragraph above refers to content. As for your code/styling changes you will do them locally and git push them to dev. Once ready, you will need to push them up to test and live. Keep in mind that others are working on this too so every time you start do a git pull. The additional advantage of that is you can look at the styling they have done and learn from them.
A word of caution. Your content work in dev is not, not, not protected. If one of your fellow developers pulls the database back from live to dev it will overwrite whatever changes you have done. You have been warned!
Flush Cache
When you make styling changes and push them for local to dev and then test and live make sure you flush the caches. This can be very frustrating if you forget this and wonder why your changes are not taking affect.
Start Playing
Here is a Box for you to style
Here is a paragraph for you to play with. Change the font size and tyle. Change the color of the text and the background color.
Header 2
Here is a header 2 above. Play with it. Change the color and maybe even the style or font.
Header 3
Do the same with this header. As you do this, check on other pages to see if your styling changes are impacting all the other H3s or just the ones on this page.
Random Stuff
There are a variety of random things that we regularly style. One of them is buttons. Learning to change their background color and font color is important. Additionally, sometimes we get asked to change how they appear when they are hovered over and clicked.
Tables are also a item we frequently style. Learn how to make them appear differently in the form of borders, background color, background color by row, color by row, etc.
Two in-line boxes
Turn the two divs below into side by side boxes with different background colors and font colors. Play around with the borders, padding, and margines.
I am box 1: Make me beautiful
I am box 2: Make be cool!
!important
This is an important concept and it is the concept of overriding other styling with the word !important. Review the W3Schools section on this and then override the styling on this box below. Something to note about this example. Part of this little exercise is to learn that there are often many different ways you can achieve the styling you want. !important is often the least preferred method because it can have unintended consequences. So, play around and see how they do this.
Hahahahaha! I am laughing at you and your lack of ability to override this!