SlideShare a Scribd company logo
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. </p>).
    Examples of tags: <strong>, <html>, </p>, </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.

   <p style="color:sienna;margin-left:20px">This is a
   paragraph.</p>



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:


<p style="font-family: Monaco, Arial, sans-serif;">This is my first paragraph
of text.</p>

<p style="font-family: Monaco, Arial, sans-serif;">This is my second paragraph
of text.</p>

<p style="font-family: Monaco, Arial, sans-serif;">This is my third, also
super! exciting!!, paragraph of text.</p>
Example: Inline Styles
The second CSS property we will use is color:


<p style="font-family: Monaco, Arial, sans-serif; color: blue;">This is my
first paragraph of text.</p>

<p style="font-family: Monaco, Arial, sans-serif; color: blue;">This is my
second paragraph of text.</p>

<p style="font-family: Monaco, Arial, sans-serif; color: blue;">This is my
third, also super! exciting!!,
paragraph of text.</p>
Example: Inline Styles
The third CSS property we will use is text-align:


<p style="font-family: Monaco, Arial, sans-serif; color: blue; text-align: right;">This is my
first paragraph of text.</p>

<p style="font-family: Monaco, Arial, sans-serif; color: blue; text-align: right;">This is my
second paragraph of text.</p>

<p style="font-family: Monaco, Arial, sans-serif; color: blue; text-align: right;">This is my
third, also super exciting!!, paragraph of text.</p>




                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
Example: 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
Example: Internal Style




      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 Selector: id
CSS Selector: id (Example)
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 file, we have a
body selector and no styles
defined.

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
Back to HTML: div tags

 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?
Back to HTML: div tags

 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;}
Exercises: Refer to Handout 2
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
Time permitting: The Box Model
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
Time permitting: The Box Model

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.
Time permitting: The Box Model

More Related Content

What's hot (20)

PDF
Xml schema
Prabhakaran V M
 
PPT
MYSQL - PHP Database Connectivity
V.V.Vanniaperumal College for Women
 
PPT
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
PDF
Html frames
eShikshak
 
PPTX
FUNCTION DEPENDENCY AND TYPES & EXAMPLE
Vraj Patel
 
PDF
Html / CSS Presentation
Shawn Calvert
 
PPTX
Threads in JAVA
Haldia Institute of Technology
 
PPT
Html Ppt
vijayanit
 
PDF
Basic Crud In Django
mcantelon
 
PPTX
HTML Forms
Ravinder Kamboj
 
PPT
Files in c++ ppt
Kumar
 
PDF
HTML CSS Basics
Mai Moustafa
 
PDF
JavaScript - Chapter 10 - Strings and Arrays
WebStackAcademy
 
PPTX
Dns presentation
Anurag Pandey
 
PDF
Introduction to html
eShikshak
 
PPTX
Css Display Property
Webtech Learning
 
PPT
PPT on Basic HTML Tags
VinitaPaliwal1
 
Xml schema
Prabhakaran V M
 
MYSQL - PHP Database Connectivity
V.V.Vanniaperumal College for Women
 
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
Html frames
eShikshak
 
FUNCTION DEPENDENCY AND TYPES & EXAMPLE
Vraj Patel
 
Html / CSS Presentation
Shawn Calvert
 
Html Ppt
vijayanit
 
Basic Crud In Django
mcantelon
 
HTML Forms
Ravinder Kamboj
 
Files in c++ ppt
Kumar
 
HTML CSS Basics
Mai Moustafa
 
JavaScript - Chapter 10 - Strings and Arrays
WebStackAcademy
 
Dns presentation
Anurag Pandey
 
Introduction to html
eShikshak
 
Css Display Property
Webtech Learning
 
PPT on Basic HTML Tags
VinitaPaliwal1
 

Viewers also liked (8)

PDF
Class 3 create an absolute layout with css abs position (aptana)
Erin M. Kidwell
 
PPTX
Timms group 2 (2)
intansyafika
 
PDF
Class 4 handout two column layout w mobile web design
Erin M. Kidwell
 
DOC
Learn Java 3D
Jay Thakkar
 
PDF
Memory error-talk
Jay Thakkar
 
PDF
Single Sourcing RAP and RCP - Desktop and web clients from a single code base
Ralf Sternberg
 
PDF
CSS3 Layout
Zoe Gillenwater
 
PDF
Sich erfolgreich bewerben
Cornel Müller
 
Class 3 create an absolute layout with css abs position (aptana)
Erin M. Kidwell
 
Timms group 2 (2)
intansyafika
 
Class 4 handout two column layout w mobile web design
Erin M. Kidwell
 
Learn Java 3D
Jay Thakkar
 
Memory error-talk
Jay Thakkar
 
Single Sourcing RAP and RCP - Desktop and web clients from a single code base
Ralf Sternberg
 
CSS3 Layout
Zoe Gillenwater
 
Sich erfolgreich bewerben
Cornel Müller
 
Ad

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

DOC
Css introduction
Sridhar P
 
PPTX
chitra
sweet chitra
 
PPTX
Introduction to CSS
Shehzad Yaqoob
 
PDF
Introduction to css
Joseph Gabriel
 
PPTX
Beginners css tutorial for web designers
Singsys Pte Ltd
 
PPTX
Introduction to Wed System And Technologies (1).pptx
AmeerHamza183012
 
PDF
CSS Foundations, pt 1
Shawn Calvert
 
PPTX
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
PPTX
Css types internal, external and inline (1)
Webtech Learning
 
PPT
CSS.ppt
MukulSingh293955
 
PPTX
Css.html
Anaghabalakrishnan
 
PPTX
Introduction of css
Dinesh Kumar
 
PPTX
Cascading Styling Sheets(CSS) simple design language intended to transform th...
JebaRaj26
 
PPTX
Lecture 3CSS part 1.pptx
GmachImen
 
DOC
Css introduction
vishnu murthy
 
PPTX
Lecture-6.pptx
vishal choudhary
 
PPTX
CSS_Day_ONE (W3schools)
Rafi Haidari
 
PDF
Advanced Web Programming Chapter 8
RohanMistry15
 
Css introduction
Sridhar P
 
chitra
sweet chitra
 
Introduction to CSS
Shehzad Yaqoob
 
Introduction to css
Joseph Gabriel
 
Beginners css tutorial for web designers
Singsys Pte Ltd
 
Introduction to Wed System And Technologies (1).pptx
AmeerHamza183012
 
CSS Foundations, pt 1
Shawn Calvert
 
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
Css types internal, external and inline (1)
Webtech Learning
 
Introduction of css
Dinesh Kumar
 
Cascading Styling Sheets(CSS) simple design language intended to transform th...
JebaRaj26
 
Lecture 3CSS part 1.pptx
GmachImen
 
Css introduction
vishnu murthy
 
Lecture-6.pptx
vishal choudhary
 
CSS_Day_ONE (W3schools)
Rafi Haidari
 
Advanced Web Programming Chapter 8
RohanMistry15
 
Ad

More from Erin M. Kidwell (8)

PDF
Class 4 handout w css3 using j fiddle
Erin M. Kidwell
 
PDF
Class 3 Intro to HTML/ CSS Gdi cincinnati create a table layout with html (...
Erin M. Kidwell
 
DOC
Class 2 handout css exercises (2)
Erin M. Kidwell
 
PDF
Class 2 handout (1) adding a css stylesheet
Erin M. Kidwell
 
PDF
Class 1 handout (2) html exercises
Erin M. Kidwell
 
DOC
Class 1 handout (1) aptana create a new presentation and stylesheet
Erin M. Kidwell
 
PDF
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
PDF
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Erin M. Kidwell
 
Class 4 handout w css3 using j fiddle
Erin M. Kidwell
 
Class 3 Intro to HTML/ CSS Gdi cincinnati create a table layout with html (...
Erin M. Kidwell
 
Class 2 handout css exercises (2)
Erin M. Kidwell
 
Class 2 handout (1) adding a css stylesheet
Erin M. Kidwell
 
Class 1 handout (2) html exercises
Erin M. Kidwell
 
Class 1 handout (1) aptana create a new presentation and stylesheet
Erin M. Kidwell
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 1
Erin M. Kidwell
 

Recently uploaded (20)

PPTX
Reimaginando la Ciberdefensa: De Copilots a Redes de Agentes
Cristian Garcia G.
 
PDF
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
PDF
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
PDF
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
PDF
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
PDF
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
PDF
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
PPTX
2025 HackRedCon Cyber Career Paths.pptx Scott Stanton
Scott Stanton
 
PDF
“Scaling i.MX Applications Processors’ Native Edge AI with Discrete AI Accele...
Edge AI and Vision Alliance
 
PDF
DoS Attack vs DDoS Attack_ The Silent Wars of the Internet.pdf
CyberPro Magazine
 
PDF
Plugging AI into everything: Model Context Protocol Simplified.pdf
Abati Adewale
 
PDF
Pipeline Industry IoT - Real Time Data Monitoring
Safe Software
 
PPSX
Usergroup - OutSystems Architecture.ppsx
Kurt Vandevelde
 
PDF
Understanding The True Cost of DynamoDB Webinar
ScyllaDB
 
PDF
Java 25 and Beyond - A Roadmap of Innovations
Ana-Maria Mihalceanu
 
PDF
GDG Cloud Southlake #44: Eyal Bukchin: Tightening the Kubernetes Feedback Loo...
James Anderson
 
PDF
Next level data operations using Power Automate magic
Andries den Haan
 
PDF
Kubernetes - Architecture & Components.pdf
geethak285
 
PDF
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
DOCX
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 
Reimaginando la Ciberdefensa: De Copilots a Redes de Agentes
Cristian Garcia G.
 
Hello I'm "AI" Your New _________________
Dr. Tathagat Varma
 
Dev Dives: Accelerating agentic automation with Autopilot for Everyone
UiPathCommunity
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
How to Visualize the ​Spatio-Temporal Data Using CesiumJS​
SANGHEE SHIN
 
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
2025 HackRedCon Cyber Career Paths.pptx Scott Stanton
Scott Stanton
 
“Scaling i.MX Applications Processors’ Native Edge AI with Discrete AI Accele...
Edge AI and Vision Alliance
 
DoS Attack vs DDoS Attack_ The Silent Wars of the Internet.pdf
CyberPro Magazine
 
Plugging AI into everything: Model Context Protocol Simplified.pdf
Abati Adewale
 
Pipeline Industry IoT - Real Time Data Monitoring
Safe Software
 
Usergroup - OutSystems Architecture.ppsx
Kurt Vandevelde
 
Understanding The True Cost of DynamoDB Webinar
ScyllaDB
 
Java 25 and Beyond - A Roadmap of Innovations
Ana-Maria Mihalceanu
 
GDG Cloud Southlake #44: Eyal Bukchin: Tightening the Kubernetes Feedback Loo...
James Anderson
 
Next level data operations using Power Automate magic
Andries den Haan
 
Kubernetes - Architecture & Components.pdf
geethak285
 
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
Daily Lesson Log MATATAG ICT TEchnology 8
LOIDAALMAZAN3
 

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

  • 1. 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
  • 2. 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
  • 3. 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, &nbsp; character codes • a, href, img, src • img, src • ol, ul • th, tr, td • Forms
  • 4. 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. </p>). Examples of tags: <strong>, <html>, </p>, </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.
  • 5. 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.
  • 6. 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!
  • 7. 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.
  • 8. 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 -- >
  • 9. 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!
  • 10. 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.
  • 11. 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
  • 12. CSS Stylesheets There are 3 ways to implement CSS commands into your site: 1. Inline Style 2. Internal Style 3. External Style
  • 13. 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. <p style="color:sienna;margin-left:20px">This is a paragraph.</p> 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.
  • 14. 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: <p style="font-family: Monaco, Arial, sans-serif;">This is my first paragraph of text.</p> <p style="font-family: Monaco, Arial, sans-serif;">This is my second paragraph of text.</p> <p style="font-family: Monaco, Arial, sans-serif;">This is my third, also super! exciting!!, paragraph of text.</p>
  • 15. Example: Inline Styles The second CSS property we will use is color: <p style="font-family: Monaco, Arial, sans-serif; color: blue;">This is my first paragraph of text.</p> <p style="font-family: Monaco, Arial, sans-serif; color: blue;">This is my second paragraph of text.</p> <p style="font-family: Monaco, Arial, sans-serif; color: blue;">This is my third, also super! exciting!!, paragraph of text.</p>
  • 16. Example: Inline Styles The third CSS property we will use is text-align: <p style="font-family: Monaco, Arial, sans-serif; color: blue; text-align: right;">This is my first paragraph of text.</p> <p style="font-family: Monaco, Arial, sans-serif; color: blue; text-align: right;">This is my second paragraph of text.</p> <p style="font-family: Monaco, Arial, sans-serif; color: blue; text-align: right;">This is my third, also super exciting!!, paragraph of text.</p> 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.
  • 17. 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.
  • 18. Example: Internal Style Unique landing page – uses internal style
  • 19. Example: 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
  • 20. Example: Internal Style See how the style is incorporated into the html code? Everything is maintained on one page.
  • 21. 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.
  • 23. 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
  • 24. 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.
  • 25. Exercise: Creating a separate CSS file Refer to Class 2 Handout: Adding a CSS Page
  • 26. 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.
  • 27. 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
  • 28. 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
  • 29. CSS Selector: Element-type In this example, all h2 headings will be italicized Element Selector Values Properties Declaration Declaration = property: value;
  • 30. 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
  • 31. 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
  • 32. 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.
  • 33. 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
  • 35. CSS Selector: id (Example)
  • 36. 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.
  • 37. Example: CSS element selectors Let’s put what we just learned to practice. Inside our css file, we have a body selector and no styles defined. Let’s add the property font-family and the value Helvetica to add a new default font for our page.
  • 38. 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.
  • 39. 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.
  • 40. 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
  • 41. 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
  • 42. Back to HTML: div tags 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?
  • 43. Back to HTML: div tags 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
  • 44. 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;}
  • 45. Exercises: Refer to Handout 2
  • 46. 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
  • 47. Time permitting: The Box Model Three properties are defined by something called the CSS “Box Model”: • margin • padding • border
  • 48. Time permitting: The Box Model 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
  • 49. Time permitting: The Box Model 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.
  • 50. Time permitting: The Box Model

Editor's Notes

  • #8: CSS files are termed “cascading” stylesheets because of two reasons: one stylesheet can cascade, or have influence over, multiple pages. Similarly, many CSS files can define a single page.
  • #14: Attributes provide additional information about HTML elements.Attributes are formatted like this: attr=&quot;value&quot;
  • #18: Make reference to a landing page – how it can like a different format t