SlideShare a Scribd company logo
1 of 44
Download to read offline
1
Allyson
Wehrs
Who am I?
Web Engineer with LuminFire
Experience
Interests
Overview
• HTML
• CSS
• CSS and WordPress
• CSS Preprocessors
HTML
HTML Tags
<tag></tag>
<tag />
• html
• head
• title
• body
HTML Elements
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
</body>
</html>
Paragraphs
Hello World
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Div
Title
Hello World
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
<div>
<h1>Title</h1>
<p>Hello World</p>
</div>
</body>
</html>
Unordered List
• Item 1
• Item 2
• Item 3
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Ordered List
1. Item 1
2. Item 2
3. Item 3
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>
Links
Click Me
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
<a href=” https://luminfire.com/”>Click Me</a>
</body>
</html>
Images
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
<img src=”picture.jpg” width=”200” height=”200” alt=”orange sunset” />
</body>
</html>
Buttons
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
<button type=”button”>Click Me!</button>
</body>
</html>
Click Me!
• header
• nav
• main
• aside
• footer
Semantic Elements
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<p>Page content</p>
<aside></aside>
</main>
<footer>
<p>&copy;</p>
</footer>
</body>
</html>
• Classes
• IDs
Uniquely Identify
Elements
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
<h1 id=”page-title”>Title</h1>
<h2 class=”section-title”>Section Title</h2>
<p>content</p>
<p class=”secondary-content”>content</p>
<h2 class=”section-title”>Section Title</h2>
<p>content</p>
<p class=”secondary-content”>content</p>
<h2 class=”section-title”>Section Title</h2>
<p>content</p>
</body>
</html>
CSS
CSS Block
.content p {
font-family: ‘Open Sans’, sans-serif;
font-size: 16px;
color: blue;
}
#page-title {
margin-bottom: 20px;
}
h1 {color:pink; opacity:1;}
Selector
Declaration
Declaration
Property Property
Value Value
CSS Box Model
Margin
Border
Padding
Content
Block & Inline
Elements
<!DOCTYPE html>
<html>
<head>
<title>Title of my web page</title>
</head>
<body>
<p>Page <span>content</span></p>
<p>Page content</p>
</body>
</html>
Page content
Page content
Block & Inline
Elements
<body>
<p>Page <span>content</span></p>
<p>Page content</p>
</body>
Page
content
Page content
span {
display: block;
}
Floats
<body>
<img src=”picture.jpg” alt=”orange sunset”/>
<p>Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem
ipsum dolor lorem ipsum sor tempor consequat. Eoes
qui commondo autem.</p>
</body>
img {
float: left;
}
Lorem Ipsum dolor,
lorem ipsum sor
tempor consequat.
Lorem ipsum dolor
lorem ipsum sor
tempor consequat. Eoes qui commondo
autem.
Some Commonly Used Selectors
color
background-color
height
width
font-family
font-size
font-weight
text-align
• left
• right
• center
How to use CSS on you WordPress Site


• Child Theme

◦ Text Editor
◦ FTP
• Theme Editor

Floats
<body>
<img id=”post-image” src=”picture.jpg” alt=”orange sunset” />
<p>Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem
ipsum dolor lorem ipsum sor tempor consequat. Eoes
qui commondo autem.</p>
</body>
img {
float: left;
}
Lorem Ipsum dolor, lorem ipsum sor
tempor consequat. Lorem ipsum dolor
lorem ipsum sor tempor consequat. Eoes
qui commondo autem.
?!
Floats
#post-image {
float: none;
}
img {
float: left;
}
Lorem Ipsum dolor, lorem ipsum sor
tempor consequat. Lorem ipsum dolor
lorem ipsum sor tempor consequat. Eoes
qui commondo autem.
<main.css>
<plugin.css>
Specificity Wars!
Specificity
Lorem Ipsum dolor, lorem ipsum sor
tempor consequat. Lorem ipsum dolor
lorem ipsum sor tempor consequat. Eoes
qui commondo autem.
<main.css>
p {
color: blue;
}
p {
color: red;
}
Specificity
Lorem Ipsum dolor, lorem ipsum sor
tempor consequat. Lorem ipsum dolor
lorem ipsum sor tempor consequat. Eoes
qui commondo autem.
<main.css>
#post-paragraph {
color: blue;
}
p {
color: red;
}
Specificity
#post-paragraph {
color: blue;
}
p {
color: red;
}
Lorem Ipsum dolor, lorem ipsum sor
tempor consequat. Lorem ipsum dolor
lorem ipsum sor tempor consequat. Eoes
qui commondo autem.
<main.css>
<body>
<img id=”post-image” src=”picture.jpg” alt=”orange sunset”/>
<p id=”post-paragraph” style=”color:purple”>Lorem Ipsum dolor,
lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum
sor tempor consequat. Eoes qui commondo autem.</p>
</body>
Specificity
#post-paragraph {
color: blue !important;
}
p {
color: red;
}
Lorem Ipsum dolor, lorem ipsum sor
tempor consequat. Lorem ipsum dolor
lorem ipsum sor tempor consequat. Eoes
qui commondo autem.
<main.css>
<body>
<img id=”post-image” src=”picture.jpg” alt=”orange sunset”/>
<p id=”post-paragraph” style=”color:purple”>Lorem Ipsum dolor,
lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum
sor tempor consequat. Eoes qui commondo autem.</p>
</body>
Specificity
Lorem Ipsum dolor,
lorem ipsum sor
tempor consequat.
Lorem ipsum dolor
lorem ipsum sor
tempor consequat. Eoes qui commondo
autem.
<plugin.css>
<main.css>
.post-image {
float: none;
}
body .post-image {
float: left;
}
Flexbox
Flexbox
<body>
<div class=”flexbox-parent”>
<div class=”flexbox-child”><p>Box 1</p></div>
<div class=”flexbox-child”><p>Box 2</p></div>
<div class=”flexbox-child”><p>Box 3</p></div>
</div>
</body>
.flexbox-parent {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flexbox-child {
width: 33%;
}
Box 1 Box 2 Box 3
Sass
Sass
.product-page {
color: #333;
}
.product-page .product-description {
margin: 0 auto;
}
.product-page .product-description p {
padding: 20px;
font-weight: normal;
}
.product-page .product-footer {
margin-top: 30px;
color: white;
}
CSS
.product-page {
color: #333;
.product-description {
margin: 0 auto;
p {
padding: 20px;
font-weight: normal;
}
}
.product-footer {
margin-top: 30px;
color: white;
}
}
Sass CSS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Sass CSS
@mixin border-radius($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
.box	{	
	 -webkit-border-radius: 10px;	
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Sass CSS
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.columns {
@extend %equal-heights;
justify-content: space-between;
}
.columns {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
Sass CSS
.content {
float: left;
width: 600px / 960px * 100%;
}
.content {
float: left;
width: 62.5%;
}
Learning Resources - HTML/CSS Basics
• freeCodeCamp (www.freecodecamp.org)
• Codecademy (www.codecademy.com)
• W3schools - CSS Tutorial (www.w3schools.com/css/default.asp)
• Mozilla Developer Network - Intro to CSS
(https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS)
• The 30 CSS Selectors you must memorize
(https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)
Learning Resources - Advanced CSS
• Scalable and Modular Architecture for CSS (smacss.com)

• CSS Preprocessors

◦Sass (sass-lang.com)

◦Less (lesscss.org)

◦Stylus (stylus-lang.com)

• A Complete Guide to Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
• Specifics on CSS Specificity (https://css-tricks.com/specifics-on-css-specificity/)
Questions

More Related Content

What's hot

Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorialMohammed Fazuluddin
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentationBojan Golubović
 
Full-Stack Development
Full-Stack DevelopmentFull-Stack Development
Full-Stack DevelopmentDhilipsiva DS
 
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...Edureka!
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first courseVlad Posea
 
HTTP Request and Response Structure
HTTP Request and Response StructureHTTP Request and Response Structure
HTTP Request and Response StructureBhagyashreeGajera1
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation洪 鹏发
 

What's hot (20)

Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 
React workshop
React workshopReact workshop
React workshop
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
 
Php Tutorials for Beginners
Php Tutorials for BeginnersPhp Tutorials for Beginners
Php Tutorials for Beginners
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
 
Full-Stack Development
Full-Stack DevelopmentFull-Stack Development
Full-Stack Development
 
jQuery
jQueryjQuery
jQuery
 
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
JavaScript Tutorial For Beginners | JavaScript Training | JavaScript Programm...
 
Flask – Python
Flask – PythonFlask – Python
Flask – Python
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 
PHP - Introduction to PHP Fundamentals
PHP -  Introduction to PHP FundamentalsPHP -  Introduction to PHP Fundamentals
PHP - Introduction to PHP Fundamentals
 
Introduction to Redux
Introduction to ReduxIntroduction to Redux
Introduction to Redux
 
Angular
AngularAngular
Angular
 
Php Ppt
Php PptPhp Ppt
Php Ppt
 
HTTP Request and Response Structure
HTTP Request and Response StructureHTTP Request and Response Structure
HTTP Request and Response Structure
 
Flask
FlaskFlask
Flask
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 

Similar to Basic HTML CSS Slides

TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單偉格 高
 
LIS3353 SP12 Week 4
LIS3353 SP12 Week 4LIS3353 SP12 Week 4
LIS3353 SP12 Week 4Amanda Case
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System Channy Yun
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and RenderingStoyan Stefanov
 
Js placement
Js placementJs placement
Js placementSireesh K
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Stoyan Stefanov
 
Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Katie Sylor-Miller
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSdanpaquette
 
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Katie Sylor-Miller
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]Dalibor Gogic
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Terry Ryan
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)christopherfross
 

Similar to Basic HTML CSS Slides (20)

TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
Artdm171 Week4 Tags
Artdm171 Week4 TagsArtdm171 Week4 Tags
Artdm171 Week4 Tags
 
Html Hands On
Html Hands OnHtml Hands On
Html Hands On
 
LIS3353 SP12 Week 4
LIS3353 SP12 Week 4LIS3353 SP12 Week 4
LIS3353 SP12 Week 4
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
Js placement
Js placementJs placement
Js placement
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
 
Seven deadly theming sins
Seven deadly theming sinsSeven deadly theming sins
Seven deadly theming sins
 
Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 
Hardcore HTML
Hardcore HTMLHardcore HTML
Hardcore HTML
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Critical Rendering Path
Critical Rendering PathCritical Rendering Path
Critical Rendering Path
 
Html coding
Html codingHtml coding
Html coding
 
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)
 

Recently uploaded

JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialJoão Esperancinha
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentMahmoud Rabie
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 

Recently uploaded (20)

JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorial
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Digital Tools & AI in Career Development
Digital Tools & AI in Career DevelopmentDigital Tools & AI in Career Development
Digital Tools & AI in Career Development
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 

Basic HTML CSS Slides

  • 1. 1
  • 2.
  • 3. Allyson Wehrs Who am I? Web Engineer with LuminFire Experience Interests
  • 4. Overview • HTML • CSS • CSS and WordPress • CSS Preprocessors
  • 7. • html • head • title • body HTML Elements <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> </body> </html>
  • 8. Paragraphs Hello World <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <p>Hello World</p> </body> </html>
  • 9. Headings Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>
  • 10. Div Title Hello World <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <div> <h1>Title</h1> <p>Hello World</p> </div> </body> </html>
  • 11. Unordered List • Item 1 • Item 2 • Item 3 <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html>
  • 12. Ordered List 1. Item 1 2. Item 2 3. Item 3 <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> </body> </html>
  • 13. Links Click Me <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <a href=” https://luminfire.com/”>Click Me</a> </body> </html>
  • 14. Images <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <img src=”picture.jpg” width=”200” height=”200” alt=”orange sunset” /> </body> </html>
  • 15. Buttons <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <button type=”button”>Click Me!</button> </body> </html> Click Me!
  • 16. • header • nav • main • aside • footer Semantic Elements <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <header> <nav></nav> </header> <main> <p>Page content</p> <aside></aside> </main> <footer> <p>&copy;</p> </footer> </body> </html>
  • 17. • Classes • IDs Uniquely Identify Elements <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <h1 id=”page-title”>Title</h1> <h2 class=”section-title”>Section Title</h2> <p>content</p> <p class=”secondary-content”>content</p> <h2 class=”section-title”>Section Title</h2> <p>content</p> <p class=”secondary-content”>content</p> <h2 class=”section-title”>Section Title</h2> <p>content</p> </body> </html>
  • 18. CSS
  • 19. CSS Block .content p { font-family: ‘Open Sans’, sans-serif; font-size: 16px; color: blue; } #page-title { margin-bottom: 20px; } h1 {color:pink; opacity:1;} Selector Declaration Declaration Property Property Value Value
  • 21. Block & Inline Elements <!DOCTYPE html> <html> <head> <title>Title of my web page</title> </head> <body> <p>Page <span>content</span></p> <p>Page content</p> </body> </html> Page content Page content
  • 22. Block & Inline Elements <body> <p>Page <span>content</span></p> <p>Page content</p> </body> Page content Page content span { display: block; }
  • 23. Floats <body> <img src=”picture.jpg” alt=”orange sunset”/> <p>Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem.</p> </body> img { float: left; } Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem.
  • 24. Some Commonly Used Selectors color background-color height width font-family font-size font-weight text-align • left • right • center
  • 25. How to use CSS on you WordPress Site 
 • Child Theme
 ◦ Text Editor ◦ FTP • Theme Editor

  • 26. Floats <body> <img id=”post-image” src=”picture.jpg” alt=”orange sunset” /> <p>Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem.</p> </body> img { float: left; } Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. ?!
  • 27. Floats #post-image { float: none; } img { float: left; } Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <main.css> <plugin.css>
  • 29. Specificity Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <main.css> p { color: blue; } p { color: red; }
  • 30. Specificity Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <main.css> #post-paragraph { color: blue; } p { color: red; }
  • 31. Specificity #post-paragraph { color: blue; } p { color: red; } Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <main.css> <body> <img id=”post-image” src=”picture.jpg” alt=”orange sunset”/> <p id=”post-paragraph” style=”color:purple”>Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem.</p> </body>
  • 32. Specificity #post-paragraph { color: blue !important; } p { color: red; } Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <main.css> <body> <img id=”post-image” src=”picture.jpg” alt=”orange sunset”/> <p id=”post-paragraph” style=”color:purple”>Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem.</p> </body>
  • 33. Specificity Lorem Ipsum dolor, lorem ipsum sor tempor consequat. Lorem ipsum dolor lorem ipsum sor tempor consequat. Eoes qui commondo autem. <plugin.css> <main.css> .post-image { float: none; } body .post-image { float: left; }
  • 35. Flexbox <body> <div class=”flexbox-parent”> <div class=”flexbox-child”><p>Box 1</p></div> <div class=”flexbox-child”><p>Box 2</p></div> <div class=”flexbox-child”><p>Box 3</p></div> </div> </body> .flexbox-parent { display: flex; flex-wrap: wrap; justify-content: space-between; } .flexbox-child { width: 33%; } Box 1 Box 2 Box 3
  • 36. Sass
  • 37. Sass .product-page { color: #333; } .product-page .product-description { margin: 0 auto; } .product-page .product-description p { padding: 20px; font-weight: normal; } .product-page .product-footer { margin-top: 30px; color: white; } CSS .product-page { color: #333; .product-description { margin: 0 auto; p { padding: 20px; font-weight: normal; } } .product-footer { margin-top: 30px; color: white; } }
  • 38. Sass CSS $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } body { font: 100% Helvetica, sans-serif; color: #333; }
  • 39. Sass CSS @mixin border-radius($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }
  • 40. Sass CSS %equal-heights { display: flex; flex-wrap: wrap; } .columns { @extend %equal-heights; justify-content: space-between; } .columns { display: flex; flex-wrap: wrap; justify-content: space-between; }
  • 41. Sass CSS .content { float: left; width: 600px / 960px * 100%; } .content { float: left; width: 62.5%; }
  • 42. Learning Resources - HTML/CSS Basics • freeCodeCamp (www.freecodecamp.org) • Codecademy (www.codecademy.com) • W3schools - CSS Tutorial (www.w3schools.com/css/default.asp) • Mozilla Developer Network - Intro to CSS (https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS) • The 30 CSS Selectors you must memorize (https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)
  • 43. Learning Resources - Advanced CSS • Scalable and Modular Architecture for CSS (smacss.com)
 • CSS Preprocessors
 ◦Sass (sass-lang.com)
 ◦Less (lesscss.org)
 ◦Stylus (stylus-lang.com)
 • A Complete Guide to Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) • Specifics on CSS Specificity (https://css-tricks.com/specifics-on-css-specificity/)