23
inarocket.com Learn at rocket speed CSS GETTING STARTED
| Date post: | 21-Apr-2017 |
| Category: |
Engineering |
| Upload: | in-a-rocket |
| View: | 14,436 times |
| Download: | 0 times |
inarocket.com
Learn at rocket speed
CSSGETTING STARTED
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
What is CSS
inarocket.com - CSS / Getting Started
WHAT IS CSS
C S SCascading Style SheetsWhat means “cascading”? Don’t worry. We will learn about it later.
inarocket.com - CSS / Getting Started
WHAT IS CSS
+CSSContent presentation
JAVASCRIPTContent behavior
HTMLContent structure +
Why use CSS
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…
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.
Get ready in 5 minutes
inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
21 3
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.
inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
21 3
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
inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES
+EDITORe.g. Notepad
BROWSERe.g. Firefox
FOLDERSProject structure +
21 3
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
Quick start
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
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
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
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
Are you also interested in learning
BOOTSTRAP 4POSTCSS?+
http://inarocket.teachable.com/courses/css-postcssPlease visit:
Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
inarocket.com
Learn at rocket speed
CSSGETTING STARTED
