Explains an overview of CSS. Cascading Style Sheets have cured the symptoms of a boring internet by presenting the possibility of formatting and styling.
While HTML is the heart of the internet, CSS provides the beauty. This quiz was designed to test your technical knowledge of CSS and not the graphic design portion. After completing this quiz, you will get a sense of how well you know how to manipulate CSS properties and classes. If you score well, you should consider moving onto a real programming language like JavaScript that will allow you to do even more advanced web development.
As of now, we only provide a standard CSS quiz that is not intended to be a professional test. There might be the possibility to integrate a testing system into After Hours Programming, but we are not currently working towards that goal.
Setting the CSS Background property of an HTML is easy! It provides one of the greatest changes you can do in styling with the least time required. With only 5 properties, this will be a relatively simple tutorial.
Styling the Background
Common Properties:
background-color – sets the background color
background-image – links to an image and displays it in the background
background-repeat – for HTML elements larger than the background, it determines which way to tile repeat the image
background-position – sets the background position
We have a div with the class of special that has a few line breaks and some text to make it taller. In our CSS, we use background-color set to “#090” (Green) that will be the color of the special div’s background. Next, we set the background-image to a URL that is a reference of “images/smiley3.gif”. The background image needs the url(”) where your link will go in between the single quotes. Quick note here, it might seem like a conflict of interest to set a background color and a background image, but the background color is more of a fallback for what the background image doesn’t cover.
The background-repeat property by default is declared as “repeat”, which commands the browser to repeat the image horizontally and vertically. You must override that property if you expect anything different, just like how we only wanted horizontal repeating, hence the background-repeat set to “repeat-x”. Last and close to least, is the background-position property. Normally, you would not use this with a repeating background image, but I have done so for illustrative purposes. You can utilize this property to position the background wherever you would like, but recognize that it is only useful if the image is smaller than the HTML element.
Welcome to the classy web world of style using CSS. Cascading Style Sheets are arguably one of the greatest things that happened to the web just over a decade ago. As you were writing your HTML in the previous tutorial, you might have thought that building a web page was lacking something. CSS is not only beautiful and stylish, but it is also very efficient.
Cascading Style Sheets reside on the client side, which means the user can, with the correct knowledge, see all of your CSS files. Style Sheets were invented because the internet was plum boring due to the creators being scientists who were primarily interested in using the internet as a medium for communication (At least, that’s how I’ll write the history books on it). Kudos to them on developing the internet though.
While the internet is awesome, thank goodness we have the World Wide Web Consortium (W3C). Some genius over there said, “Hey, let’s make styling into a file type so we can have other pages link to it.” He is my unnamed hero. This means you can create billions and zillions of HTML files using a particular naming structure on the HTML elements and 1 CSS file that can style all of them. That’s right, you don’t have to go into the HTML files to change the style. Isn’t it so beautiful?
