# 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.

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9FQHz1_Li93yu8I7%2Ffigure3-b-1.png?generation=1524162448002131\&alt=media)

\
&#x20;**Figure3.2.1** \\

* In-page: The CSS instructions are placed on the HTML page itself
  * (used sometimes but often is not utilized)

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9FUJ19k4CWPB0KP2%2Ffigure3-b-2.png?generation=1524162445273094\&alt=media)

\
&#x20;**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

* \\

* ![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9FXWqBvQxt3E5-yk%2Ffigure3-b-3.png?generation=1524162445236984\&alt=media)

* \\

* &#x20;

* **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.

* \\

* ![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9F_1bHkrKlwiTP4Q%2Ffigure3-b-4.png?generation=1524162445205083\&alt=media)

* \\

* &#x20;

* **Figure3.2.4**

* \\

* \\

* ![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9FbGl_zDx3hvxu_n%2Ffigure3-b-5.png?generation=1524162445119408\&alt=media)

* \\

* &#x20;

* **Figure3.2.5**

* \\

* ![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9FchxRT2Nmt7Pb7g%2Ffigure3-b-6.png?generation=1524162445165687\&alt=media)

* \\

* &#x20;

* **Figure3.2.6**

* \\

* \\

* \\

* ![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9Fji0GtghVFb6nqR%2Ffigure3-b-7.png?generation=1524162447896970\&alt=media)

* \\

* &#x20;

* **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

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9FpY2F3kKJyQL7Ej%2Ffigure3-b-8.png?generation=1524162447022731\&alt=media)

\
&#x20;**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
* \\

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9FyEeDYqWEzDknAQ%2Ffigure3-b-9.png?generation=1524162448490937\&alt=media)

\
&#x20;**Figure 3.2.9**\\

## 3.2-5 Selectors, Id's and Classes

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9G-_vbC5Bu7uoTUD%2Ffigure3-b-10.png?generation=1524162448037392\&alt=media)

\
&#x20;**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:

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9G5zdKLFhD4KyL1p%2Ffigure3-b-11.png?generation=1524162445242776\&alt=media)

\
&#x20;**Figure3.2.11**\\

* And here is simple layout that this would create:

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9G9XJ8rMqaTnig1i%2Ffigure3-b-12.png?generation=1524162445407890\&alt=media)

\
&#x20;**Figure 3.2.12**\\

* There is a lot going on here so lets take a look at each portion.

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9GDTFPjuflpUVr7P%2Ffigure3-b-13.png?generation=1524162445272889\&alt=media)

\
&#x20;**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.

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9GHZa011avnOwBlN%2Ffigure3-b-14.png?generation=1524162446818270\&alt=media)

\
&#x20;**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.

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9GUFmT-BgxFossve%2Ffigure3-b-15.png?generation=1524162445268509\&alt=media)

\
&#x20;**Figure 3.2.15**\\

* I have styled each one of these individually for training purposes:

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9GYrywvfkcArD7gH%2Ffigure3-b-16.png?generation=1524162445225646\&alt=media)

\
&#x20;**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.

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9Gg96ju2_Xkb8GtW%2Ffigure3-b-17.png?generation=1524162445269749\&alt=media)

\
&#x20;**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.

![](https://3655427354-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YgLeOAPkcVWFLEH%2F-LAU9DmZ2nbaYbktUwVQ%2F-LAU9GlpZe0WLMAKtZWq%2Ffigure3-b-18.png?generation=1524162445248861\&alt=media)

\
&#x20;**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:

```
 selector:pseudo_class { property: value; }
```

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.
