Thursday, 13 October 2016

Back to Basicss

Back to Basicss

Styles, styles and more styles. CSS sure comes packed with styles! This weeks' lesson in CSS was jam packed with styles. This week we styled paragraphs, headings, text, lists. We also used color in a variety of different way. Hexadecimal colors are colors represented by 3 or 6 numbers and/or letters from 0 to 9 and from a to f respectively, with #000 representing black and #fff (#ffffff) representing white. 

RGB (Red, Green, Blue) colors are created by using different volumes of each of the primary colors. Their ranges are between 0 and 255. Rgb(255,255,255) represents white and rgb(0,0,0) represent black. Another way to use rbg colors is with the use of opacity. Rgba(0,0,0,0) would represent black with an opacity of 0, meaning it is fully transparent. Whereas rgba(255,0,0,0.5) would represent red with semi-transparency. 

We also touched on the positioning of elements using the 'text-align' property to align text within a container and how to center a container. Centering a container can be done in a few different ways, but one of the most common ways is to set the width of the container or div and then to set its margins on both sides to auto. The margins can also be set manually. For instance, if a container is set with a width of 70%, setting the margin on each side to 15% and 15% will center the div also.

Furthermore, we went on to style out text with font stylings, first setting up the font family for the text and then styling the text with properties such as italic and oblique. Text decoration was next in line and we styled our anchor links as we wanted them to appear depending on which state they were in. Using pseudo selectors, it is possible to style an anchor link or href link when the link is being hovered, is active or has already been visited. Styles such as text underline, line-through and color changes are normally used for each of the behaviors set through pseudo selectors. It is also possible to use these pseudo selectors on divs or other elements when they are hovered to produce effects, which is what I did on this weeks assignment.

The Assignment
This weeks assignment was to build a website explaining all about css and to use jsFiddle to display our uses of css. Our css styles were then embedded through the use of iframes on the website.

Still loving the CSS. Bring it on! 

No comments:

Post a Comment