Transcript
Page 1: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

Web FoundationsWEDNESDAY, OCTOBER 2, 2013

LECTURE 5: INTRODUCTION TO CSS CONTINUED

Page 2: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

HTML & CSS for Page LayoutAs 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

Page 3: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

HTML & CSS for Page LayoutA 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>

NOTE: We will discuss "id" and "class" a bit later in today's lecture

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.

Page 4: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

CSS Syntax (Review)

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets or "squiggles":

p {color:red; text-align:center;}

Page 5: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

HTML & CSS for Page LayoutNow 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

Page 6: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

HTML & CSS for Page Layout

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

Page 7: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

HTML & CSS for Page LayoutWhile 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

Page 8: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

HTML & CSS for Page LayoutPutting it all together and the CSS render content of the now page looks like this:

NOTE: We will discuss "id" and "class" a bit later in today's lecture

Demo code: test001.html

Page 9: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

Commenting

Some notes about these CSS properties, attributes, and values:

First, commenting inside HTML and CSS

HTML Comment

<!-- Comment Goes Here -->

CSS Comment

/* Comment Goes Here */

Demo: HTML Comment in CCS Internal Style

Page 10: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

The id Selector: #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

div#wrapper {width:70%; sets width of div in relation to the

browser margin:0px auto;}

In the HTML

<div id="wrapper"> . . .</div>

Demo: ID in CCS

Page 11: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

The margin PropertyThe 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.

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• top margin is 25px• right and left margins are 50px• bottom margin is 75px

margin:25px 50px; top/bottom - right/left• top and bottom margins are 25px• right and left margins are 50px

margin:25px;all four margins are 25px

margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;

Page 12: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

The height PropertyThe height property sets the height of an element, whether in by auto (default), length (px, cm, pt, etc).

height:50px;

W3Schools: height

Page 13: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

The background-color PropertyThe background-color property sets the background color of an element.

background-color:#CCA; or #CCCCAA

W3Schools: background-color

Page 14: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

The class Selector: .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

Page 15: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

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 IDhttp://www.htmldog.com/guides/css/intermediate/classid/

Page 16: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

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

Page 17: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

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>

W3Schools: font-size

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%

Page 18: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

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

Page 19: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

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

Page 20: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

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>

W3Schools: font-weight

Value Description

normal Default. Defines normal characters

bold Defines thick characters

bolder Defines thicker characters

lighter Defines lighter characters

100200300400500600700800900

Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold

Page 21: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

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)

Page 22: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

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 16pxp.small {line-height:90%} 90% of normal, or 14.4pxp.big {line-height:2} twice normal line height, or 32pxp.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

Page 23: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

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="http://www.google.com">Google</a>

W3Schools: text-decoration

Page 24: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

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>

W3Schools: text-align

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

Page 25: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

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>

W3Schools: text-transform

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

Page 26: Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED

Some Other Basic CSS Properties: colorThe 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>

W3Schools: color

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


Top Related