3.2: CSS
3.2 CSS Review
3.2-1 quick review
Short for cascading style sheets
Cascading style sheets are used to format the layout of webpages in a uniform manner across a entire website.
By using preexisting HTML tags as well as existing platform tags we can make large changes quickly to a entire install of a platform.
3.2-2 CSS Methods
There are three approaches to applying styles:
In-line: The CSS instruction is applied to the tag itself using a tag's style attribute.
Used in dire situations where style needs to be added but can not be changed unless it is hard coded.
Figure3.2.1
In-page: The CSS instructions are placed on the HTML page itself
(used sometimes but often is not utilized)
Figure3.2.2
CSS file: The CSS instructions are placed in a separate file and the HTML page contains a link to that file.
Most common way of adding CSS to page
Figure3.2.3
3.2.3 The CSS Structure
In this example the style will be applied to every h1 tag found in the site. Here is a break down of a h1 selector/tag broken down in to the simple basics of CSS:
Selector - the tag or selectable portion of the HTML or web page
Properties - the types of attributes that can be changed or managed
Values - the input type for each property
Brackets - the symbol that separates the selector from the property and values.
Figure3.2.4
Figure3.2.5
Figure3.2.6
Figure3.2.7
3.2-4 Margin, Spacing, Borders
CSS treats all html elements as being contained inside a box. The box has properties we can use to create borders, padding, margins. Both inline and block elements have these properties and the block element also has a width property but inline elements do not
Figure3.2.8
To be able to use spacing methods you will need to use the different types of measurement used in CSS. Here is a quick breakdown
px - Pixels are the default measurement type if none is specified.
% - Percent - used to define a percentage of the screen or area
em - Relative to the font-size of the parent, so if a parent tag such as our heading tag in the prior example is 24px; and the font-size in our em tag above is set to 2 em then the text within the will have a font-size of 48 pixels
rem - Relative to the font-size of the root element, i.e., the html tag that contains the web-page. If the page font-size is set to 48 pixels and the em tag is styled with a text-size of 2rem then the text within the <em></em> tags will be 96 pixels
Figure 3.2.9
3.2-5 Selectors, Id's and Classes
Figure3.2.10
Levels, ids, and classes are used through out CSS in different ways to create inheritances and maintain certain tags and element types.
class: started by a hardstop (".") can be used to identify multiple elements ("youandme")
id: beginning with a hash character ("#") can be used to identify a single element ("bowieblock")
Here is a quick example of how to code each style sheet selector to make sure your property values are taking effect:
Figure3.2.11
And here is simple layout that this would create:
Figure 3.2.12
There is a lot going on here so lets take a look at each portion.
Figure 3.2.13
There are 2 class assigned in the top that give some simple formatting that will be in whole page and a single id to allow for individual styling if needed.
Figure 3.2.14
The styles are very simple but have a method. This code makes sure to keep the posting function (float) at the top level so I can keep a inherit value for all separate div's inside that class. I am also using a common background color for all divs associated with the youandme class. Although simple, this frame work could be the start of a much bigger project.
To properly code a id to a div the code is:
If you want to only style a single class the code is:
If you want to combined them as one statement:
As you start to move down the HTML and CSS in the page you can see I have some basic html tags in place that we discussed earlier.
Figure 3.2.15
I have styled each one of these individually for training purposes:
Figure 3.2.16
Although simple, these styles can make a fairly large impact on a page and how it looks.
With simple styles organization can become a bit tedious especially when you start wanting to make style changes to entire page without making a global site change. Which brings us in to the next portion of our training.
3.2-6 Nesting
Lets say we want to make a large global change to a entire sites font family. Having a number of HTML tags that have to be styled with a font family could become a bit tedious as well as room for error.
Figure 3.2.17
So to simplify the process you can group the tags into a single line of CSS which allow you to change a number of tag CSS at the same time.
Although this is not the case with most CSS styling.
Figure 3.2.18
Most times this type of format is used to specify a single id or class version of simple tags. In the example above the type based tags have been associated with the youandme class so anything associated with the youandme class would have that type of font family.
3.2-7 Pseudo Classes - links
Although the direct definition of pseudo is fake or not real, pseudo classes are very real hand helpful classes. They are the icing on the cake so to speak.
The break down of the coding would be:
But to better break down what it does lets work with something we have already seen.
Links have to do with the links or the "a" selector of CSS. We have seen this in the breakdown of CSS above with our test page in 2.2.12. If you refer to the above image that I took from our earlier description you can tell that I have used the "a" selector but added the pseudo class of "hover" to the second style in the diagram.
By assigning this Pseudo class you get the above effect of a roll over on your computer screen by "hovering" over your text.
Here are a few more pseudo classes that you can use:
link - to designate a actual link
visited - for links that you have already been to
hover - for the mouse over effect on links
active - for links that you are currently visiting
focus - the touch friendly version of hover
There are a number of other pseudo classes that have to do with single portions of a menu as in "first-child" or "last-child" which if styled with an "a" selector attached to a id or class will only style the first or last menu item. You can also style the first and last element in a "p" tag. This can style the first or last letter/word of a entire paragraph.
Last updated
