Creating A Website - Part 1: Web Design principles, HTML & CSS. CSS Color Values. Hexadecimal Colors. RGB Color

Size: px

Start display at page:

Download "Creating A Website - Part 1: Web Design principles, HTML & CSS. CSS Color Values. Hexadecimal Colors. RGB Color"

Leona Ferguson
6 years ago
Views:

1 Notes Week 3 By: Marisa Stoolmiller CSS Color Values With CSS, colors can be specified in different ways: Color names Hexadecimal values RGB values HSL values (CSS3) HWB values (CSS4) Hexadecimal Colors A hexadecimal color is specified in the following format: #RRGGBB. RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color. For example: #0000FF is completely blue, the blue component is set to its highest value (FF) and the others are set to 00. p {color: #0000FF } RGB Color An RGB color value is using: rgb(red, green, blue). Each parameter sets the intensity of the color as a number from 0 to 255. For example: rgb(0,0,255) is completely blue, the blue parameter is set to its highest value (255) and the others are set to 0. p {color rgb(0,0,255) }

2 Navigation Use the anchor element to create links to other pages on your site, or to a page on someone else s site. Provide the URL of the page you want to link to using the href attribute of the anchor element. Can be placed anywhere in the body, but the navigation bar should go into the <nav> section. Wrap the anchor element around the text or image you want to become your link <a href= page.html >Link text</a> <a href=../page.html >Link text</a> <a href= >Link text</a> Set the target attribute to _blank open link in a new window <a href= page.html target= _blank >Link text</a> Link To create a link to an address <a href= mailto:name@site.com >Link text</a> This will open up user s default program (if one is defined) To avoid getting spammed, do not put your address on your publicly accessible websites. Navigation CSS Links have several states for which the formatting can be modified using CSS :link :visited :focus :hover :active Use the following syntax a:state {property:value;} a:link {text-decoration: none; color: blue;} marisa@latticeworksolutions.com Page: 2

3 Typography Choosing a Font Family Use built-in web safe fonts common fonts installed on most computers. ( to use a font located on the web server AnyFontName; src: url(fontfile.ttf);} Use the font-family property when specifying a style for the specified selector selector {font-family: AnyFontName, Arial;} ie. body {font-family: AnyFontName, Arial, sans-serif;} Applying Bold and Italics The font-weight property of the selector for bold selector {font-weight: bold;} p {font-weight: bold;} Other allowable values for font-weight property include normal, lighter, bolder, lighter, multiple of 100 (400 = normal) Use the font-style property of the selector for italic selector {font-style: italic;} p {font-weight: bold;} Setting the Font Size and Color Use the font-size property in the selector selector {font-size: 12px;} p {font-size: 12px;} Other values for font-size pt, em, xx-small, x-small, small, medium, large, x-large, xx-large marisa@latticeworksolutions.com Page: 3

4 Use the color property in the selector selector {color: red;} p {color: red;} Other values for color Hex value, rgb(r, g, b), rgb(r%, g%, b%) Setting the Line Height Effects the amount of space between each line in a paragraph Use the line-height property in the selector you want to apply the style to selector {line-height: n;} selector {line-height: p%;} selector {line-height: a;} Changing the Text Case Use the text-transform property to define the text case Use the following values for the text-transform property capitalize first character in each word uppercase all capital letters lowercase all small letters none as it was typed Using Small Caps selector {text-transform: uppercase;} h1 {text-transform: uppercase;} Use the font-variant property to display text in small caps Controlling Spacing Selector {font-variant: small-caps;} h1 {font-variant: small-caps;} Tracking add or reduce space between words Use the word-spacing property to specify tracking selector {word-spacing: length;} Kerning add or reduce space between letters Use letter-spacing property to specify kerning marisa@latticeworksolutions.com Page: 4

5 selector {letter-spacing: length;} Creating A Website - Part 1: Web Design principles, HTML & CSS Length is a number with units (i.e. 5 px) Adding Indents Use the text-indent property to determine how much space should precede the first line of a paragraph selector {text-indent: length;} p {text-indent: 10px;} Length is a number with units (i.e. 20 px) Aligning Text Use the text-align property to set up certain XHTML elements to always be aligned to the right, left, center, or justified Decorating Text selector {text-align: right left center justified;} h1 {text-align: center;} Use text-decoration property to format text with underlines, over lines, strikethroughs, and blinking selector {text-decoration: underline;} Valid values include: underline overline line-through blink none HOMEWORK: Write three HTML pages (You can use a similar structure but with different information, keeping in mind it is for a mobile device. marisa@latticeworksolutions.com Page: 5

6 Add CSS to format the pages you created last week. Creating A Website - Part 1: Web Design principles, HTML & CSS marisa@latticeworksolutions.com Page: 6

Adding CSS to your HTML

Adding CSS to your HTML Lecture 3 CGS 3066 Fall 2016 September 27, 2016 Making your document pretty CSS is used to add presentation to the HTML document. We have seen 3 ways of adding CSS. In this lecture,