SlideShare a Scribd company logo
BEGINNING HTML AND CSS
CLASS 2HTML/CSS ~ Girl Develop It ~
Intro to HTML and CSS - Class 2 Slides
CSS
Stands for Cascading Style Sheets.
Refers to the hierarchical way that styles get applied to
html elements.
WHAT WE'LL LEARN TODAY
A little CSS history.
Terminology and syntax.
Ways to attach CSS to your page.
Selectors.
Colors and Fonts.
HISTORY OF CSS
The 90s
HTML pages read from top to bottom, black font, no
color, and all default browser styles.
Fine for science papers, but designers said "We
Want More!"
1993: The first graphical browser is born — "Mosaic"
1994: World Wide Web Consortium is inaugurated
(W3C) and the World Wide Web is born.
HISTORY OF CSS
Late 90s
1996: Specifications for CSS1 are released (a year
before HTML 4.0).
CSS1 is buggy and poorly adopted.
1998: W3C releases CSS2.
CSS2 is buggy and poorly adopted.
Meanwhile, table-based layouts and browser wars
are rampant!
HISTORY OF CSS
The 00s
1999 - 2000: Work is begun on CSS2.1 to fix bugs in
CSS 2.
2004: The working draft becomes a candidate for
adoption by the W3C. It reverts back to working draft
in 2005.
2007: The working draft again becomes a candidate
for adoption by the W3C
2010: It reverts back to a working draft.
2011: June 7th, CSS2.1 is finally "sanctified" by the
W3C.
HISTORY OF CSS
CSS3
CSS3, begun in 2000, is still mostly in working-draft
stage.
Modular release (rather than one single adoption).
2013: Most modules still in working-draft stage
...some released and adopted by modern browsers.
CSS: WHAT DOES IT LOOK LIKE?
Intro to HTML and CSS - Class 2 Slides
LET'S CODE SOME CSS!
<head>
<title>
My Very First Web Page!
</title>
<style>
h1 {
color: blue;
background-color: yellow;
}
</style>
</head>
NOW SAVE YOUR PAGE
Open it up in a browser
Does your heading look different?
CSS TERMINOLOGY:
CSS is composed of style "rules"
Here is a style rule:
SYNTAX IS IMPORTANT!
h1 {
color: blue;
background-color: yellow;
}
There are no limits to the number of declarations in a
style rule.
Common convention is to use lower case throughout.
Don't forget the semicolon at the end of the
declarations!
Don't forget the closing curly bracket!
ATTACHING CSS TO YOUR WEB PAGE
There are three ways
Inline
Embedded
Linked
INLINE
<p style="color: red;">Some text.</p>
The style goes right inside the opening HTML tag.
Uses "style", which is an HTML attribute.
Difficult to use in large projects.
EMBEDDED
This is how we did it in our opening exercise.
"Embedded" inside the <head> element between an
opening and closing <style> tag.
If styles are identical across multiple pages in your site --
you'd have to copy and paste for each page.
LINKED
All your styles go on their own style sheet!
A <link> tag in your HTML file points to the location of the
style sheet
<head>
<title>
My Very First Web Page!
</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
ADVANTAGES OF LINKED (EXTERNAL)
STYLE SHEETS:
Shared resource for several pages.
Reduced file size & bandwidth
Easy to maintain in larger projects.
LET'S CODE IT (PART 1)
1. Open a new page in your text editor.
2. Copy the rule you created between the style tags on
your index.html (not the tags themselves, though).
3. Paste it in your new page.
4. Save your page inside the "styles" folder you created
earlier. Name it "styles.css".
LET'S CODE IT (PART 2)
5. Delete the style tags and everything within them on your
index.html page.
6. In their place, code the following:
<link rel="stylesheet" type="text/css"
href="styles/styles.css">
7. Save your index.html page and open it in a browser.
Does the style still show on your page?
SELECTORS
The first item in a style rule.
Describes what is being styled.
h1 {
color: blue;
background-color: yellow;
}
WHAT CAN WE USE AS SELECTORS?
HTML tags.
Classes and ids.
Pseudo classes.
Any combination of the above!
HTML TAGS:
p {
property: value;
}
This would select every paragraph element.
img {
property: value;
}
This would select every image element.
...but what if you need more control?
CLASSES AND IDS
"Class" and "ID" are HTML attributes.
Attributes "describe" elements and are followed by
values.
In your HTML, it looks like this:
<p id="intro">
<span class="warning">
IDS VS. CLASSES
ID: An id can only be used once on a page. Refers to a
singular page element (like a footer).
Think ~ A student ID number
Class: Lots of elements can have the same class. I.E.
There can be many spans with a class of "warning".
Think ~ A student as a member of a class
CLASSES
<p class="warning">
.warning {
property: value;
}
A class name is preceeded by a period in your style
rule.
IDS
<p id="intro">
#intro {
property: value;
}
An id name is preceeded by a pound sign in your style
rule.
NAMING YOUR CLASS OR ID:
Can use letters, numbers, underscore or dash (but don't
start with a number or a dash followed by number).
No spaces — use a hyphen or underscore
CSS is case-insensitive, but the convention is to use all
lowercase letters.
In your HTML, class and id names are in quotes (just
like all other attribute values).
LET'S CODE IT!
Add these rules to your "styles.css" file:
#intro {
color: blue;
}
.warning {
color: red;
}
Add an id of "intro" to your first paragraph.
Find a word or sentence in your "index.html" file and wrap
in span tags with a class of "warning".
Intro to HTML and CSS - Class 2 Slides
PSEUDO CLASSES
Describes a "current condition" of an HTML element,
rather than an "attribute".
Link pseudo classes are the most common
example: a:hover
to style a link when user "hovers" over it
LINK PSEUDO CLASSES
a:link ~unvisited link
a:visited ~visited link
a:hover ~mouse over link
a:active ~activated link
If present, a:hover must come after a:link and a:visited.
If present, a:active must come after a:hover.
LET'S SPICE UP OUR LINKS!
a:link {
color: blue;
}
a:visited {
color: yellow;
}
a:hover {
color: green;
}
a:active {
color: purple;
}
COMPOUND SELECTORS
Combining selectors to get really specific!
p em {
property: value;
}
Selects all em elements that are within a paragraph
#intro a {
property: value;
}
Selects all link elements in elements with an id of "intro".
LET'S ADD A COMPOUND SELECTOR
RULE!
#intro a {
font-style: italic;
}
STYLING WITH COLOR AND FONTS
COLOR
The color property sets the color of the font.
The background-color property sets the color of the
background.
Color value can be defined in one of three ways:
By a recognized color name
By a hexadecimal value
By an RGB value
RECOGNIZED COLOR NAMES
The 17 standard colors are:
aqua, black, blue, fuchsia, gray,
grey, green, lime, maroon, navy,
olive, purple, red, silver, teal,
white, and yellow.
There are 141 named colors:
http://www.w3schools.com/cssref/css_colornames.asp
HEXADECIMAL VALUES
Example — color: #A53C8D
A pound sign followed by three pairs
The first pair equates to red value
The second pair equates to green value
The third pair equates to blue value
RGB VALUES
Example — color: rgb(165, 60, 141)
Three comma-separated numbers from 0 to 255
The first number equates to red value
The second number equates to green value
The third number equates to blue value
CSS3 introduces a 4th value, "a", setting opacity
Example — color: rgba(165, 60, 141, 0.5)
FONT
5 DIFFERENT PROPERTIES TO STYLE FONT!
1. font-style
example: font-style: italic;
values: "normal", "italic", or "oblique"
2. font-variant
example: font-variant: small-caps;
values: "normal", "small-caps", or "inherit"
3. font-weight
example: font-weight: bold;
values: "normal", "bold", "bolder", "lighter",
4. font-size
example: font-size: 12px;
values:
fixed: pixels (ie 12px)
relative: percents (ie 100%) and ems (ie 1.5em)
5. font-family
example:
font-family: Corbel,'Helvetica Neue', Helvetica, Arial,
sans-serif;
Computers don't all have the same fonts installed...so
provide alternatives
Specific to general, in a comma-separated list.
Fonts with two-word names are in quotes
BONUS FONT PROPERTIES!
6. text-transform
example: text-transform: uppercase;
values: "capitalize", "uppercase", "lowercase", or
"none"
7. line-height
example: line-height: 1.5;
values: numbers, percents, pixels, or "ems"
SHORTHAND FONT DECLARATION
example:
font: italic small-caps bold 34px/150% "Times New Roman", Times, serif;
font-style → font-variant → font-weight → font-size / line
height → font-family
you must declare at minimum the font-size and font-family
example: font: 34px "Times New Roman", Times, serif;
LET'S CODE IT!
Add the shorthand font rule to your heading
h1 {
font: italic bold 34px Corbel,'Helvetica Neue',
Helvetica, Arial, sans-serif;
}
CASCADING
Styles "cascade" down until changed
p{
color:blue;
font-family:'Helvetica';
}
.red{
color:red;
}
#special{
font-family:Arial;
}
<p>Paragraph</p>
<pclass="green">Paragraph</p>
<pclass="red">Paragraph</p>
<pclass="red"id="special">Paragraph</p>
CSS PROPERTIES
Many CSS properties have self-explanatory names:
background-color
font-family
font-size
color
width
height
https://developer.mozilla.org/en-
US/docs/Web/CSS/Reference
Comprehensive list of all CSS properties:
QUESTIONS?
?
Intro to HTML and CSS - Class 2 Slides

More Related Content

What's hot (20)

Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
Randy Oest II
 
HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2
Sharon Wasden
 
Web Typography
Web TypographyWeb Typography
Web Typography
Shawn Calvert
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
Hatem Mahmoud
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
Shawn Calvert
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
Syed Sami
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web Designing
Leslie Steele
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
Ajay Khatri
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
Shawn Calvert
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markerters
SEO SKills
 
3 Layers of the Web - Part 1
3 Layers of the Web - Part 13 Layers of the Web - Part 1
3 Layers of the Web - Part 1
Jeremy White
 
HTML Email
HTML EmailHTML Email
HTML Email
Shawn Calvert
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
Thinkful
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Deepak Upadhyay
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
Tushar Rajput
 
Html,javascript & css
Html,javascript & cssHtml,javascript & css
Html,javascript & css
Predhin Sapru
 
Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners
MediaLinkers Kennesaw
 
Images on the Web
Images on the WebImages on the Web
Images on the Web
Shawn Calvert
 
HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2
Sharon Wasden
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
Hatem Mahmoud
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
Shawn Calvert
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
Syed Sami
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web Designing
Leslie Steele
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
Ajay Khatri
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
Shawn Calvert
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markerters
SEO SKills
 
3 Layers of the Web - Part 1
3 Layers of the Web - Part 13 Layers of the Web - Part 1
3 Layers of the Web - Part 1
Jeremy White
 
Frontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSSFrontend Crash Course: HTML and CSS
Frontend Crash Course: HTML and CSS
Thinkful
 
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJSBasic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Basic of HTML, CSS(StyleSheet), JavaScript(js), Bootstrap, JSON & AngularJS
Deepak Upadhyay
 
Html,javascript & css
Html,javascript & cssHtml,javascript & css
Html,javascript & css
Predhin Sapru
 

Similar to Intro to HTML and CSS - Class 2 Slides (20)

CSS Overview
CSS OverviewCSS Overview
CSS Overview
Doncho Minkov
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css
shabab shihan
 
Css
CssCss
Css
actacademy
 
Css
CssCss
Css
actacademy
 
Css Introduction
Css IntroductionCss Introduction
Css Introduction
SathyaseelanK1
 
Css
CssCss
Css
Jahid Blackrose
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.pptUnit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
nikhilsh66131
 
css-presentation.ppt
css-presentation.pptcss-presentation.ppt
css-presentation.ppt
prathur68
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 
Spectrum 2015 going online with style - an intro to css
Spectrum 2015   going online with style - an intro to cssSpectrum 2015   going online with style - an intro to css
Spectrum 2015 going online with style - an intro to css
Neil Perlin
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
JJFajardo1
 
Javascript Html Css A Stepbystep Guide Student Student
Javascript Html Css A Stepbystep Guide Student StudentJavascript Html Css A Stepbystep Guide Student Student
Javascript Html Css A Stepbystep Guide Student Student
zorahpyzer7p
 
Css
CssCss
Css
Rathan Raj
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
QA TrainingHub
 
Css basics
Css basicsCss basics
Css basics
ASIT
 
Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)
shabab shihan
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
sanjay2211
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentation
Neil Perlin
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentation
Neil Perlin
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css
shabab shihan
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.pptUnit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
css-presentation.ppt
css-presentation.pptcss-presentation.ppt
css-presentation.ppt
prathur68
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 
Spectrum 2015 going online with style - an intro to css
Spectrum 2015   going online with style - an intro to cssSpectrum 2015   going online with style - an intro to css
Spectrum 2015 going online with style - an intro to css
Neil Perlin
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
JJFajardo1
 
Javascript Html Css A Stepbystep Guide Student Student
Javascript Html Css A Stepbystep Guide Student StudentJavascript Html Css A Stepbystep Guide Student Student
Javascript Html Css A Stepbystep Guide Student Student
zorahpyzer7p
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
QA TrainingHub
 
Css basics
Css basicsCss basics
Css basics
ASIT
 
Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)
shabab shihan
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
sanjay2211
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentation
Neil Perlin
 
Rh10 css presentation
Rh10 css presentationRh10 css presentation
Rh10 css presentation
Neil Perlin
 
Ad

More from Heather Rock (9)

GDI Seattle - Web Accessibility Class 1
GDI Seattle - Web Accessibility Class 1GDI Seattle - Web Accessibility Class 1
GDI Seattle - Web Accessibility Class 1
Heather Rock
 
GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4
Heather Rock
 
GDI Seattle - Intro to JavaScript Class 2
GDI Seattle - Intro to JavaScript Class 2GDI Seattle - Intro to JavaScript Class 2
GDI Seattle - Intro to JavaScript Class 2
Heather Rock
 
GDI Seattle - Intro to JavaScript Class 1
GDI Seattle - Intro to JavaScript Class 1GDI Seattle - Intro to JavaScript Class 1
GDI Seattle - Intro to JavaScript Class 1
Heather Rock
 
GDI Seattle Intro to HTML and CSS - Class 4
GDI Seattle Intro to HTML and CSS - Class 4GDI Seattle Intro to HTML and CSS - Class 4
GDI Seattle Intro to HTML and CSS - Class 4
Heather Rock
 
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 SlidesGDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
Heather Rock
 
GDI Seattle Intro to HTML and CSS - Class 3
GDI Seattle Intro to HTML and CSS - Class 3GDI Seattle Intro to HTML and CSS - Class 3
GDI Seattle Intro to HTML and CSS - Class 3
Heather Rock
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
Heather Rock
 
GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1
Heather Rock
 
GDI Seattle - Web Accessibility Class 1
GDI Seattle - Web Accessibility Class 1GDI Seattle - Web Accessibility Class 1
GDI Seattle - Web Accessibility Class 1
Heather Rock
 
GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4
Heather Rock
 
GDI Seattle - Intro to JavaScript Class 2
GDI Seattle - Intro to JavaScript Class 2GDI Seattle - Intro to JavaScript Class 2
GDI Seattle - Intro to JavaScript Class 2
Heather Rock
 
GDI Seattle - Intro to JavaScript Class 1
GDI Seattle - Intro to JavaScript Class 1GDI Seattle - Intro to JavaScript Class 1
GDI Seattle - Intro to JavaScript Class 1
Heather Rock
 
GDI Seattle Intro to HTML and CSS - Class 4
GDI Seattle Intro to HTML and CSS - Class 4GDI Seattle Intro to HTML and CSS - Class 4
GDI Seattle Intro to HTML and CSS - Class 4
Heather Rock
 
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 SlidesGDI Seattle - Intermediate HTML and CSS Class 3 Slides
GDI Seattle - Intermediate HTML and CSS Class 3 Slides
Heather Rock
 
GDI Seattle Intro to HTML and CSS - Class 3
GDI Seattle Intro to HTML and CSS - Class 3GDI Seattle Intro to HTML and CSS - Class 3
GDI Seattle Intro to HTML and CSS - Class 3
Heather Rock
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
Heather Rock
 
GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1
Heather Rock
 
Ad

Recently uploaded (20)

European Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility TestingEuropean Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility Testing
Julia Undeutsch
 
Introducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and ARIntroducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and AR
Safe Software
 
Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure ModesCognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Dr. Tathagat Varma
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...
pranavbodhak
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
James Anderson
 
Maxx nft market place new generation nft marketing place
Maxx nft market place new generation nft marketing placeMaxx nft market place new generation nft marketing place
Maxx nft market place new generation nft marketing place
usersalmanrazdelhi
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
The case for on-premises AI
The case for on-premises AIThe case for on-premises AI
The case for on-premises AI
Principled Technologies
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Lorenzo Miniero
 
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AI Emotional Actors:  “When Machines Learn to Feel and Perform"AI Emotional Actors:  “When Machines Learn to Feel and Perform"
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AkashKumar809858
 
Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025
Prasta Maha
 
Fortinet Certified Associate in Cybersecurity
Fortinet Certified Associate in CybersecurityFortinet Certified Associate in Cybersecurity
Fortinet Certified Associate in Cybersecurity
VICTOR MAESTRE RAMIREZ
 
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsSupercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMs
Francesco Corti
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
European Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility TestingEuropean Accessibility Act & Integrated Accessibility Testing
European Accessibility Act & Integrated Accessibility Testing
Julia Undeutsch
 
Introducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and ARIntroducing FME Realize: A New Era of Spatial Computing and AR
Introducing FME Realize: A New Era of Spatial Computing and AR
Safe Software
 
Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure ModesCognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Dr. Tathagat Varma
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...
pranavbodhak
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
GDG Cloud Southlake #43: Tommy Todd: The Quantum Apocalypse: A Looming Threat...
James Anderson
 
Maxx nft market place new generation nft marketing place
Maxx nft market place new generation nft marketing placeMaxx nft market place new generation nft marketing place
Maxx nft market place new generation nft marketing place
usersalmanrazdelhi
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Let’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack CommunityLet’s Get Slack Certified! 🚀- Slack Community
Let’s Get Slack Certified! 🚀- Slack Community
SanjeetMishra29
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection FunctionLSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Multistream in SIP and NoSIP @ OpenSIPS Summit 2025
Lorenzo Miniero
 
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AI Emotional Actors:  “When Machines Learn to Feel and Perform"AI Emotional Actors:  “When Machines Learn to Feel and Perform"
AI Emotional Actors: “When Machines Learn to Feel and Perform"
AkashKumar809858
 
Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025
Prasta Maha
 
Fortinet Certified Associate in Cybersecurity
Fortinet Certified Associate in CybersecurityFortinet Certified Associate in Cybersecurity
Fortinet Certified Associate in Cybersecurity
VICTOR MAESTRE RAMIREZ
 
Supercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMsSupercharge Your AI Development with Local LLMs
Supercharge Your AI Development with Local LLMs
Francesco Corti
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 

Intro to HTML and CSS - Class 2 Slides

  • 1. BEGINNING HTML AND CSS CLASS 2HTML/CSS ~ Girl Develop It ~
  • 3. CSS Stands for Cascading Style Sheets. Refers to the hierarchical way that styles get applied to html elements.
  • 4. WHAT WE'LL LEARN TODAY A little CSS history. Terminology and syntax. Ways to attach CSS to your page. Selectors. Colors and Fonts.
  • 5. HISTORY OF CSS The 90s HTML pages read from top to bottom, black font, no color, and all default browser styles. Fine for science papers, but designers said "We Want More!" 1993: The first graphical browser is born — "Mosaic" 1994: World Wide Web Consortium is inaugurated (W3C) and the World Wide Web is born.
  • 6. HISTORY OF CSS Late 90s 1996: Specifications for CSS1 are released (a year before HTML 4.0). CSS1 is buggy and poorly adopted. 1998: W3C releases CSS2. CSS2 is buggy and poorly adopted. Meanwhile, table-based layouts and browser wars are rampant!
  • 7. HISTORY OF CSS The 00s 1999 - 2000: Work is begun on CSS2.1 to fix bugs in CSS 2. 2004: The working draft becomes a candidate for adoption by the W3C. It reverts back to working draft in 2005. 2007: The working draft again becomes a candidate for adoption by the W3C 2010: It reverts back to a working draft. 2011: June 7th, CSS2.1 is finally "sanctified" by the W3C.
  • 8. HISTORY OF CSS CSS3 CSS3, begun in 2000, is still mostly in working-draft stage. Modular release (rather than one single adoption). 2013: Most modules still in working-draft stage ...some released and adopted by modern browsers.
  • 9. CSS: WHAT DOES IT LOOK LIKE?
  • 11. LET'S CODE SOME CSS! <head> <title> My Very First Web Page! </title> <style> h1 { color: blue; background-color: yellow; } </style> </head>
  • 12. NOW SAVE YOUR PAGE Open it up in a browser Does your heading look different?
  • 13. CSS TERMINOLOGY: CSS is composed of style "rules" Here is a style rule:
  • 14. SYNTAX IS IMPORTANT! h1 { color: blue; background-color: yellow; } There are no limits to the number of declarations in a style rule. Common convention is to use lower case throughout. Don't forget the semicolon at the end of the declarations! Don't forget the closing curly bracket!
  • 15. ATTACHING CSS TO YOUR WEB PAGE There are three ways Inline Embedded Linked
  • 16. INLINE <p style="color: red;">Some text.</p> The style goes right inside the opening HTML tag. Uses "style", which is an HTML attribute. Difficult to use in large projects.
  • 17. EMBEDDED This is how we did it in our opening exercise. "Embedded" inside the <head> element between an opening and closing <style> tag. If styles are identical across multiple pages in your site -- you'd have to copy and paste for each page.
  • 18. LINKED All your styles go on their own style sheet! A <link> tag in your HTML file points to the location of the style sheet <head> <title> My Very First Web Page! </title> <link rel="stylesheet" type="text/css" href="style.css"> </head>
  • 19. ADVANTAGES OF LINKED (EXTERNAL) STYLE SHEETS: Shared resource for several pages. Reduced file size & bandwidth Easy to maintain in larger projects.
  • 20. LET'S CODE IT (PART 1) 1. Open a new page in your text editor. 2. Copy the rule you created between the style tags on your index.html (not the tags themselves, though). 3. Paste it in your new page. 4. Save your page inside the "styles" folder you created earlier. Name it "styles.css".
  • 21. LET'S CODE IT (PART 2) 5. Delete the style tags and everything within them on your index.html page. 6. In their place, code the following: <link rel="stylesheet" type="text/css" href="styles/styles.css"> 7. Save your index.html page and open it in a browser. Does the style still show on your page?
  • 22. SELECTORS The first item in a style rule. Describes what is being styled. h1 { color: blue; background-color: yellow; }
  • 23. WHAT CAN WE USE AS SELECTORS? HTML tags. Classes and ids. Pseudo classes. Any combination of the above!
  • 24. HTML TAGS: p { property: value; } This would select every paragraph element. img { property: value; } This would select every image element. ...but what if you need more control?
  • 25. CLASSES AND IDS "Class" and "ID" are HTML attributes. Attributes "describe" elements and are followed by values. In your HTML, it looks like this: <p id="intro"> <span class="warning">
  • 26. IDS VS. CLASSES ID: An id can only be used once on a page. Refers to a singular page element (like a footer). Think ~ A student ID number Class: Lots of elements can have the same class. I.E. There can be many spans with a class of "warning". Think ~ A student as a member of a class
  • 27. CLASSES <p class="warning"> .warning { property: value; } A class name is preceeded by a period in your style rule.
  • 28. IDS <p id="intro"> #intro { property: value; } An id name is preceeded by a pound sign in your style rule.
  • 29. NAMING YOUR CLASS OR ID: Can use letters, numbers, underscore or dash (but don't start with a number or a dash followed by number). No spaces — use a hyphen or underscore CSS is case-insensitive, but the convention is to use all lowercase letters. In your HTML, class and id names are in quotes (just like all other attribute values).
  • 30. LET'S CODE IT! Add these rules to your "styles.css" file: #intro { color: blue; } .warning { color: red; } Add an id of "intro" to your first paragraph. Find a word or sentence in your "index.html" file and wrap in span tags with a class of "warning".
  • 32. PSEUDO CLASSES Describes a "current condition" of an HTML element, rather than an "attribute". Link pseudo classes are the most common example: a:hover to style a link when user "hovers" over it
  • 33. LINK PSEUDO CLASSES a:link ~unvisited link a:visited ~visited link a:hover ~mouse over link a:active ~activated link If present, a:hover must come after a:link and a:visited. If present, a:active must come after a:hover.
  • 34. LET'S SPICE UP OUR LINKS! a:link { color: blue; } a:visited { color: yellow; } a:hover { color: green; } a:active { color: purple; }
  • 35. COMPOUND SELECTORS Combining selectors to get really specific! p em { property: value; } Selects all em elements that are within a paragraph #intro a { property: value; } Selects all link elements in elements with an id of "intro".
  • 36. LET'S ADD A COMPOUND SELECTOR RULE! #intro a { font-style: italic; }
  • 37. STYLING WITH COLOR AND FONTS COLOR The color property sets the color of the font. The background-color property sets the color of the background. Color value can be defined in one of three ways: By a recognized color name By a hexadecimal value By an RGB value
  • 38. RECOGNIZED COLOR NAMES The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. There are 141 named colors: http://www.w3schools.com/cssref/css_colornames.asp
  • 39. HEXADECIMAL VALUES Example — color: #A53C8D A pound sign followed by three pairs The first pair equates to red value The second pair equates to green value The third pair equates to blue value
  • 40. RGB VALUES Example — color: rgb(165, 60, 141) Three comma-separated numbers from 0 to 255 The first number equates to red value The second number equates to green value The third number equates to blue value CSS3 introduces a 4th value, "a", setting opacity Example — color: rgba(165, 60, 141, 0.5)
  • 41. FONT 5 DIFFERENT PROPERTIES TO STYLE FONT! 1. font-style example: font-style: italic; values: "normal", "italic", or "oblique" 2. font-variant example: font-variant: small-caps; values: "normal", "small-caps", or "inherit"
  • 42. 3. font-weight example: font-weight: bold; values: "normal", "bold", "bolder", "lighter", 4. font-size example: font-size: 12px; values: fixed: pixels (ie 12px) relative: percents (ie 100%) and ems (ie 1.5em)
  • 43. 5. font-family example: font-family: Corbel,'Helvetica Neue', Helvetica, Arial, sans-serif; Computers don't all have the same fonts installed...so provide alternatives Specific to general, in a comma-separated list. Fonts with two-word names are in quotes
  • 44. BONUS FONT PROPERTIES! 6. text-transform example: text-transform: uppercase; values: "capitalize", "uppercase", "lowercase", or "none" 7. line-height example: line-height: 1.5; values: numbers, percents, pixels, or "ems"
  • 45. SHORTHAND FONT DECLARATION example: font: italic small-caps bold 34px/150% "Times New Roman", Times, serif; font-style → font-variant → font-weight → font-size / line height → font-family you must declare at minimum the font-size and font-family example: font: 34px "Times New Roman", Times, serif;
  • 46. LET'S CODE IT! Add the shorthand font rule to your heading h1 { font: italic bold 34px Corbel,'Helvetica Neue', Helvetica, Arial, sans-serif; }
  • 47. CASCADING Styles "cascade" down until changed p{ color:blue; font-family:'Helvetica'; } .red{ color:red; } #special{ font-family:Arial; } <p>Paragraph</p> <pclass="green">Paragraph</p> <pclass="red">Paragraph</p> <pclass="red"id="special">Paragraph</p>
  • 48. CSS PROPERTIES Many CSS properties have self-explanatory names: background-color font-family font-size color width height https://developer.mozilla.org/en- US/docs/Web/CSS/Reference Comprehensive list of all CSS properties: