7. 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…
8. 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.
10. inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES
+EDITOR
e.g. Notepad
BROWSER
e.g. Firefox
FOLDERS
Project structure +
21 3
11. inarocket.com - CSS / Getting Started
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 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.
12. inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES
+EDITOR
e.g. Notepad
BROWSER
e.g. Firefox
FOLDERS
Project structure +
21 3
13. 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
14. inarocket.com - CSS / Getting Started
GET READY IN 5 MINUTES
+EDITOR
e.g. Notepad
BROWSER
e.g. Firefox
FOLDERS
Project structure +
21 3
15. 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
17. inarocket.com - CSS / Getting Started
QUICK START
Let’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
18. 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
19. 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
20. 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 1
Here goes a paragraph
page1.html
21. Are you also interested in learning
BOOTSTRAP 4
POSTCSS?
+
http://inarocket.teachable.com/courses/css-postcss
Please visit: