HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
Learn CSS3: Getting Started
-
Upload
in-a-rocket -
Category
Engineering
-
view
14.438 -
download
0
Transcript of Learn CSS3: Getting Started
![Page 1: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/1.jpg)
inarocket.com
Learn at rocket speed
CSSGETTING STARTED
![Page 2: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/2.jpg)
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
![Page 3: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/3.jpg)
What is CSS
![Page 4: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/4.jpg)
inarocket.com - CSS / Getting Started
WHAT IS CSS
C S SCascading Style SheetsWhat means “cascading”? Don’t worry. We will learn about it later.
![Page 5: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/5.jpg)
inarocket.com - CSS / Getting Started
WHAT IS CSS
+CSSContent presentation
JAVASCRIPTContent behavior
HTMLContent structure +
![Page 6: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/6.jpg)
Why use CSS
![Page 7: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/7.jpg)
inarocket.com - CSS / Getting Started
WHY USE CSS
A few years ago: every HTML file had a mix of content + styles. Problem: to update any style in a web site, you had to modify all the HTML files.
website
content + styles
HTML
content + styles
HTML
content + styles
HTML
content + styles
HTML
content + styles
HTML
content + styles
HTML
content + styles
HTML
content + styles
HTML
Client
You
I don’t like my website’s headers in black. Could you please change them to blue?
Noooooooooooooooooooooooooo!!!!!!!!!! It will take me hours…
![Page 8: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/8.jpg)
inarocket.com - CSS / Getting Started
WHY USE CSS
Present day: HTML files only have content and are linked to independent CSS files (styles). Solution: to update any style in a web site, you only have to modify your CSS.
website
styles
CSS
content
HTML
content
HTML
content
HTML
content
HTML
Client
You
I don’t like my website’s headers in black. Could you please change them to blue?
Sure! Done in a minute.
![Page 9: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/9.jpg)
Get ready in 5 minutes
![Page 10: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/10.jpg)
inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
21 3
![Page 11: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/11.jpg)
inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES: FOLDERSCreate the folders that will contain the web project on your computer.
projectname: • img (will contain images) • css (will contain stylesheets) • js (will contain JavaScripts)
projectname
img
css
js
Here are the HTML files that you created in the previous course.
Important rules for naming folders and files. • Never use spaces. • Never use special characters (%, *, +, etc.). • Avoid uppercases.
![Page 12: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/12.jpg)
inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
21 3
![Page 13: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/13.jpg)
inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES: EDITOR
Editor: pre-installed
You can just use any text editor preinstalled in your computer.
Notepad TextEdit Gedit
Editor: additional
There are other editors but you won't need their advanced features for this course.
Sublime Text Atom
![Page 14: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/14.jpg)
inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
21 3
![Page 15: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/15.jpg)
inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES: BROWSER
Browser: pre-installed
You can just use any preinstalled browser in your computer.
Edge Safari Firefox
Browser: additional
There are other browsers that you can also install in your computer.
Chrome Firefox Opera
![Page 16: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/16.jpg)
Quick start
![Page 17: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/17.jpg)
inarocket.com - CSS / Getting Started
QUICK STARTLet’s get started with: • 2 HTML files linked to • 1 CSS file.
projectname
img
css
js
page1.html
HTML
page2.html
HTML
style.css
CSS
![Page 18: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/18.jpg)
inarocket.com - CSS / Getting Started
QUICK START: HTML FILES
<!doctype html><html><head><title>Page One</title><link rel=“stylesheet” href=“css/style.css”></head><body><h1>This is page 1</h1><p>Here goes a paragraph</p></body></html>
Editor (what you should write)
Save as page1.html
<!doctype html><html><head><title>Page Two</title><link rel=“stylesheet” href=“css/style.css”></head><body><h1>This is page 2</h1><p>Here goes a paragraph</p></body></html>
Editor (what you should write)
Save as page2.html
![Page 19: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/19.jpg)
inarocket.com - CSS / Getting Started
QUICK START: CSS SYNTAX
p {color: blue}Property
Selector Declaration
Value
With this code all paragraphs are shown in blue
![Page 20: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/20.jpg)
inarocket.com - CSS / Getting Started
QUICK START: CSS FILE
p {color: blue}
Editor (what you should write)
Save as style.css
Browser (what you should view)
Open page1.html in your browser(in your css folder)
This is page 1Here goes a paragraph
page1.html
![Page 21: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/21.jpg)
Are you also interested in learning
BOOTSTRAP 4POSTCSS?+
http://inarocket.teachable.com/courses/css-postcssPlease visit:
![Page 22: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/22.jpg)
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
![Page 23: Learn CSS3: Getting Started](https://reader036.fdocuments.in/reader036/viewer/2022062523/58f9b385760da3da068bd6f3/html5/thumbnails/23.jpg)
inarocket.com
Learn at rocket speed
CSSGETTING STARTED