Adding some style *CSS Tribute*

Taking a break from Javascript we’re going to delve into a bit more styling to show how with simple CSS you can quickly change the look of a page. From what we learned earlier you can identify elements in your html file and through assigning them certain ID’s call that in the CSS file and alter them to your liking.

For example leets take the basic html File I have about myself. First lets go ahead and add a image with the <img> element but were not going to explicitly state the height and width so we can have the element move within it’s parent.

Now that we have an image lets dive into some css starting with the html document itself we’re going to set the global font to something more appealing and sans-serif;

Next we’ll enter the body element and have all the text align to the center of the document and set the margin: 0 so there is no gap between the elements.

From here lets enter into the div with an id of img-div by using a #img-div and inserting our style in the curly brackets { max-width: 100%; display: block;} and move on to the img element with an “image” id.

This is where we will drastically see our document take a stylish turn. Setting the display to block, height: auto & max-width: 40% will turn our image into an automatic adjusting image based on the view window’s interaction with the img-div size. Make the window larger/larger device = larger picture.

And adding some margin-left / margin-right auto adjustment allows for the picture to fit very nicely center. Thereby completing and altering our normal html document into something & dynamic and very different from where we started off!