BIT116: Scripting Lecture 02 Part 2

BIT116: Scripting Lecture 02 Part 2
Instructor: Craig Duckett Thursday, July 9th, 2015 Crash Course in CSS

HTML Color Codes

HTML Color Codes Red/Green/Blue Hecadecimal Triplets
abcdef Red/Green/Blue RGB Decimal Code X11 Color Names thistle, magenta, indigo, gray, grey HSL/HSV hue-saturation-lightness -value ° , %, % Web Safe Colors VGA 256  216  (6 × 6 × 6 = 216) each from 00 to FF /* RGB model */ #f00 /* 3-digit shortchand hex form #rgb */ #ff0000 /* 6-digit traditional hex form #rrggbb */ rgb(255, 0, 0) /* integer range */ rgb(100%, 0%, 0%) /* float range 0.0% % */ /* RGB with alpha channel, added to CSS3 */ rgba(255, 0, 0, 0.5) /* 0.5 opacity, semi-transparent */ /* HSL model, added to CSS3 */ hsl(0, 100%, 50%) /* red */ hsl(120, 100%, 50%) /* green */ hsl(120, 100%, 25%) /* dark green */ hsl(120, 100%, 75%) /* light green */ hsl(120, 50%, 50%) /* pastel green */ /* HSL model with alpha channel */ hsla(120, 100%, 50%, 1) /* green */ hsla(120, 100%, 50%, 0.5) /* semi-transparent green */ hsla(120, 100%, 50%, 0.1) /* very transparent green */ Note for Web Safe Colors: The number 216 was chosen partly because computer operating systems customarily reserved sixteen to twenty colors for their own use; it was also selected because it allows exactly six equally-spaced shades of red, green, and blue (6 × 6 × 6 = 216), each from 00 to FF (including both limits) For this class we will be using 6 or 3 character hexadecimal color coding in our CSS, like #00ffff for example

The hexadecimal ‘triplets’ represent a mixture of red, green, and blue:
00 (red) ff (green) ff (blue) All 0s make black, all fs make white, with 16,777,216 color variations available by varying the six characters. HTML Color Coding <html> <body bgcolor="#00ffff"> <h1>Practice! Practice! Practice!</h1> <p><a href=" <p>bgcolor attribute not supported in HTML5. Use CSS instead.</p> </body> </html> Using bgcolor this way is “old school” as web developers now use CSS to format web content!

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).

CSS Color Names CSS also has “predefined” colors that you can use rather than having to remember the hexadecimal or rgb triplets. I will occasionally be utilizing these predefined colors whilst working with the CSS. This means, instead of referencing a hexadecimal triplet in the code like #ff0000 you can reference it by a name like red.

A Crash Course in CSS

What is CSS ? CSS stands for Cascading Style Sheets
Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem of separating content from the way it is formatted and displayed External Style Sheets can save a lot of work by adding formatting and display configuration to an entire web site External Style Sheets are stored in .css files CSS is a way to style and present the information offered in an HTML page. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document, including its font size and type, item colors, item formatting, margins and padding, rows and columns, in short the look and feel of a web page or entire web site.

Cascading Style Sheets
CSS1 (1996 Draft; 2000 Browser Support) to coincide with HTML4/XHTML1 CSS2 (1998 Draft; 2010 Browser Support) CSS3 (1999 Draft; 2012 Browser Support) to coincide with HTML5 CSS Formatting Demo:

Three Ways to Insert CSS into an HTML Page
Inline Style Internal Style Sheet External Style Sheet

Inline Style Inline style does exactly what it sounds like, it adds a style or styles in direct line with the HTML code itself (i.e., it is "embedded" inline with the HTML code) An inline style loses many of the advantages of style sheets by mixing content with presentation. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the font color and the left and right margins of a paragraph: <p style="color:#663399; margin-left:20px; margin-right:600px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque iaculis luctus. Phasellus quis faucibus turpis. Ut convallis quam id risus mattis lobortis. Cras quis augue vulputate, laoreet mauris id, pharetra ligula. Curabitur placerat sem eros, non rhoncus justo sollicitudin eu.</p>

Internal Style Sheet An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <title>Style in Head Example</title> <style> p {margin-left:20px; margin-right:400px; color:#ff0000;} /* Or the f00 3-character shortcut */ body {background-color: #ffff99;} /* Or the ff9 3-character shortcut */ </style> </head>

CSS Syntax p {color:red; text-align:center;}
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets or "squiggles": p {color:red; text-align:center;} NOTE: We will talk about creating and using "class" and "id" in CSS in a future lecture

External Style Sheet An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension and given any name you choose appropriate to your design intentions (e.g., style.css). An example of a style sheet file is shown below: html0m.html html0m.css p {color:red; margin-left:20px; margin-right:400px; } body {background-color: #cccc66; FYI: link rel is link relation and in our case it is a "stylesheet". There are other types of relations besides stylesheet, like author, help, license, search, to name a few.

Style Sheet Element Formatting
The way you format your style sheet is really up to you. Pick a style that you like and then stick with it for consistency. p {color:red; margin-left:20px; margin-right:600px; } body {background-color: #cccc66; p {color:red; margin-left:20px; margin-right:600px;} body {background-color: #cccc66;} p { color:red; margin-left:20px; margin-right:600px; } body { background-color: #cccc66;

Multiple Style Sheets and Types
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3{ color:red; text-align:left; font-size:8pt;} And an internal style sheet has these properties for the h3 selector: h3{text-align:right; font-size:20pt;} If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color:red;  from the external text-align:right;  from the internal font-size:20pt;  from the internal The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.

Styles can be specified three ways:
inside an HTML element inside the head section of an HTML page in an external CSS file Tip: multiple external style sheets can be referenced inside a single HTML document. Cascading Order What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value). NOTE: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

Pros and Cons of the Three Different CSS Styles
Inline Style Pros – Fast, down-and-dirty way to get styles into the code; great for testing or roughing out an idea; comes in handy in unique situations Cons – Can be tedious because it's on an item by item basis; if you want to change a style you have to work down through your code to find the style, and you've have to do this through your entire page, then you'd have to repeat this through all your other pages whose style you want to change in the same way Internal Style Pros – Almost as fast as inline style Cons – If you have multiple pages that use the same internal style, and you change one page, then you have to go through ALL your pages to manually change the CSS style to make sure all your pages are the same External Style Pros – It is common for websites to have common 'theme' across all its pages. You can club all such common styles in external file and with one download you get the required style that can be used in multiple pages: saves download time; if you want to change style throughout your entire site, you only have to do this in the external file, and not manually going through each one of your pages (saves a LOT of time if you have many pages in your site) Cons – There will be one additional HTTP request for each external style sheet you have

HTML & CSS for Page Layout
As we saw in a previous lecture, the semantic markup introduced in HTML5 allows to construct page layouts differently. Although we still can use <div> tags for creating layouts, many of the standard page elements such as header, navigation, footer have now their own tags. This does not change the way CSS and HTML work together but it makes our code more meaningful and saves us from typing some <div>'s (we can still use divs to create "wrappers" to center sections, produce "responsive" pages, etc). NOTE: We will discuss "id" and "class" a bit later in today's lecture

A basic layout uses a header, a main content area and a footer. On the HTML side there is nothing new except that we use might a div wrapper layer for centering the content in the browser. <body> <div id="wrapper"> <header> <h1>This is the header</h1> </header> <section> <p>Here would come the main content</p> </section> <footer> <p>Last but not least, the footer</p> </footer> </div> </body> Without the CSS, the web page looks pretty basic, even though all the HTML tags are in place. We'll use the CSS to jazz things up a bit. NOTE: We will discuss "id" and "class" a bit later in today's lecture

CSS Syntax (Review) p {color:red; text-align:center;}
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets or "squiggles": p {color:red; text-align:center;}

Now looking at the CSS, first we reset the margin and padding of all elements to zero and tell the browser to render all HTML5 section tags as block. * { margin:0px; padding:0px;} header, footer, section, aside, article, nav { display: block;} NOTE: We will discuss "id" and "class" a bit later in today's lecture

The wrapper centers the rest of the content div#wrapper { width:90%; margin:0px auto;} NOTE: We will discuss "id" and "class" a bit later in today's lecture

While we simply add some color to distinguish the three sections of the document: header, the main section and the footer. header { background-color:#CCA; height:50px;} section { background-color:#F3C200; height:100px;} footer { background-color:#CC6; height:20px;} NOTE: We will discuss "id" and "class" a bit later in today's lecture

Putting it all together and the CSS render content of the now page looks like this: Demo code: test001.html NOTE: We will discuss "id" and "class" a bit later in today's lecture

Common CSS Selectors & Declarations

Commenting 
Some notes about these CSS properties, attributes, and values: First, commenting inside HTML and CSS HTML Comment  CSS Comment /* Comment Goes Here */

The id Selector: # (the pound or hash character))
Standards specify that any given id name can only be referenced once within a page or document. From my experience, ids are most commonly used correctly in CSS layouts. This makes sense because there are usually only one 'wrapper' per page, or only one menu, one banner, usually only one content pane, etc. What this means is, two selectors cannot us the same id. If you want to do that, then you would create and use a class (which we'll talk about a bit later). NOTE: Do NOT start an id name with a number! It will not work in Firefox. In the CSS #wrapper { width:70%;  sets width of div in relation to the browser margin:0px auto;} In the HTML <div id="wrapper"> . . . </div>

The id Attribute: id="someName"
The id attribute will become very important when using JavaScript: <div id="someName"> . . . </div> For most of the quarter we will be using the javaScript getElementById( ) method to manipulate our web pages and content. document.getElementById("someName") An Example:

The margin Property W3Schools: margin
The margin property can have from one to four values: margin:25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px margin:25px 50px 75px; top - right/left - bottom right and left margins are 50px margin:25px 50px; top/bottom - right/left top and bottom margins are 25px margin:25px; all four margins are 25px The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; W3Schools: margin

The height Property W3Schools: height
The height property sets the height of an element, whether in by auto (default), length (px, cm, pt, etc). height:50px; W3Schools: height

The background-color Property
The background-color property sets the background color of an element. background-color:#ccccaa;  or #cca W3Schools: background-color

The class Selector: . (a period or “dot” character)
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector is defined with a period or "dot": . NOTE: You can name a class anything you want, although it is recommended you give it a name according to its function. In the example below, all HTML elements with class="center" will be center-aligned: In the CSS .center {text-align:center;} In the HTML <h1 class="center">Rex Winkus's Portfolio</h1> <p class="center">Week 01</p> W3Schools: Class vs ID

The class Selector, specified by a HTML Element
You can also specify that only predetermined HTML elements should be affected by a class. In other words, even if other elements call a class by name, only the type of element uniquely specified will be affected by the call. In the CSS p.center{text-align:center; } In the HTML <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be center-aligned.</p> W3Schools: Class vs ID

Some Other Basic CSS Properties: font-family
In the CSS [remember, that these class names can be anything you want] p.serif{font-family:"Times New Roman",Times,serif;} p.sansserif{font-family:Arial,Helvetica,sans-serif;} In the HTML <h1 class="serif">This is heading 1</h1>  This isn't affected <h2 class="sansserif">This is heading 2</h2>  This isn't affected <p class="serif">This is a paragraph.</p> <p class="sansserif">This is a paragraph.</p> W3Schools: font-family

Some Other Basic CSS Properties: font-size
In the CSS h1 {font-size:250%;} h2 {font-size:200%;} .ften {font-size:10pt;} .f875em {font-size:0.875em;} In the HTML <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p class="ften">This is a paragraph.</p> <p class="f875em">This is a paragraph.</p> An "em" is a relative property based on the default font-size of the browsers, which is typically 16px. For example, this means that: 1em = (16 x 1) = 16px = 100% 1.25em (16 x 1.25) = 20px = 125% 0.75em (16 x 0.75) = 12px = 75% 2em (16 x 2) = 32px = 200% W3Schools: font-size

Some Other Basic CSS Properties: font-style
In the CSS [remember, that these class names can be anything you want] .normal {font-style:normal;} p.italic {font-style:italic;} .oblique {font-style:oblique;} In the HTML <p class="normal">This is a paragraph, normal.</p> <p class="italic">This is a paragraph, italic.</p> <p class="oblique">This is a paragraph, oblique.</p> <h2 class="oblique">This is a heading1, oblique.</h2> W3Schools: font-style

Some Other Basic CSS Properties: font-variant
In the CSS [remember, that these class names can be anything you want] .normal {font-variant:normal;} .small {font-variant:small-caps;} In the HTML <h2 class="small">Rex Winkus's Portfolio</p> <p class="normal">My name is Rex Winkus.</p> <p class="small">My name is Rex Winkus.</p> W3Schools: font-variant

Some Other Basic CSS Properties: font-weight
In the CSS [remember, that these class names can be anything you want] p.normal {font-weight:normal;} p.light {font-weight:lighter;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} In the HTML <p class="normal">This is a paragraph.</p> <p class="light">This is a paragraph.</p> <p class="thick">This is a paragraph.</p> <p class="thicker">This is a paragraph.</p> Value Description normal Default. Defines normal characters bold Defines thick characters bolder Defines thicker characters lighter Defines lighter characters Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold W3Schools: font-weight

Some Other Basic CSS Properties: font (shorthand property)
The font shorthand property sets all the font properties in one declaration. The properties that can be set, are (in order): "font-style font-variant font-weight font-size/line-height font-family". The font-size and font-family values are required. If one of the other values are missing, the default values will be inserted, if any. In the CSS [remember, that these class names can be anything you want] .ex1{font:15px arial,sans-serif;} p.ex2{font:italic bold 12px/30px Georgia,serif;} In the HTML <p class="ex1">Rex Winkus's Portfolio</p> <p class="ex2">My name is Rex Winkus.</p> <h1 class="ex1">My name is Rex Winkus.</h1> <h1 class="ex2">My name is Rex Winkus.</h1>  This is not altered W3Schools: font (shorthand)

Some Other Basic CSS Properties: line-height
The line-height property specifies the line height. In the CSS [remember, that these class names can be anything you want] p.normal{line-height:100%}  100% of normal, or 16px p.small {line-height:90%}  90% of normal, or 14.4px p.big {line-height:2}  twice normal line height, or 32px p.reallybig {line-height:48px}  three times normal line height, or 3 In the HTML <p class="ex1">Rex Winkus's Portfolio</p> <p class="ex2">My name is Rex Winkus.</p> <h1 class="ex1">My name is Rex Winkus.</h1> <h1 class="ex2">My name is Rex Winkus.</h1>  This is not altered W3Schools: line-height

Some Other Basic CSS Properties: text-decoration
The text-decoration property specifies the decoration added to text. In the CSS [remember, that the class names can be anything you want] h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} .none {text-decoration:none;} In the HTML <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <a class="none" href=" W3Schools: text-decoration

Some Other Basic CSS Properties: text-align
The text-align property specifies the horizontal alignment of text in an element. In the CSS h1 {text-align:center} h2 {text-align:left} h3 {text-align:right} In the HTML <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> Value Description left Aligns to the left right Aligns to the right center Centers the text justify stretches the lines so each line has equal width W3Schools: text-align

Some Other Basic CSS Properties: text-transform
The text-transform property controls the capitalization of text. In the CSS h1 {text-transform:uppercase;} h2 {text-transform:capitalize;} p {text-transform:lowercase;} In the HTML <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> Value Description none No capitalization. The text renders as it is (this is the default) capitalize Transforms the first character of each word to uppercase uppercase Transforms all characters to uppercase lowercase Transforms all characters to lowercase W3Schools: text-transform

Some Other Basic CSS Properties: color
The color property specifies the color of text. In the CSS body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} In the HTML <h1>This is heading 1</h1> <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p> <p class="ex">This is a paragraph with class="ex". This text is blue.</p> Value Description color Specifies the text color. Look at CSS Color Values for a complete list of possible color values. inherit Specifies that the color should be inherited from the parent element W3Schools: color

We Are Stopping Here! I’ve included the remaining slides for informational purposes only. You are not required to read or know them now, although some of their topics will be introduced as the quarter progresses.

CSS Box Model

CSS Box Model: Content W3Schools: CSS Box Model
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins and include both the left and right sides. The total width of the element in the example below is 310px: width:250px; padding:10px; border:10px solid gray; margin:10px; margin-top border-top padding-top Let's do the math: 250px (width) + 20px (left + right padding) + 20px (left + right border) + 20px (left + right margin) = 310px padding-left margin-left border-left padding-right border-right margin-right height width padding-bottom border-bottom margin-bottom W3Schools: CSS Box Model

CSS Box Model W3Schools: CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model: margin-top Explanation of the different parts: Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. border-top padding-top border-left padding-left margin-left padding-right border-right margin-right height width padding-bottom border-bottom margin-bottom W3Schools: CSS Box Model

CSS Box Model: Padding W3Schools: padding
The CSS padding properties define the space between the element border and the element content. The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. In the CSS [Remember, you can use any class name you want here] .padding {padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; } In the HTML <p class="padding">This is a paragraph.</p> padding shorthand: padding:25px 50px 75px 100px; top padding is 25px right padding is 50px bottom padding is 75px left padding is 100px padding:25px 50px 75px; right and left paddings are 50px padding:25px 50px; top and bottom paddings are 25px padding:25px; all four paddings are 25px W3Schools: padding

CSS Box Model: Border W3Schools: border border-style
The border-style property specifies what kind of border to display. NOTE: None of the border properties will have ANY effect unless the border-style property is set! dotted dashed solid double groove ridge inset outset border-width The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick. Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. W3Schools: border

CSS Box Model: Border CONTINUED
A look at border-style and border-width: In the CSS p.one {border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } In the HTML <p class="one">Some text.</p> <p class="two">Some text.</p> W3Schools: border

border-color The border-color property is used to set the color of the border. The color can be set by: name - specify a color name, like "red" RGB - specify a RGB value, like "rgb(255,0,0)" Hex - specify a hex value, like "#ff0000" You can also set the border color to "transparent". Note: The border-color property does not work if it is used alone. Use the border-style property to set the borders first. W3Schools: border

A look at border-style and border-color: In the CSS p.one {border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; } In the HTML <p class="one">A solid red border.</p> <p class="two">A solid green border.</p> W3Schools: border

The border-style property can have from one to four values. border-style:dotted solid double dashed; top border is dotted right border is solid bottom border is double left border is dashed border-style:dotted solid double; right and left borders are solid border-style:dotted solid; top and bottom borders are dotted border-style:dotted; all four borders are dotted The border-style property is used in the example above. However, it also works with border-width and border-color. Individual sides - In CSS it is possible to specify different borders for different sides In the CSS p {border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } In the HTML <p>Different border styles.</p> W3Schools: border

Border Shorthand To shorten the code, it is also possible to specify all the individual border properties in one property. This is called a shorthand property. The border property is a shorthand for the following individual border properties: border-width border-style (required) border-color In the CSS P {border:5px solid red; } In the HTML <p>A solid red border 5 pixels thick!</p> NOTE: There are several more CSS border properties I did not mention here. Please refer to All CSS Border Properties in the W3Schools link below. W3Schools: border

CSS Box Model: Margin W3Schools: margin
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. In the CSS margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; W3Schools: margin

CSS Box Model: Margin (Shorthand)
The margin (shorthand) property can have from one to four values. margin:25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px margin:25px 50px 75px; right and left margins are 50px margin:25px 50px; top and bottom margins are 25px margin:25px; all four margins are 25px W3Schools: margin

CSS Box Model: Outline W3Schools: outline
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". The outline properties specify the style, color, and width of an outline. The outline property is different from the border property. NOTE: The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline. In the CSS p {border:1px solid red; outline:green dotted thick; } In the HTML <p>IE8 supports the outline properties only if a !DOCTYPE is specified.</p> W3Schools: outline

CSS Links & Link Colors

CSS Links & Link Colors: link, visited, hover, active
Links can be styled with any CSS property (e.g. color, font-family, background, etc.) In addition, links can be styled differently depending on what state they are in. The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked In the CSS a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ W3Schools: CSS link colors

CSS Links & Link Styles: Text Decoration
In the example below the link changes decoration depending on what state it is in. Lets go through some of the other common ways to style links: Text Decoration The text-decoration property is mostly used to remove underlines from links: In the CSS a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} W3Schools: CSS link styles

CSS Links & Link Styles: Background Color
In the example below the link changes color depending on what state it is in. Lets go through some of the other common ways to style links: Background Color The background-color property specifies the background color for links: In the CSS a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;} W3Schools: CSS link styles

CSS Links: Multiple Link Styles
In the example below the link changes style depending on what state it is in. Lets go through some of the other common ways to style links: Background Color The background-color property specifies the background color for links: In the CSS a:link {color:red; background-color:orange; text-decorantion:none;} a:visited {color:teal; background-color:khaki; text-decorantion:none;} a:hover {color:yellow; background-color:firebrick; text-decorantion:underline; text-decorantion:overline;} a:active {color:white; background-color:red; text-decorantion:underline; text-decorantion:overline;} W3Schools: CSS link styles

Intermediate CSS

Intermediate CSS: Group and Nesting Selectors
Grouping Selectors In style sheets there are often elements with the same style. In the CSS h1{color:green;} h2{color:green;} p{color:green;} To minimize the code, you can group selectors. Separate each selector with a comma. In the example below we have grouped the selectors from the code above: h1,h2,p{color:green;} W3Schools: grouping - nesting

Intermediate CSS: Group and Nesting Selectors
It is possible to apply a style for a selector within a selector. In the example below, one style is specified for all p elements, one style is specified for all elements with class="marked", and a third style is specified only for p elements within elements with class="marked": In the CSS p{color:blue; text-align:center; } .marked{background-color:red; } .marked p{color:orange; /* Similar to p.marked but without having to separately add class to p tag*/ } W3Schools: grouping - nesting

Intermediate CSS: Dimensions (Height and Width)
The CSS dimension properties allow you to control the height and width of an element. In the CSS img.normal{ height:auto; } img.big{ height:120px; p.ex{ height:100px; width:100px; W3Schools: Dimension

Intermediate CSS: Display
CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: <h1> <p> <div> An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: <span> <a> W3Schools: Display

Changing How an Element is Displayed Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards. The following example displays list items (which are usually block) as inline elements: CSS li {display:inline;} HTML <ul> <li><a href=" <li><a href=" <li><a href=" <li><a href=" </ul> W3Schools: Display

Span The following example displays span elements (which are usually inline) as block elements: CSS span {display:block;} HTML <h2>Nirvana</h2> <span>Record: MTV Unplugged</span> <span>Year: 1993</span> <h2>Radiohead</h2> <span>Record: OK Computer</span> <span>Year: 1997</span> W3Schools: Display

Hiding an Element - display:none or visibility:hidden Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results: visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. example h1.hidden {visibility:hidden;} display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. example h1.hidden {display:none;} W3Schools: Display

Intermediate CSS: Positioning
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods: Static Positioning Fixed Positioning Relative Positioning Absolute Positioning W3Schools: Positioning

Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties. W3Schools: Positioning

Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled example CSS p.pos_fixed{position:fixed; top:50px; right:5px; } Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified. Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist. Fixed positioned elements can overlap other elements W3Schools: Positioning

Relative Positioning A relative positioned element is positioned relative to its normal position. example CSS h2.pos_left{ position:relative; left:-50px; /* Notice the minus sign*/ } h2.pos_right{ position:relative; left:50px; } W3Schools: Positioning

Relative Positioning The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow. example CSS h2.pos_top{position:relative; top:-50px; } HTML <body> <h2>This is a heading with no position</h2> <h2 class="pos_top">This heading is moved upwards according to its normal position</h2> </body> W3Schools: Positioning

Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html> example CSS h2{position:absolute; left:100px; top:150px; } HTML <body> <h2>This is a heading with an absolute position</h2> <p>With absolute positioning, an element can be placed anywhere…</p> Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements. W3Schools: Positioning

Overlapping Elements: z-index When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order. example CSS img{position:absolute; left:0px; top:0px; z-index:-1; } An element with greater stack order is always in front of an element with a lower stack order. If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top. W3Schools: Positioning

All Positioning Properties Propert Description bottom Sets the bottom margin edge for a positioned box clip Clips an absolutely positioned element cursor Specifies the type of cursor to be displayed left Sets the left margin edge for a positioned box overflow Specifies what happens if content overflows an element's box position Specifies the type of positioning for an element right Sets the right margin edge for a positioned box top Sets the top margin edge for a positioned box z-index Sets the stack order of an element W3Schools: Positioning

Intermediate CSS: Floats

Intermediate CSS: Float
With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. There are two float properties: clear float W3Schools: Floating

Intermediate CSS: Float
With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. There are two float properties: float clear CSS Tricks: All About Floats W3Schools: Floating

Using Floats for Layouts
Layouts are where the float property is incredibly useful. We can achieve the traditional two-column layout in a variety of ways; most of them use one or two floated elements. Let’s take a look at a simple example: a two-column website with the content area on the left, navigation on the right, and a header and footer area to cap it off. For the sake of this example, we’re only going to look at the code related to the floated elements. Floatutorial: Float Tutorial - Learn CSS Layout: Float - Smashing Magazine: The Mystery of the Float Property

#container { width: 960px; margin: 0 auto; } header { padding: 5px; background: #c99; section { float: left; width: 780px; background: #fcc; padding-left:5px; padding-right:5px; text-align:justify; nav { float: right; width: 160px; padding-top:15px; background: #fcf; footer { clear: both; Ok, let’s talk about what’s going on here. Our containing parent is aptly called #container. This holds our floated elements in place. If we didn’t have it, our floated elements would shoot out to the far left and right of the viewport (our browser window). Up top we have our header. Next, we have section and nav. These are our floated elements. We sent section to the left, and nav to the right, to achieve our two-column layout. I’ve defined a width for each, so that they fill our entire parent container. Finally, we have the footer, on which we’ve set the clear property. As we know from before, this clear property brings the elements following any floated elements back into the normal flow. In this case the footer has the value both assigned to it, causing our footer to sit below both the section and nav elements.

What would have happened had we forgotten to assign the clear property to our footer? Our page would look like this: Our footer has slid up underneath the nav. This is happening because there is room underneath the nav for the footer to fill, and given the normal flow that we work within, this is actually the correct behavior. But it’s definitely not what we’re looking for, is it? You can start to see the interaction between the float and clear property and how they complement each other so well.

Some Tips & Tricks: Faux Columns Demo: "Original" 2-Column Page Demo: Updated 2-Column Page using a "Faux Column" Discussion: Equal Height Column Debacle Code-Sucks: Faux Column Layouts Vanseo Design: 4 Methods for Creating Equal Height Columns in CSS Some Tips & Tricks: Using height or display:table Demo: Using height Demo: Using display:table

CSS Align: Margin, Position, or Float
Crossbrowser Compatibility Issues body{ margin:0; padding:0; }

Tables

Tables Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973
The Basic Table Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973

Tables The Basic Table: The Parts Explained
Table is the container that holds all the individual parts <table> Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973 Each row is a container that holds all the individual data cells <tr> Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973 Each cell is a container that holds the individual data <td> Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973

Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973
Basic Table <table> Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973 </table>

Basic Table <table> Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973 <tr> </tr> <tr> </tr> <tr> </tr> </table>

Basic Table <table> Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973 <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> </tr> <td> </td> <td> </td> <td> </td> </table>

Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973 Column
<table> Company Employees Founded ACME Inc 1000 1947 XYZ Corp 2000 1973 <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <td> </td> </table>

Tables <table border=1> The Basic Table with Border

Tables <table border=8> Firefox Internet Explorer Chrome

Tables: Borders Made Using CSS
Firefox <style> table{ border-color: #000; border-width: 8px; border-style: solid; /* Same as: border: 8px solid #000; */ } td { border-color: #369; border-width: 2px; /* Same as: border: 2px solid #369; */ </style> Internet Explorer Chrome

Tables <th> The Basic Table with Table Header Tags

Tables The Basic Table with Table Header Tags and Background Colors

Additional Table Tags Caption

Additional Table Tags table { border-collapse:collapse; }
Border Collapse with CSS table { border-collapse:collapse; } From this… to this…

Additional Table Tags td { padding:15px; } Table Padding with CSS

Additional Table Tags td { text-align:right; } Alignment with CSS

Additional Table Tags td { height:50px; vertical-align:top; }
Height and Vertical Alignment with CSS td { height:50px; vertical-align:top; }

Additional Table Tags table { width:50%; } or td { width:150px; }
Table Width with CSS table { width:50%; } or td { width:150px; }

Row Groups THEAD, TFOOT, and TBODY

Spanning Column and Row Spanning

Spanning Column and Row Spanning Column Span  Row Row Span  Row Row

Spanning Column and Row Spanning

Table Inside a Table

Tables http://faculty.cascadia.edu/cduckett/bit116/tables/
More Table Examples with CSS Formatting General Table Column Options Column Styles Financial Dark Other Table Links HTML Table Tutorial HTML5 Tables

CSS Multi-Column Layout

CSS Multicolumn Layout
CSS3 multicolumn layout has been a tantalizing possibility for some years now. However, with lack of support in Internet Explorer it hasn’t been taken up as much as it deserves. With IE 10 supporting these properties, and its usefulness in creating responsive designs, I hope we will very soon see it used more. .columns { column-count:4; column-gap:10px; }

Multicolumn layout makes it possible to arrange content in columns, in the same way that content flows in a newspaper. You can take a container in your document and state that you want it to be arranged into columns, and the browser will make it so. If you specify the number of columns that you want the content arranged into, the browser will work out the width of each column so that it will fit into the parent box. If you specify a width for the columns then the browser will display as many columns as it is able, maintaining that width for each.

CSS Multicolumn Properties
Column Width & Count Setting the number or the width of columns is important to the multi column layout content. Columns should be set by using either ‘column-width’ or ‘column-count’, but should never be used together. Both of these properties are by default set to ‘auto’. ‘Column width’ does exactly what it says. It allows you to specify a fixed width for the columns. The measurement of this width can be carried out in the standard way using px, ems etc. Depending on what you enter for the column width it can vary and may be slightly wider or narrower to fit the space available. If this property is set to ‘auto’, then this means the width of the columns will be dictated by other properties, such as the one below. column-count: (number of columns) | auto;

Column Count Should you want the layout to be split into a number of specified columns then this is the property that you would opt for. By setting the value of this the content is divided into the required amount of columns. If this property is set to ‘auto’, then this means the number columns will be decided by other properties, such as ‘column-width’. column-width: (length) | auto;

‘Columns’ is effectively a shorthand property that allows you to set the ‘column width’ and ‘column count’. Here are a view valid values that you might associate with ‘columns’ columns: 12em; /* column-width: 12em; column-count: auto */ columns: auto 12em; /* column-width: 12em; column-count: auto */ columns: 2; /* column-width: auto; column-count: 2 */ columns: 2 auto; /* column-width: auto; column-count: 2 */ columns: auto; /* column-width: auto; column-count: auto */ columns: auto auto; /* column-width: auto; column-count: auto */ column-width: (length) | auto;

Column-Gap ‘Column gap’ give us the opportunity to add a space between each of the columns and gives the content room to breathe. We specify the width of the gap using standard CSS measurements. The width of the gap that you specify cannot be negative. column-gap: (length) | normal;

Column-Rule ‘Column Rule’ effectively puts a border down the middle of the ‘column-gap’. Therefore, to enable this, a ‘column-gap’ width must be specified that has the same or larger value than the column rule. The column rule also has several separate sub properties as well as a shorthand version. This shorthand version works in the same way as the shorthand ‘border’ property. You can see this below: column-rule-width:1px; column-rule-style: solid; column-rule-color: #000; column-rule: 1px solid #000; /* This is the shorthand version */

Column-Span ‘Column-span’ allows us to span across all of the columns. If we take our simple example from earlier and add a h1 title to our content, we can easily get this h1 tag to span the entire 4 columns by adding column-span:all to it h1{ column-span: all; } column-span: all | none;

Column-Fill The ‘column-fill’ property gives us two controls for setting how the amount of the content is balanced over the columns. If set to ‘balance’ then the variation in the column length will be minimized and all lengths will be as equal as possible. If set to ‘auto’ then the columns will be filled in order and (for instance) may result in the 4th of 4 columns having less content than the 3 previous columns. If balance was set on this then it would allow all 4 columns to be roughly of equal height. This property solves the problem of undesirable gaps being left in the content. column-span: all | none;

Ovwerflow ‘Overflow’ should be used to control what happens if the content overflows the columns. If for instance the main ‘columns’ div had a fixed width and the content of the columns extends this then we can control whether this should be shown or clipped using the ‘overflow’ property. In the example we can see that the columns overflow the div. This is due to overflow not being set to ‘hidden’ on the parent element. column-span: all | none;

Example Links W3Schools: Multicolumn W3C: Multicolumn CSS3 Info: Multicolumns Tutsplus: Multicolumns CanIUse: Multicolumns Multicolumn Layout Generator Multicolumn Examples

CSS Vendor Prefix Tools
In the mad rush to bring CSS3 properties to the masses, browser vendors added their own vendor prefixes to the property names as an interim solution. Now, we have a bit of a mess as a result. I'm not going to enumerate all of the ways in which vendor prefixes are bad and how the world would be a better place without them. You already know that. What's needed is a sane way to deal with them that doesn't take up all of your development time. One approach, is to use tools that generate CSS rules for you from unprefixed CSS3 properties. That allows you, the developer, to blissfully imagine that prefixes never existed, by shielding you from those evil little monsters. Links Prefixr Prefix-Free CSS3 Please Prefix My CSS

HTML/CSS WYSIWYG Web Editors
Paid Editors Dreamweaver (Free Trial) CoffeeCup HTML Editor (Free Version Available) TO Web (Free Version Available) Web Architect (Free Trial Available) Free Editors KompoZer NVU Blue Griffon Microsoft Expression Web 4 (Now Free!) Amaya (W3C) Page Breeze Trellian Add-On Tools Web Assist Extend Studio Adobe Exchange

Tips & Tricks

Assorted Tips & Tricks Tips & Tricks HTML5 & CSS3 Readiness Chart
Can I Use … ? Initializer Front End Tools for Workflow The ToolBox HTML/CSS Frameworks Blueprint Bluetrip Elements Malo CSS Tips & Tricks CSS3.me Generator CSS3Generator LayerStyles Gradient Editor Arrow Please Create CSS3 CSS Values Assorted Tips & Tricks

Lecture 3 Please begin working on the LECTURE 3 In-Class Exercises.
When you have completed your ICE, call the Instructor over to verify your work. If you have questions about your work, please call over the Instructor to clarify. Once you have completed your ICEs, you are free to go for the day. If you don't finish your ICEs by the end of class, you will still get full credit for actively doing the work, but it is greatly recommended you finish any outstanding ICEs outside of class.

BIT116: Scripting Lecture 02 Part 2

Similar presentations

Presentation on theme: "BIT116: Scripting Lecture 02 Part 2"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

BIT116: Scripting Lecture 02 Part 2

Similar presentations

Presentation on theme: "BIT116: Scripting Lecture 02 Part 2"— Presentation transcript:

Similar presentations

About project

Feedback