External CSS

Using External CSS in the 'head section', the style can be 'linked' to an external css document. We created a css folder in week 8. (Video below - start at 0:60)

Link Element

The HTML Link 'Element': defines the relationship between the current document and an external resource and is most often used to link to external style sheets.

Absolute Sizes

Absolute sizes do not change i.e. when defined by pixels. While absolute sizes allow designers to maintain control over the size of a page, text, images, etc.  I.e.:(H2 margin-left as 0; and margin-right as 0; ) they DO NOT comply with responsive web design techniques.

Relative Sizes

Relative font sizes adjust to the user’s viewing screen and resolution and are related to the number of pixels. I.e: (H1 font-size as 6vw),   or as a % (100%) or a percentage of an em unit, I.e: one em unit equals the font point size (H1 margin-top: 0.67em; and margin-bottom: 0.67em;).

1

Review

Step 1.  Read and Apply Theories: E-Text Chapter 05 Typography. As you learned in previous chapters, web designers use text and images to communicate messages and to set a mood. 

2

Hidden Comments

Step 2.  Use HIDDEN COMMENT tags in your index file to hide the entire opening and closing 'style tags' in your 'head section'.

3

Download

Step 3.  Download, open, and save the attached 'mystyle.css' file into your css folder and modify the styles to match your styles (and color values) in the 'head section' of your 'style' tags.

4

mystyle.css

Step 4.  Refer to your open 'mystyle.css' file in notepad++ to see several style examples mentioned above of font-families, colors, sizes and more.

5

Save & Refresh

Step 5.  Save and refresh your index file in your browser and expand and contract your window back and forth to see the responsive sizes changes as you edit.

6

Modify

Step 6.  Modify the css document 'mystyle.css' as we go along.