How to Create Your Own Website

Lecture 2: Styling your pages with HTML and CSS. How to Create Your Own Website

Today’s Lecture: • Cascading Style Sheets (CSS): • What they are. • What they can do. • How they interact with HTML pages. • Several common CSS rules. • Color • Representing color on a website. • Coloring your text. • Coloring the background. • The “web-safe” color palette (not much of an issue anymore). • Dithering. • Fonts • How to use different fonts for your text. • Commonly-installed (“safe”) fonts. • Controlling text appearance. • Font size. • Font style (bold, italic, underline) • Margins and Size • Units (px, %, em…) • Adding space between elements or inside of an element. • Setting width and height. • “Fixed-width” vs. “Fluid” designs. • Borders

Before Getting Creative • So far, we’ve seen how to place new elements on our pages. • Paragraphs. • Images. • Links. • But this is not design. Design involves creativity and aesthetics. • To design, we’ll need to know how to change the appearance of these elements. • How to “style” them. • How can we do this? • In older versions of HTML, attributes were used entirely to do this. • These attributes are still around, and still work. • For instance, <body> has an attribute called “bgcolor”, which allows one to set the background color of a page. • <p> has an attribute called “align” that sets the alignment of a paragraph. • But as HTML evolved, people decided that it would be better to separate presentation and content. • The “content” of the page remains the HTML. • And the presentation is stored in a separate document “linked” to the HTML. • This document is called a style sheet, and is written in a language called CSS (Cascading Style Sheets). • Unfortunately, this means learning CSS as well as HTML. • But CSS allows a great deal of control over the appearance of HTML elements.

Tags for Emphasizing Text • There are several tags that will make the text inside of them stand out in some way: • Headings: (use for section titles, headlines, etc.) • <h1>Heading 1</h1> • <h2>Heading 2</h2> • <h3>Heading 3</h3> • <h4>Heading 4</h4> • <h5>Heading 5</h5> • <h6>Heading 6</h6> • Emphasis: • <strong>Bold</strong> • <em>Italic</em> • <u>Underline</u> • <strike>Strikethrough</strike> • Positioning: • Superscripts: e = mc<sup>2</sup> ( e = mc2 ) • Subscripts: log<sub>2</sub> 16 = 4 (log2 16 = 4) • Text styles: • <address>PO Box 394, Morganville, NJ 07751</address> • <blockquote>”When in the course of human events…”</blockquote> • <cite>--Thomas Jefferson</cite> • Preformatted text: • <pre>The text inside of this tag will print in a fixed width font <em>exactly</em> as it appears in the source code… with the exception that HTML tags can still be used inside of it.</pre> • This is mostly useful for inputting computer code or the contents of comma-delimited text files (such as can be saved from Excel spreadsheets).

Try some of these out!

CSS • A style sheet is made up of declarations, which dictate how elements should be displayed. • These declarations contain selectors, which determine the elements that the declaration will apply to, and • Rules, which dictate how the elements that match the selector will appear. Rules always end in semicolons. • Selectors can select elements by: • Tag names (all “p” tags), • “Children” of an element (“all tags inside of a p tag”), • “Siblings” of an element (“all tags preceding a p tag”). • “Class” of a specific tag, which is assigned by the “class” attribute. • “ID” of a specific tag, which is assigned by the “ID” attribute.

CSS Example • p { • font-size: 20px; • font-weight: bold; • border: 1px solid black; • } • This example will display all paragraphs in a 20 pixel bold font and will surround paragraphs with a 1 pixel black border. Selector Rules

Selector Syntax • tagname { … } • The rules will apply to all tags with that name. • .MyClass { … } • The rules will apply to every element with the attribute class=“MyClass” (classes need not be unique). • #MyID { … } • The rules will apply to the element with the attribute ID=“MyID” (IDs must be unique). • * { … } • The rules will apply to every element.

“Class” and “ID” • “class” and “ID” are attributes that may be applied to any HTML tag. • <p class=“MyClass” ID=“TestP”>…</p> • <body class=“MyClass”>…</body> • You may choose what value to give these attributes. • Many elements may have the same class, but an ID must be unique to one element on the page. • The class attribute may contain multiple classes, separated by spaces: • <p class=“MyClass1 MyClass2”>…</p> • The only purpose of these attributes is to identify the elements (for use in CSS or scripting languages). They will not alone change the appearance or behavior of the element.

Combining Selectors: • These can be combined in several ways: • sel1 sel2 (a space between them) • Select all elements matching sel2 that are descendents of sel1 (inside of sel1’s tags). • sel1 > sel2 • Selects elements matching sel2 that are immediate children of sel1 (inside of sel1’s tags, but not inside of any tags below that level). • sel1 + sel2 • Selects elements matching sel2 that are preceded (at the same level) by elements matching sel1. • sel1, sel2 • Selects elements matching either sel1 or sel2. • And others. • Here are some examples: • p strong, p em • All bold or italic text within any paragraph. • .MyClassimg • All images inside of an element with class=“MyClass”, no matter how deeply nested they are. • #MyID > img • All images immediately inside of an element with ID=“MyID”, but no deeper than one level below it. • h1 + h2 • All h2 headings directly following h1 headings at the same level (i.e., not nested inside of them) • a .MyClass • All elements of class=“MyClass” inside of <a> tags (hyperlinks).

Inline Stylesheets • There are three ways to insert CSS code into your page: • Inline using the <style> tag. • Linked using the <link> tag. • Per-element using the “style” attribute (a common attribute to every tag, like class and ID). • Both of these tags go in the <head> section. • You may insert your CSS directly between <style> and </style> tags in your page. • For example: • <html> • <head> • <title>Bold Test</title> • <style> • p { • font-weight: bold; • } • </style> • </head> • <body> • <p>This is in bold.</p> • <p>This is also in bold.</p> • </body> • </html> • Will result in: • This is in bold. • This is also in bold.

Linked Stylesheets • But this mixes your CSS and HTML, which mixes presentation and content. • That sort of defeats the purpose of CSS. • The preferred way to use CSS is to create a new file (myfile.css) with the CSS code. • That file is then linked into your HTML document using the <link> tag: • For example: • <html> • <head> • <title>Bold Test</title> • <link rel=“stylesheet” type=“text/css” media=“all” href=“paragraphs_are_bold.css” /> • </head> • <body> • <p>This is in bold.</p> • <p>This is also in bold.</p> • </body> • </html> • If you saved the code on the prev. slide into paragraphs_are_bold.css, you’ll see: • This is in bold. • This is also in bold. • You can also use separate stylesheets for printing and viewing by changing the “media” attribute to “print” or “screen”. • That can help you make “printer-friendly” sites. • You can link more than one stylesheet into your HTML document. Just create a new <link> tag for each.

Linking CSS in Dreamweaver

The Style Attribute • The style attribute allows you to specify CSS inside of the tag itself: • <p style=“color: red”>Some red text.</p> • <img style=“margin-left: 20px” src=“mylogo.jpg” alt=“Logo” /> • No extra tags are required for this method. • But this couples the CSS even more tightly to the HTML code than the <style> tag. • So it’s best to use it sparingly. • Anything specified in the “style” attribute will take precedence over the styles in a linked stylesheet.

Block-Level vs. Inline Elements • There are two types of HTML tags: • Block level • Inline • Block-level elements typically represent “sections” or “blocks of text”, and usually begin their own new lines when used. They tend to be “box-shaped” (try adding a border around them). • Inline elements typically go “inside” of a block level element; e.g., specific text inside of a paragraph can be bolded. They tend to shape themselves to the content inside of them. • Block-level elements include <p>, <h1>…<h6>, <blockquote>, and <pre>. • Inline elements include <a>, <img>, <strong>, <em>, <u>, <sup>, <sub>, and <strike>. • Typical use: • <h1><em>New</em> Section</h1> • <p><strong>Bold</strong> <a href=“#”>text</a> inside of a paragraph.</p> • Changing the display of an element: • Try adding the display: block; or display: inline; rule to an element to override the default display. • This will change the appearance of the element.

<div>, <span> • On their own, these tags do nothing. • They exist to be styled using CSS. • They break the page down into logical “sections”, which can each be assigned a class or ID (via the attributes). • This allows you to apply individual styles to arbitrary parts of your page. • <div> is a block-level element: • <div class=“MyClass”> <h2>Heading</h2> <p>Hello World</p></div> • <span> is an inline element: • <p>This is some <span style=“color: red”>red</span> text.</p>

Font CSS rules: • font-family: ‘Verdana’, ‘Times New Roman’, serif; • Sets the typeface used in the element’s text. • A viewer must have a font on his or her system to see it. • A list: if the first font is not present on a viewer’s system, the second will be used. • The last typeface should always be “serif”, “sans-serif”, or “monospace”. These are default fonts guaranteed to be on the user’s systems. • font-size: 12px; • Sets the font size in pixels, ems, %, or another unit. Most commonly given in pixels. • font-weight: bold; • Sets the “boldness” of the font. Useful values are “bold”, “normal”, and “lighter”. • font-style: italic; • Sets the “style” of the font, which is essentially either “normal” or “italic”. • font-variant: small-caps; • Useful values are “normal” and “Small-Caps”. • text-decoration: underline; • Adds additional effects, such as underlines, to the text. Values are “normal”, “underline”, “overline”, “line-through”, and “blink”.

Common Fonts • Visitors may only see fonts that are installed on their machines. • That is why a list is specified… if the first fonts aren’t found, the latter ones will be used. • Commonly-installed (“web safe”) font choices: • Arial • Segoe UI (this is the font used in this presentation) • Verdana • Times New Roman • Georgia • Garamond • Tahoma • Trebuchet MS • Courier New

Serif, Sans-Serif, Monospace • Serif fonts have “feet” (serifs) at the ends of each character. • They lend an air of austerity and professionalism. • Georgia, Times New Roman, and Garamond are two common serif fonts. • Sans-serif fonts “lack feet” (sans-serif: “without feet”). • They have a more “relaxed”, contemporary feel. • Arial, Verdana, Segoe UI, Trebuchet MS, and Tahoma are common sans-serif fonts. • Monospace fonts have characters of equal width. • They are very often used for printing code, because lines of equal length will always match up, as long as they have the same number of characters. • Examples are Courier New, Courier, and Consolas

Units of Measurement • HTML has several units of measurement. • The three most important are: • px: Pixels. Screen resolutions are given in these. • (e.g., 1024x768 pixels, 1280x1024 pixels, etc.) • em: A relative unit, defined as the point size of the current font. An “M” is approximately (but slightly less than) one em wide, thus the name. • %: A relative unit; 100% is by definition the full measure (width, height, etc.) of the container. • Decimals can be specified; e.g. 3.2em, 10.5%. • For making scalable designs, it is recommended to use px for the font size and relative units (em, %) for everything else. • But this is hard to do in practice, so use px if it’s more intuitive for now.

CSS rules that use units: • font-size: 24px; • width: 50%; height: 4em; • These specify the exact width or height of a container. • min-width, min-height: • These specify the minimum width of a container. Above it, the browser can control the size. • max-width, max-height: • Maximum width. • margin: 4px 8px 4px 16px: • Space surrounding the element, outside of its boundaries. • If four numbers are given, they represent top, right, bottom, and left margins. • If two are given, they represent mirrored vertical and horizontal margins. • If one number is given, it represents the width of all four margins. • Also can be set separately: margin-left, margin-top, margin-right, margin-bottom. • padding: 1em 0.4em 1.2em 0.3em: • Whitespace surrounding the content inside of the element. • Read the units the same way as margin. • Also can be set separately: padding-left, padding-top, padding-right, padding-bottom. • border-width: 1px: • Width of the border surrounding an element, if border-style isn’t “none”.

The Box Model • Margins • Space between the rest of the page and the edge of the box. • Padding • Space between the edge of the box and the content inside. • Border • Defines the width of the box edge. No content lies in this area. Color is determined by “border-color”. • The distinction is important because borders and backgrounds begin at the edge of the box. Loremipsum dolor sit amet, consecteturadipiscingelit. Nulla tempus diam dictum nisi. Vivamusvehiculalacinia mi. Etiamtincidunttellus ac est. Sedpurusleo, dignissim Margin Border Padding

Additive Color • Computers use an additive color system. • This means that black is the absence of light. • White is formed by emitting all primaries at high intensity. • The three additive primary colors are red, green, and blue. • Red + green = yellow. • Red + blue = magenta. • Green + blue = cyan. • Red + green + blue = white. • This is therefore called “RGB” color. • Computers with “24-bit” color allow for 256 shades of each red, green, and blue. • Resulting in 256^3 = 2^24 (16,777,216!) possible colors. • This is the largest number a computer can represent using 24 bits of memory. • These shades are close enough together that the human eye can just barely tell the difference between one and the next. • This is how light combines when emitted. • It is actually not what we’re used to seeing in offline art.

Subtractive Color • Printed documents use a subtractive color system. • This means that white is the absence of ink. • Black is formed by mixing all primaries. • The subtractive primaries are cyan, magenta, and yellow. • It’s difficult to produce a rich black with these inks,so black is often added to the mix to produce darker shades. • This is therefore called “CMYK” color (K = “black”). • This is not usually used on the web. It is used for print material. • That is because this color system governs how light is reflected. • This models how we perceive objects in the real world. • Trees appear green because they absorb other colors. Only the green is reflected to reach our eyes. Ink also works by absorbing colors. One cannot make a color lighter by adding more ink to it, only darker. • So why do monitors use RGB? • Monitors emit light. Trees (and printed documents) merely reflect it. • So you can make images on a monitor lighter by “adding more light”, as opposed to “adding more ink”. • If you print web documents, the printer or printer driver will convert your additive color images into subtractive colors. • Additive colors can represent a larger “gamut”, or range of color, so a strategy called “halftoning” is applied during the conversion, in which alternating-colored dots are placed close together to make you perceive a mixture of the two. • This is an example of a strategy called dithering, which we’ll talk about in a moment.

Colors in HTML/CSS • The web uses the RGB color format. • Colors in HTML are specified in #rrggbb format. • Unfortunately, they’re represented in hexadecimal (base 16). • Each digit goes from 0 to F, where “A” is 10, “B” is 11, “C” is 12, “D” is 13, “E” is 14, and “F” is 15. • The first digit is the “16s” place and the second is the “1s” place. (i.e., “2A” = 16 * 2 + 1 * 10 = 42). • So the first digit is 16x more significant than the second. (09 and 0a is a difference of 1, 09 and 19 is a difference of 16). • 256 possible shades (0-255) per color. • 255 = FF (15 * 16 + 15 * 1 = 255). • Examples: • So #ff0000 is 255 red, 0 green, 0 blue (or pure red). • #32aa7c is 50 red, 170 green, 124 blue (a mix of green and blue called “sea green”). • #518be9 is 81 red, 139 green, 233 blue (“sky blue”). • #000000 (0 red, 0 green, 0 blue) is pure black. • #646464 (100 red, 100 green, 100 blue) is gray. • #ffffff (255 red, 255 green, 255 blue) is pure white. • Telling the color from the number: • Any color having the same intensity for R, G, and B is a shade of gray. • On the opposite end, large differences between the highest and other primaries will result in deep, vivid colors. • The primary with the greatest intensity tends to “dominate” the color. The greater the difference between that color and the rest, the greater the extent to which this is true (#ff1111 is definitely going to be a shade of red). • The higher the average of the three colors, the lighter the color will be.

Named Colors: • Colors may also be specified by name: • “red” • “blue” • “darkgreen” • “black” • “white” • Etc. • Here is a complete list of color names. • These give you an easy way to input common colors, but the numeric format is usually more useful for design! • It’s usually easier to tell how colors contrast when you see how they are mixed. • It’s harder to estimate how “green” and “darkgreen” may look together.

“Web Safe” Colors: • Not so important anymore… • Many people used to use 256-color and “high color” (16-bit color) displays. • Many colors in the 24-bit “true color” palette did not have corresponding representations in these smaller palettes. • If they couldn’t be represented, the display changed it to a color that could. This usually didn’t appear well. • These color settings only intersected when all primary strengths were multiples of 33 (00, 33, 66, 99, cc, or ff): • #000000, #000033, #000066, #000099, #0000cc, #0000ff. • #33ccff, #66ccff, #99ccff, #ccccff, #ffccff. • #333333, #666666, #999999, #cccccc, #ffffff. • This came to be known as the “web safe” color palette, because it guaranteed that color would be correctly displayed on the widest range of viewers’ systems. • These days everyone uses 24 or 32 bit color, so this has become moot.

Dithering • If using the web-safe palette (or a GIF image, which only allows 256 colors), you may run into a serious limitation: • It is not possible to represent all of the colors in your image simultaneously. • If we simply shift the colors to their nearest permissible representations, the image is distorted. • Many close shades will become the same color and distinctions will be lost; this effect is known as “banding”. • It’s quite an unpleasant effect. • One way of fixing this is to “fool” the eye into seeing more colors than are really present. • We can do this by placing dots of two alternating colors closely together. • What the eye sees is not either of the dot colors, but something in-between them. • This allows us to represent more colors than the image can display. • But it’s far from perfect.

Dithering Example Original image. Saved as a 256-color GIF file without dithering. Saved as a 256-color GIF file with dithering. Banding Zoomed view of the dithering.

Using Color • Several CSS rules use these color codes: • color: #000000; • Sets the text color to the specified color. • background-color: #ffffff; • Sets the background color to the specified color. • border-color: green; • Sets the border color to the specified color (if a border exists; i.e., border-style is not “none”). • Whenever you want to change the color of anything on your page, you’ll use either the #rrggbb color codes or the color names.

Putting it all together.

Next Time • Incorporating these elements into design. • “Good design principles”/using them well: • Typography • Color theory • Site layout • Navigation • We’ll begin building an actual site out of our “hello world” example.

Discussion Questions • How can splitting pages up into sections using <div> and <span> help you create aesthetically pleasing websites? • Why may stylesheets be useful on a large website? • Why do we need <p>, <h1>, and other block-level tags if we have <div> and can customize its appearance? • Why is it so important that we separate the “content” of the site from the “presentation”? • What sort of very important visitor may see the content but ignore the presentation? • Hint: Not all viewers of your website are human.

A Nonprofit Organization of New Jersey, USA http://www.projectpolymath.org

How to Create Your Own Website