Learn CSS3: Getting Started

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 Sheets What means “cascading”? Don’t worry. We will learn about it later.

inarocket.com - CSS / Getting Started WHAT IS CSS +CSS Content presentation JAVASCRIPT Content behavior HTML Content structure +

Why use CSS

inarocket.com - CSS / Getting Started 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…

inarocket.com - CSS / Getting Started 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

inarocket.com - CSS / Getting Started GET READY IN 5 MINUTES +EDITOR e.g. Notepad BROWSER e.g. Firefox FOLDERS Project structure + 21 3

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 ﬁ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.

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: 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 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

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 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 front-end development at rocket speed inarocket.com by miguelsanchez.com

inarocket.com Learn at rocket speed CSSGETTING STARTED

Learn CSS3: Getting Started

In a Rocket

Learn CSS3: Getting Started