intro to html, css & sass
DESCRIPTION
An intro to HTML, CSS and SASSTRANSCRIPT
![Page 1: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/1.jpg)
An intro to
HTML, CSS, & SASS
![Page 2: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/2.jpg)
Sean Wolfe
• Creative Director at Zivtech in Philadelphia
• Designing and theming Drupal sites since 2008
• UPenn, Carilion Clinic, Temple University
![Page 3: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/3.jpg)
• 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
![Page 4: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/4.jpg)
• 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?
![Page 5: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/5.jpg)
• HTML tags are keywords (tag names) surrounded by
angle brackets like <html>
• HTML tags normally come in pairs like <p> and </p>
• The first 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
![Page 6: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/6.jpg)
• 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-specific elements, like
<article>, <footer>, <header>, <nav>, <section
HTML5
![Page 7: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/7.jpg)
![Page 8: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/8.jpg)
![Page 9: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/9.jpg)
![Page 10: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/10.jpg)
• The DOCTYPE declaration defines 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
![Page 11: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/11.jpg)
• The <title> tag defines the title of the document.
• The <link> tag defines the relationship between a document and an
external resource.
• The <style> tag is used to define style information for an HTML
document.
• The <meta> tag provides metadata about the HTML document.
• The <script> tag is used to define a client-side script, such as a
JavaScript.
HTML Head
![Page 12: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/12.jpg)
• The DOCTYPE declaration defines 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
![Page 13: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/13.jpg)
HTML Headings• HTML headings are defined with the <h1> to <h6> tags.
![Page 14: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/14.jpg)
HTML Headings• HTML headings are defined with the <h1> to <h6> tags.
![Page 15: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/15.jpg)
HTML Paragraphs• HTML paragraphs are defined with the <p> tag.
![Page 16: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/16.jpg)
HTML Paragraphs• HTML paragraphs are defined with the <p> tag.
![Page 17: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/17.jpg)
HTML Links• HTML links are defined with the <a> tag.
![Page 18: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/18.jpg)
HTML Links• HTML links are defined with the <a> tag.
![Page 19: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/19.jpg)
HTML Images• HTML images are defined with the <img> tag.
![Page 20: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/20.jpg)
HTML Images• HTML images are defined with the <img> tag.
![Page 21: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/21.jpg)
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.
![Page 22: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/22.jpg)
HTML Lists
![Page 23: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/23.jpg)
• CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • CSS can solve many design problems without
adding images or changing the HTML
What is CSS?
![Page 24: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/24.jpg)
![Page 25: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/25.jpg)
CSS Syntax
html
Selector
ValueValue PropertyProperty
{margin:0; padding:0}
Declaration Declaration
![Page 26: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/26.jpg)
CSS Selectors
• CSS selectors allow you to select and manipulate HTML element(s).
• CSS selectors are used to "find" (or select) HTML elements based on their id, classes, types,
attributes, and more.
![Page 27: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/27.jpg)
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 specific element on the page and
can only be used once (e.g. #main, #content, #footer)
• The class Selector selects elements with the specific class
names and cans be reused
(e.g. .wrapper, .column, .panel, .panel-pane)
![Page 28: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/28.jpg)
ID’s
classes
elements
![Page 29: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/29.jpg)
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 files (the preferred method)
![Page 30: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/30.jpg)
Ways to use CSS
<p style=“color:red;”>Some Text</p>
Inline Styles
![Page 31: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/31.jpg)
Ways to use CSS
<head>! <style>p {color:red;}</style>!</head>
Embedded Styles
![Page 32: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/32.jpg)
Ways to use CSS
<head>! <link rel="stylesheet" type="text/css" href=“style.css">!</head>
External Style Sheet reference
p {color:red;}
style.css
![Page 33: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/33.jpg)
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.
![Page 34: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/34.jpg)
25px
50px
75px
100px
CSS Margin{margin:25px 50px 75px 100px;}
![Page 35: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/35.jpg)
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.
![Page 36: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/36.jpg)
{padding:25px 50px 75px 100px;}
CSS Padding
25px
50px
75px
100px
![Page 37: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/37.jpg)
{margin:25px 50px 75px 100px;}
CSS Padding & Margin{padding:25px 50px 75px 100px;}
![Page 38: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/38.jpg)
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 specifies the decoration
• text-indent specifies the indentation of the first line
• text-shadow specifies the shadow effect
• text-transform controls the capitalization of text
• word-spacing changes the space between words
![Page 39: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/39.jpg)
CSS Fonts• CSS font properties define the font family, boldness, size,
and the style of a text. • Not all computers have the same fonts installed
• font-family Specifies the font family for text
• font-size Specifies the font size of text
• font-style Specifies the font style for text (e.g. normal or
italic)
• font-variant Specifies if text should be small-caps
• font-weight Specifies the weight of a font
• font Sets all the font properties in one declaration
![Page 40: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/40.jpg)
CSS FontsSerif Times New Roman, Georgia
Sans-serif Arial, Verdana
Monospace Courier New, Lucida Console
![Page 41: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/41.jpg)
Web Fonts
![Page 42: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/42.jpg)
Web Fonts
![Page 43: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/43.jpg)
Web Fonts
![Page 44: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/44.jpg)
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 differently 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 first letter of a paragraph
• p::first-line Selects the first line of a paragraph
![Page 45: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/45.jpg)
CSS Background• CSS background properties are used to define the background
effects 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
fixed 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
![Page 46: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/46.jpg)
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.
![Page 47: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/47.jpg)
{position:relative;}
{position:absolute;}
{position:static;}
{position:static;}
{position:fixed;}
{position:static;}
![Page 48: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/48.jpg)
CSS Float• With CSS float, an element can be pushed to the
left or right, allowing other elements to wrap
around it.
• clear Specifies which sides of an element where
other floating elements are not allowed. • float Specifies whether or not a box should float
to the left or right.
![Page 49: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/49.jpg)
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
![Page 50: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/50.jpg)
CSS Display and Visibility• The display property specifies if/how an element is displayed,
and the visibility property specifies 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
![Page 51: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/51.jpg)
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;}
![Page 52: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/52.jpg)
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.
![Page 53: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/53.jpg)
CSS Media Types• By using the @media rule, a website can have a
different 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
![Page 54: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/54.jpg)
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
![Page 55: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/55.jpg)
CSS Preprocessors
![Page 56: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/56.jpg)
• SASS stands for Syntactically Awesome Style Sheets • Sass is a CSS preprocessor • Sass can be written in either the sass or scss syntax • Sass files compile into css files
What is SASS?
![Page 57: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/57.jpg)
• CSS doesn’t allow variables • SASS uses mixins (reusable blocks of styles) • SASS is faster, more efficient, 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?
![Page 58: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/58.jpg)
Install Sass
$ gem install sass
![Page 59: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/59.jpg)
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
![Page 60: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/60.jpg)
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
![Page 61: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/61.jpg)
SASS Mixins
@mixin my-background($radius) {! margin-top: 12px;! height: 10px;! background: red;! border-radius: $radius;!}
Define the mixin
.box {@include my-background(12px);}
Include the mixin
![Page 62: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/62.jpg)
SASS Extend
%my-background {! margin-top: 12px;! height: 10px;! background: red;! border: 1px solid $yellow;!}
Define the placeholder selector
.box {@extend %my-background;}
Extend the placeholder selector
![Page 63: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/63.jpg)
Mixin or Extend
.box,.footer {@include my-background(12px);}
Arguments
.box,.footer {@extend %my-background;}
Smaller CSS
![Page 64: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/64.jpg)
Resources• www.w3schools.com/css • css-tricks.com • alistapart.com • thesassway.com
![Page 66: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/66.jpg)
Assignment
github.com/sean3325/bullfrog
![Page 67: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/67.jpg)
![Page 68: Intro to html, css & sass](https://reader037.vdocuments.site/reader037/viewer/2022102804/54b6b2b84a7959e71f8b459e/html5/thumbnails/68.jpg)
Assignment1. 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`)