Intro to html, css & sass
â˘
3 gostaramâ˘1,049 visualizaçþes
An intro to HTML, CSS and SASS
Recomendados
Mais conteĂşdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a Intro to html, css & sass
Semelhante a Intro to html, css & sass (20)
Ăltimo
Ăltimo (20)
Intro to html, css & sass
- 1. An intro to HTML, CSS, & SASS
- 2. Sean Wolfe sean@zivtech.com ⢠Creative Director at Zivtech in Philadelphia ⢠Designing and theming Drupal sites since 2008 ⢠UPenn, Carilion Clinic, Temple University
- 3. ⢠A Text editor ⢠A local webserver (http://www.mamp.info/en) ⢠Github account (https://github.com) ⢠SASS (http://sass-lang.com/install) ⢠Compass (http://compass-style.org/install) ⢠Bundler (http://bundler.io) ⢠Livereload (http://livereload.com/)* ! *optional but highly recommended Tools
- 4. ⢠HTML stands for Hyper Text Markup Language ⢠HTML is a markup language ⢠HTML documents contain HTML tags and plain text ⢠HTML documents are also called web pages What is HTML?
- 5. ⢠HTML tags are keywords (tag names) surrounded by angle brackets like <html> ⢠HTML tags normally come in pairs like <p> and </p> ⢠The ďŹrst tag in a pair is the start tag, the second tag is the end tag ⢠The end tag is written like the start tag, with a slash before the tag name ⢠Start and end tags are also called opening tags and closing tags HTML Tags
- 6. ⢠HTML5 is the latest standard for HTML. ⢠<canvas> is an element for 2D drawing ⢠<video> and <audio> are elements for media playback ⢠HTML5 uses new content-speciďŹc elements, like <article>, <footer>, <header>, <nav>, <section HTML5
- 10. ⢠The DOCTYPE declaration deďŹnes the document type ⢠The text between <html> and </html> describes the web page ⢠The <head> element is a container for all the head elements. ⢠The text between <body> and </body> is the visible page content ⢠The text between <h1> and </h1> is displayed as a heading ⢠The text between <p> and </p> is displayed as a paragraph Basic HTML
- 11. ⢠The <title> tag deďŹnes the title of the document. ⢠The <link> tag deďŹnes the relationship between a document and an external resource. ⢠The <style> tag is used to deďŹne style information for an HTML document. ⢠The <meta> tag provides metadata about the HTML document. ⢠The <script> tag is used to deďŹne a client-side script, such as a JavaScript. HTML Head
- 12. ⢠The DOCTYPE declaration deďŹnes the document type ⢠The text between <html> and </html> describes the web page ⢠The text between <body> and </body> is the visible page content ⢠The text between <h1> and </h1> is displayed as a heading ⢠The text between <p> and </p> is displayed as a paragraph Basic HTML
- 13. HTML Headings ⢠HTML headings are deďŹned with the <h1> to <h6> tags.
- 14. HTML Headings ⢠HTML headings are deďŹned with the <h1> to <h6> tags.
- 15. HTML Paragraphs ⢠HTML paragraphs are deďŹned with the <p> tag.
- 16. HTML Paragraphs ⢠HTML paragraphs are deďŹned with the <p> tag.
- 17. HTML Links ⢠HTML links are deďŹned with the <a> tag.
- 18. HTML Links ⢠HTML links are deďŹned with the <a> tag.
- 19. HTML Images ⢠HTML images are deďŹned with the <img> tag.
- 20. HTML Images ⢠HTML images are deďŹned with the <img> tag.
- 21. HTML Lists ⢠In HTML, there are several types of lists: ⢠unordered lists - the list items are marked with bullets ⢠ordered lists - the list items are marked with numbers or letters ⢠description list - a list of terms/names, with a description of each term/name.
- 22. HTML Lists
- 23. ⢠CSS stands for Cascading Style Sheets ⢠Styles deďŹne how to display HTML elements ⢠CSS can solve many design problems without adding images or changing the HTML What is CSS?
- 25. CSS Syntax html Selector ValueValue PropertyProperty {margin:0; padding:0} Declaration Declaration
- 26. CSS Selectors ⢠CSS selectors allow you to select and manipulate HTML element(s). ⢠CSS selectors are used to "ďŹnd" (or select) HTML elements based on their id, classes, types, attributes, and more.
- 27. Types of CSS Selectors ⢠The element Selector selects elements based on the element name. (e.g. body, header, p, footer) ⢠The id Selector selects a speciďŹc element on the page and can only be used once (e.g. #main, #content, #footer) ⢠The class Selector selects elements with the speciďŹc class names and cans be reused (e.g. .wrapper, .column, .panel, .panel-pane)
- 29. Ways to use CSS ⢠CSS can be attached to HTML in 3 ways ⢠Inline (wysiwyg for example) ⢠Embedded (placed in document <head>) ⢠Links to CSS ďŹles (the preferred method)
- 30. Ways to use CSS <p style=âcolor:red;â>Some Text</p> Inline Styles
- 31. Ways to use CSS <head>! <style>p {color:red;}</style>! </head> Embedded Styles
- 32. Ways to use CSS <head>! <link rel="stylesheet"⨠type="text/css" href=âstyle.css">! </head> External Style Sheet reference p {color:red;} style.css
- 33. CSS Margin ⢠Margin is the space around elements (outside the border). ⢠The margin does not have a background color, and is completely transparent. ⢠The top, right, bottom, and left margin can be changed independently using separate properties.
- 34. 25px 50px 75px 100px CSS Margin {margin:25px 50px 75px 100px;}
- 35. CSS Padding ⢠Padding is the space between the element border and the element content ⢠The top, right, bottom, and left padding can be changed independently using separate properties.
- 36. {padding:25px 50px 75px 100px;} CSS Padding 25px 50px 75px 100px
- 37. {margin:25px 50px 75px 100px;} CSS Padding & Margin {padding:25px 50px 75px 100px;}
- 38. CSS Text ⢠color sets the color of text ⢠letter-spacing adjusts the space between characters ⢠line-height sets the distance between lines of text ⢠text-decoration speciďŹes the decoration ⢠text-indent speciďŹes the indentation of the ďŹrst line ⢠text-shadow speciďŹes the shadow eďŹect ⢠text-transform controls the capitalization of text ⢠word-spacing changes the space between words
- 39. CSS Fonts ⢠CSS font properties deďŹne the font family, boldness, size, and the style of a text. ⢠Not all computers have the same fonts installed ⢠font-family SpeciďŹes the font family for text ⢠font-size SpeciďŹes the font size of text ⢠font-style SpeciďŹes the font style for text (e.g. normal or italic) ⢠font-variant SpeciďŹes if text should be small-caps ⢠font-weight SpeciďŹes the weight of a font ⢠font Sets all the font properties in one declaration
- 40. CSS Fonts Serif Times New Roman, Georgia Sans-serif Arial, Verdana Monospace Courier New, Lucida Console
- 41. Web Fonts
- 42. Web Fonts
- 43. Web Fonts
- 44. CSS Pseudo-classes ⢠CSS pseudo-classes are used to select the current condition of an element. ⢠The most common pseudo-classes are links ⢠Links can be styled diďŹerently depending on what state they are in. ⢠a:link Selects an unvisited link ⢠a:visited Selects visited links ⢠a:active Selects the active link ⢠a:hover Selects links on mouse over ⢠p::first-letter Selects the ďŹrst letter of a paragraph ⢠p::first-line Selects the ďŹrst line of a paragraph
- 45. CSS Background ⢠CSS background properties are used to deďŹne the background eďŹects of an element. ⢠background-color sets the background color of an element ⢠background-image sets the background image for an element ⢠background-repeat sets how a background image will be repeated ⢠background-attachment sets whether a background image is ďŹxed or scrolls with the rest of the page ⢠background-position sets the starting position of a background image ⢠background sets all the background properties in one declaration
- 46. CSS Positioning ⢠The CSS positioning properties allow you to position an element. ⢠Elements can be positioned using the top, bottom, left, and right properties. ⢠position:static is the default position of an element ⢠position:fixed tells an element to be positioned relative to the browser window. It will not move even if the window is scrolled ⢠position:relative tells an element to be positioned relative to its normal position. ⢠position:absolute tells an element where to be positioned relative to its parent element.
- 48. CSS Float ⢠With CSS ďŹoat, an element can be pushed to the left or right, allowing other elements to wrap around it. ⢠clear SpeciďŹes which sides of an element where other ďŹoating elements are not allowed. ⢠float SpeciďŹes whether or not a box should ďŹoat to the left or right.
- 49. img {float:none;} ⢠Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.âDonec et molestie ⢠purusâ. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. ⢠Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.âDonec et molestie ⢠purusâ. Cras et faucibus est, a viverra odio. Praesent luctus vel purus non mollis. In luctus vitae lectus quis fringilla. Curabitur porttitor justo ac dolor iaculis convallis. img {float:left;} img {float:right;} ⢠Vivamus dignissim nunc eleifend, commodo mi sed, aliquam ante. Donec id lacus eu lectus sollicitudin viverra. Curabitur congue ultricies elit, at euismod mauris iaculis at. Sed et dignissim ipsum. Quisque massa quam, lacinia vel urna ac, dictum lobortis justo.âDonec et molestie CSS Float
- 50. CSS Display and Visibility ⢠The display property speciďŹes if/how an element is displayed, and the visibility property speciďŹes if an element should be visible or hidden. ⢠visibility:hidden hides an element, but it will still take up the same space as before. ⢠display:none hides an element, and it will not take up any space. ⢠display:inline tells an element to only take up as much width as necessary, and will not force line breaks. ⢠display:block tells an element will takes up the full width available, and will have a line break before and after it
- 51. CSS Image Opacity / Transparency ⢠The CSS3 property for transparency is opacity. ⢠The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent. {opacity:0.1;} {opacity:0.5;} {opacity:1.0;}
- 52. CSS Image Sprites ⢠An image sprite is a collection of images put into a single image. ⢠A web page with many images can take a long time to load and generates multiple server requests.
- 53. CSS Media Types ⢠By using the @media rule, a website can have a diďŹerent layout for screen, print, mobile phone, tablet, etc. ⢠all Used for all media type devices ⢠braille Used for braille tactile feedback devices ⢠print Used for printers ⢠screen Used for computer screens ⢠tv Used for television-type devices
- 54. CSS3 ⢠CSS3 is the latest standard for CSS and is completely backwards-compatible with earlier versions of CSS. ⢠Selectors! ⢠Box Model! ⢠Borders! ⢠Text Effects! ⢠2D/3D Transformations! ⢠Animations! ⢠Multiple Column Layout
- 56. ⢠SASS stands for Syntactically Awesome Style Sheets ⢠Sass is a CSS preprocessor ⢠Sass can be written in either the sass or scss syntax ⢠Sass ďŹles compile into css ďŹles What is SASS?
- 57. ⢠CSS doesnât allow variables ⢠SASS uses mixins (reusable blocks of styles) ⢠SASS is faster, more eďŹcient, and easier to maintain ⢠Using COMPASS with SASS allows us to write many lines of cross-browser compatible CSS in a single line of code! Why do we use SASS?
- 58. Install Sass $ gem install sass
- 59. nav {! ul {! margin: 0;! }! li {! display: block;! }! a {! padding: 6px 12px;! color: $yellow;! }! } SCSS nav! ul! margin: 0! li display: block! a! padding: 6px 12px! color: $yellow SASS
- 60. nav {! ul {! margin: 0;! }! li {! display: block;! }! a {! padding: 6px 12px;! color: $yellow;! }! } SCSS nav! ul! margin: 0! li display: block! a! padding: 6px 12px! color: $yellow SASS
- 61. SASS Mixins @mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;! } DeďŹne the mixin .box {@include my-background(12px);} Include the mixin
- 62. SASS Extend %my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;! } DeďŹne the placeholder selector .box {@extend %my-background;} Extend the placeholder selector
- 63. Mixin or Extend .box,.footer {@include my-background(12px);} Arguments .box,.footer {@extend %my-background;} Smaller CSS
- 64. Resources ⢠www.w3schools.com/css ⢠css-tricks.com ⢠alistapart.com ⢠thesassway.com
- 68. Assignment 1. Fork it. 2. Create a branch (`git checkout -b toms_branch`) 3. Commit your changes (`git commit -m "Fixed Navigation Styles"`) 4. Push to the branch (`git push origin toms_branch`)