Learn CSS3: Getting Started

inarocket.com
Learn at rocket speed
CSSGETTING STARTED

Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com

inarocket.com - CSS / Getting Started
WHAT IS CSS
C S SCascading Style Sheets
What means “cascading”? Don’t worry. We will learn about it later.

WHAT IS CSS
+CSS
Content presentation
JAVASCRIPT
Content behavior
HTML
Content structure +

WHY USE CSS
A few years ago: every HTML ﬁle had a mix of content + styles.
Problem: to update any style in a web site, you had to modify all the HTML ﬁles.
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…

WHY USE CSS
Present day: HTML ﬁles only have content and are linked to independent CSS ﬁles (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
+EDITOR
e.g. Notepad
BROWSER
e.g. Firefox
FOLDERS
Project structure +
21 3

GET READY IN 5 MINUTES: FOLDERS
Create 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 ﬁles that you
created in the previous course.
Important rules for naming folders and ﬁles.
• Never use spaces.
• Never use special characters (%, *, +, etc.).
• Avoid uppercases.

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

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
Let’s get started with:
• 2 HTML ﬁles linked to
• 1 CSS ﬁle.
projectname
img
css
js
page1.html
HTML
page2.html
HTML
style.css
CSS

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>
Save as page2.html

QUICK START: CSS SYNTAX
p {color: blue}
Property
Selector Declaration
Value
With this code all paragraphs are shown in blue

QUICK START: CSS FILE
p {color: blue}
Save as style.css
Browser (what you should view)
Open page1.html in your browser(in your css folder)
This is page 1
Here goes a paragraph
page1.html

Are you also interested in learning
BOOTSTRAP 4
POSTCSS?
+
http://inarocket.teachable.com/courses/css-postcss
Please visit:

Learn CSS3: Getting Started

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (14)

Mehr von In a Rocket

Mehr von In a Rocket (16)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Learn CSS3: Getting Started