Girl Develop It Cincinnati: Intro to HTML/CSS Class 2

If you have not already done so,
please download Aptana:
http://aptana.com
Brandery Airport: brandery123

GDI Cincinnati
Intro to HTML/CSS: Class 2
Erin M. Kidwell / @erinmkidwell/ erin@girldevelopit.com
John David Back / @johndavidback / johndavidback@gmail.com

Agenda
• Review of last week
• Intro to CSS
• Types of CSS Stylesheets
• CSS Selectors & Properties
• CSS Classes & Ids
• Basic CSS Properties: How to control fonts, colors
• Back to HTML: div and ul tags
• Time permitting: The CSS Box Model

Review Last Week : HTML
HTML History
How to find HTML: 1) View Page Source 2) Inspect Element
HTML vs CSS
How to write HTML code: Notepad/TextEdit or and HTML Editor

Aptana installment
Creating/Saving a new project

HTML Vocabulary: Tag, Element, Attribute

Exercises
• html, head, title, body, p, h1-h6
• br,   character codes
• a, href, img, src
• img, src
• ol, ul
• th, tr, td
• Forms

Brief review of terms
Tag
Tags are used to denote the start of an element or the end of an element
A tag is either a start tag or an end tag. (i.e. ).
Examples of tags: , <html>, , </body>

Element
An element is the start tag + its content + the end tag:
Ex: <tag> + text + </tag>

Attribute
Attributes provide additional information about HTML elements.
Attributes are formatted like this: attr="value"
The attribute always goes in the opening tag, never in the closing tag.
In <a href="http://www.google.com">go to google</a>,
href is the attribute.
In <img src=”http://www.google.com/images/logos/ps_logo2.png” />,
src is the attribute.

HTML vs CSS
CSS stands for Cascading Style Sheets.

How does HTML fit in with CSS?
CSS was created to allow the separation of
document content from document presentation.

HTML vs CSS
HTML defines the content of a document:
This is a HEADING
•this is a new bullet!

CSS defines the formatting and style of the
content your website.
I am some blue text!
I am Courier font!

Background: CSS
CSS is what gives your page format and style.

The magic of making websites look cool and
clear and visually-striking is the job of CSS

– Often, the people who are good at CSS are
not programmers!

– Web designers and other artist-types tend to
excel at CSS.

HTML without CSS

Note: this is a Comment. It does not show up on
your webpage but can be helpful to leave yourself
notes! <!-- Type a comment here -- >

CSS Syntax
A CSS rule has two main parts:
Selector
Patterns used to select the HTML elements you want to
style
Declarations
Property and value of style you plan use on an HTML
element
Much of learning CSS is about learning which CSS properties you need
to use in order to get the formatting or style you want.

In a very simplified way, I like to think of these as: Property=Noun, Value=Adjective.
That analogy works if you don’t think about it too much!

CSS Syntax
Declarations: Property and value of style you plan use on HTML
element.
Declarations end with a semicolon

Declaration groups are surrounded by curly brackets.

So, in this example – your h1 header is blue and a 12 point font.

CSS Properties
Many CSS properties have self-explanatory names:

• background-color
• font-family
• font-size
• color
• width
• height

Comprehensive list of all CSS properties:
http://w3schools.com/css/css_reference_atoz.asp

CSS Stylesheets
There are 3 ways to implement CSS
commands into your site:

1. Inline Style
2. Internal Style
3. External Style

1. Inline Style
Inline: combines HTML content with CSS style in one
page.
Use the style attribute in the relevant tag.
The style attribute can contain any CSS property.

This is a
paragraph.

Inline stylesheets are considered inefficient. If your website
has multiple pages you’re styling for each individual page.
So if you want a mass change, you’d have to revise the CSS
on each individual HTML page.

Example: Inline Styles
We’re going to display three paragraphs of text (three p elements) and give them each
the same style:

The first CSS property we will use is font-family:

This is my first paragraph
of text.

This is my second paragraph
of text.

This is my third, also
super! exciting!!, paragraph of text.

The second CSS property we will use is color:

This is my
first paragraph of text.

second paragraph of text.

third, also super! exciting!!,
paragraph of text.

The third CSS property we will use is text-align:

This is my
first paragraph of text.

second paragraph of text.

third, also super exciting!!, paragraph of text.

Now you have more style than content on your page.
Can you see how this is inefficient if you need to make all paragraphs black?
You would have to revise each individual line.
Inline Styles negate the purpose of separating content and presentation.

2. Internal Style
Internal: Defined in the head section of an HTML page using the
<style> tag.

Could be used when a single html page has a unique style.

Example: Internal Style

Unique landing page – uses internal style

Two column layout – differs from landing page due to styling. Separate CSS than the
landing page, saved on a .css file, not written within HTML content


See how the style is incorporated into the html code?
Everything is maintained on one page.

3. External Style
External: Use one CSS file for all your pages.

Saved as a .css file extension.

Does not contain html tags but is referenced in your
html file.

Ideal for use when style is applied to many pages.

Example: any presence of “Girl Develop It” should
show up pink on all pages of our website.

Example: External Style
HTML CSS

Selectors
A selector is what links or connects your CSS with a specific HTML
element, or set of elements using the <link> tag
HTML CSS

Summary: CSS Stylesheets
Inline Internal External

Placed directly in the Placed in the head Saved as a separate
HTML element section of the HTML .css file, linked to the
HTML page
No Selector used Uses the <style> tag
Uses the <link> tag in
Inefficient, only Only applies to the the <head>tag
applies to the HTML current HTML page
element Can contain all the
styles needed for all
Only recommended if Only recommended if pages on the site.
you want to you need to style
over-ride a style on only one page, or if Recommended
your internal style you want different
sheet pages to have varying
styles.

Exercise: Creating a separate CSS file

Refer to Class 2 Handout: Adding a CSS Page

Reference: Linking HTML file to CSS file
Linking our HTML file to our CSS file
1. We need to link our HTML file to our new CSS file.
2. We do this via the <link> element.
• <link> is a self-closing tag
• <link> goes in the <head> section of our HTML file.

CSS Properties (reminder)
Many CSS properties have self-explanatory names:

• background-color
• font-family
• font-size
• color
• width
• height

Comprehensive list of all CSS properties:
http://w3schools.com/css/css_reference_atoz.asp

CSS Selectors: Types

Selectors are one of the most important aspects
of CSS as they are used to "select" elements on
an HTML page so that they can be styled.

The selector comes before the curly brackets { }

We will cover three kinds of selectors:
1. Element-type selectors (a, body, html)
2. Class selectors
3. id selectors

CSS Selector: Element-type

In this example, all h2
headings will be italicized

Element
Selector

Values
Properties
Declaration
Declaration = property: value;

CSS Selector: Element-type
A selector is what links or connects your CSS with a specific HTML
element, or set of elements using the <link> tag
HTML CSS

In this example, selector
indicates the HTML content
should be italicized

CSS Selector: Class
CSS class selectors define the styles for many HTML
elements with the same class name.

How does the browser know to look for the blue
paragraph?
• The . before the name of the selector tells the
browser this is a class selector
• . = class selector

CSS Selector: Class
CSS class selectors let you set “labels” on elements,
and style each labeled element differently.
You set these labels in HTML by assigning a class
attribute:
Example: with this p style, all paragraphs will have blue
text, Monaco font, and aligned to the right.

CSS Selector: id
CSS id selectors define the style for the UNIQUE
HTML element with the same id name.

• There should be only one unique id per HMTL
document.

• How does the browser know to look for
username and password in the id attribute?

• The # before the name of the selector tells the
browser # = id selector

CSS Comments /* */

Just like in HTML, CSS has comments.

Comments are ignored by the browser, but it’s a
handy way to make notes for yourself.

Example: CSS element selectors

Let’s put what we just learned to
practice.

Inside our css ﬁle, we have a
body selector and no styles
deﬁned.

Let’s add the property font-family
and the value Helvetica to add a
new default font for our page.

font-family

Adding this to our CSS changes the font for our entire
website to Helvetica instead of the default (Times
New Roman).

If you set the font-family property to Helvetica, and
Helvetica is not installed on your visitor’s computer, it
will not work.

The browser will use the default font instead, Times
New Roman.

Using multiple values with font-family

To specify multiple font types, list them in your order of
preference, separated by commas:

If you want to use a font with a multiword name, be sure
to put it in quotes.

Back to HTML: div
One html tag we did not cover last week is the div tag:

• The div tag is a great way to apply styles to a bunch of
elements all at once. We accomplish this by nesting
items within a div.

• We can wrap the two paragraphs in one div element,
give that div a class, and style that class! One class
instead of two!

Read more at:
http://w3schools.com/tags/tag_div.asp

Back to HTML: div tags

You will often use these spacing properties on div
elements.

What if you want a centered design?

• One way to align a whole div element in the center of
a page is to set that div to have a specified width, and
to have margin: 0 auto


What if we want the first 2 paragraphs to
be right aligned, but we don’t want any
other paragraphs to be right-aligned?

We could set them all to a class... but is
there an easier, faster way?


We can wrap the two paragraphs in one div element,
give that div a class, and style that class! One class
instead of two!
CSS

HTML

Exercise: CSS and div
Let’s put what we just learned to practice.
Inside your html, nest some of your content in div elements
Add some declarations to your CSS
Text Properties color h2 {color:red;}
text-align p {text-align:left;}
text-indent p {text-indent: 5px;}
text-transform h1 {text-transform:uppercase;}
Font Properties font-family p {font-family:veranda,arial;}
font-size p {font-size: 12px;}
font-weight p {font-weight:bold;}
font-style h2 {font-style:italic;}
Color & background-color body {background-image: url(grahic.jpg);
Background background-image color: #FFFFFF;
Properties background-repeat background-color: #000000; }
color
Hyperlink Colors a:link a:link {color: #999999;}
a:visited a:visited {color: #FFFFFF;}
a:hover a:hover {color: #CCCCCC;}
a:active a:active {color: #333333;}

Homework

Reading:
HTML lists: http://w3schools.com/html/html_lists.asp

Styling lists: http://w3schools.com/css/css_list.asp

Styling links: http://w3schools.com/css/css_link.asp

Class vs Id Selectors: http://css.maxdesign.com.au/selectutorial/advanced_idclass.htm

Time permitting: The Box Model

Three properties are defined by something called the CSS
“Box Model”:

• margin
• padding
• border

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:
Read more at: http://w3schools.com/CSS/css_boxmodel.asp


The content edge surrounds the rectangle given by the
width and height of the box, which often depend on the
element's rendered content. The four content edges define
the box's content box.

The padding edge surrounds the box padding. If the padding
has 0 width, the padding edge is the same as the content
edge. The four padding edges define the box's padding box.

The border edge surrounds the box's border. If the border
has 0 width, the border edge is the same as the padding
edge. The four border edges define the box's border box.

The margin edge surrounds the box margin. If the margin
has 0 width, the margin edge is the same as the border
edge. The four margin edges define the box's margin box.

Girl Develop It Cincinnati: Intro to HTML/CSS Class 2

Recommended

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Girl Develop It Cincinnati: Intro to HTML/CSS Class 2 (20)

More from Erin M. Kidwell (8)

Recently uploaded (20)

Girl Develop It Cincinnati: Intro to HTML/CSS Class 2

Editor's Notes