Learn CSS3: Getting Started
•
66 recomendaciones•15,529 vistas
http://inarocket.com Learn CSS3 fundamentals as fast as possible. CSS syntax, why use CSS, inline / embeded / external styles, measurements, selectors (universal, element, id, class, descendent, child, sibbling, attribute, pseudo-class, nth-child), inheritance, gradients, shadows, rounded corners, browser support, etc.
Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (14)
Más de In a Rocket
Más de In a Rocket (16)
Último
Último (20)
Learn CSS3: Getting Started
- 1. inarocket.com Learn at rocket speed CSSGETTING STARTED
- 2. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
- 3. What is CSS
- 4. 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.
- 5. inarocket.com - CSS / Getting Started WHAT IS CSS +CSS Content presentation JAVASCRIPT Content behavior HTML Content structure +
- 6. Why use CSS
- 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.
- 9. Get ready in 5 minutes
- 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
- 16. Quick start
- 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:
- 22. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com
- 23. inarocket.com Learn at rocket speed CSSGETTING STARTED