SlideShare a Scribd company logo
Front-end development
     Novice to professional
 Practical HTML, CSS and JavaScript

       Session 2: CSS Fundamentals
Agenda

● What do we have so far
● What is CSS
● Including CSS in your documents
● Block-level elements properties
● Setting up the layout of the document
● CSS properties and selectors to learn today
● Class and home exercises
What do we have so far

●   Documents
    ○   index.html
●   HTML tags in practice
    ○   paragraphs, spaces and breaks
    ○   links, images
●   CSS we have
    ○   none so far
●   JavaScript we have
    ○   none so far
What is CSS

● CSS stands for Cascading Style Sheets
● Styles define how to display HTML elements
● External style sheets save a lot of work
● External style sheets are stored in CSS files
What is CSS - Example
Methods of including CSS

●   Inline styles
Placed inside the HTML document, style information on a single element,
specified using the style attribute
●   Embedded style
Blocks of CSS information inside the HTML itself
●   External style sheets - highly recommended
Separate CSS file is referenced.
●   Import
Importing CSS file from another CSS file when many files are to be edit
Rule of thumb

When styling a HTML element, the closer the CSS rule is to
the given element, it overrides any preceding CSS rules
before that.


By importance: Link > Import > Embedded > Inline


Note: Override any rule with the !important property.
Practice

Doing: Try the 4 methods of including CSS


At the end: separate file style.css in css folder
Block-level elements

● May appear only within a <body> element
● Typically formatted with line breaks
● May contain both inline and other block-level elements
● Contain "larger" structures
Block-level elements




                       Source: MDN
Inline elements

● May contain only data and other inline elements
● By default, do not begin with a new line


List of inline elements:
●   b, big, i, small, tt
●   abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
●   a, bdo, br, img, map, object, q, script, span, sub, sup
●   button, input, label, select, textarea


                                                                 Source: MDN
Setting up the layout - the source
Setting up the layout - browser
Practice

Doing: Setup the header, content and footer regions.


At the end: an index.html file with HTML markup for
header, content and footer div containers, together with a
CSS file (empty)
Display property

● Sets the way to display a HTML element
● Most popular values
  ○ none - not displayed at all
  ○ block - displayed as a block-level element
  ○ inline - default value, displayed as an inline element
  ○ table - displayed as a table
Width and height properties

● height property sets the height of the
  element
● width property sets the height of the element


Both could take dimensions in px, pt, etc., or
percentage metrics.
Values can also be auto or inherit.
Float properties

● Property to specify whether or not an
  element should float.
● Property options
  ○ left
  ○ right
  ○ none - default value
Clear properties

● Property to specify which sides of an
  element do not allow other floating elements
● Property options
  ○ left/right
  ○ both - most common use
  ○ none
Position property

●   Specifies the type of positioning method used for an element
●   Property options
    ○   static - elements render in the same order they are in the document
    ○   absolute - relative to the first positioned (not static) ancestor element
    ○   fixed - relative to the browser window
    ○   relative - relative to its normal position
Border property

● Sets properties for the outline of the element
● Shorthand for setting all properties at once
● Property options
   ○ border-width
   ○ border-style
   ○ border-color
Padding and margin properties

● Padding - space between content of an
  element and its border. Negative values are
  not allowed.
● Margin - space between element border and
  elements next to it. Negative values are
  allowed.
CSS box model
Practice

Doing: Write the CSS to visualize the layout


At the end: an index.html file with HTML markup for
header, content and footer div containers, together with a
CSS file with selectors and properties to visualize the
markup well enough so one can "see" the divisions.
Summary: HTML study

● Block-level and inline elements in HTML
● HTML tags:
  ○ html, head, body
  ○ header, content, sidebar and footer
  ○ navigation
Summary: CSS study

● Theory: Including CSS to HTML documents
● Techniques: CSS reset
● Properties:

 display   block, inline, none   position   relative, absolute

 width     size metric           border     size, color and place

 height    size metric           padding    b/n content and border

 float     left, right           margin     b/n border and outer element

 clear     both
Practice at class

● CSS reset
● Layout setup for
  ○ header
  ○ group
  ○ content
  ○ main
  ○ footer
● Set fixed sizes on block elements
● Color the borders to see the layout

If you're ready, start your homework at class :)
Practice at home

● Read and learn about:
  ○ fonts in CSS
  ○ text CSS properties
  ○ background properties
● Repeat class exercises if necessary
● Make sure you understand how to make layouts
Contacts


Kalin Chernev
t: @kalinchernev
u: http://shtrak.eu/kalata
e: kalin.chernev(at)gmail.com

More Related Content

Similar to Introduction to Frontend Development - Session 2 - CSS Fundamentals (20)

CascadingStyleSheets in ONESHOT By DeathCodeYT .pdf
CascadingStyleSheets  in ONESHOT By DeathCodeYT .pdfCascadingStyleSheets  in ONESHOT By DeathCodeYT .pdf
CascadingStyleSheets in ONESHOT By DeathCodeYT .pdf
balbirnainnain496
 
Casecading Style Sheets for Hyper Text Transfer Protocol.pptx
Casecading Style Sheets for Hyper Text Transfer Protocol.pptxCasecading Style Sheets for Hyper Text Transfer Protocol.pptx
Casecading Style Sheets for Hyper Text Transfer Protocol.pptx
usmanahmadawan
 
CSS Basics part One
CSS Basics part OneCSS Basics part One
CSS Basics part One
M Ashraful Islam Jewel
 
CSS tutorial chapter 1
CSS tutorial chapter 1CSS tutorial chapter 1
CSS tutorial chapter 1
jeweltutin
 
Css introduction
Css  introductionCss  introduction
Css introduction
vishnu murthy
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
HTML and CSS.pptx
HTML and CSS.pptxHTML and CSS.pptx
HTML and CSS.pptx
TripleRainbow
 
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS
GDG On Campus  NBNSCOE Web Workshop Day 1 : HTML & CSSGDG On Campus  NBNSCOE Web Workshop Day 1 : HTML & CSS
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS
udaymore742
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
fantasticdigitaltools
 
basic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfbasic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdf
elayelily
 
CSS-STUDY MATERIAL.pdf
CSS-STUDY MATERIAL.pdfCSS-STUDY MATERIAL.pdf
CSS-STUDY MATERIAL.pdf
AravindSiva19
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 
Webdev bootcamp
Webdev bootcampWebdev bootcamp
Webdev bootcamp
DSCMESCOE
 
Cascading Style Sheets (CSS) LEVELS.pptx
Cascading Style Sheets (CSS) LEVELS.pptxCascading Style Sheets (CSS) LEVELS.pptx
Cascading Style Sheets (CSS) LEVELS.pptx
DishaGudigar
 
cascadingstylesheets,introduction.css styles-210909054722.pptx
cascadingstylesheets,introduction.css styles-210909054722.pptxcascadingstylesheets,introduction.css styles-210909054722.pptx
cascadingstylesheets,introduction.css styles-210909054722.pptx
hannahroseline2
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
Rafi Haidari
 
gdg_workshop 4 on web development HTML & CSS
gdg_workshop 4 on web development HTML & CSSgdg_workshop 4 on web development HTML & CSS
gdg_workshop 4 on web development HTML & CSS
SaniyaKhan484230
 
CSS
CSSCSS
CSS
Mallikarjuna G D
 
Css
CssCss
Css
myrajendra
 
Working-With-The-Box-Model-Lesson-5.pptx
Working-With-The-Box-Model-Lesson-5.pptxWorking-With-The-Box-Model-Lesson-5.pptx
Working-With-The-Box-Model-Lesson-5.pptx
AxestetikrieyHales
 
CascadingStyleSheets in ONESHOT By DeathCodeYT .pdf
CascadingStyleSheets  in ONESHOT By DeathCodeYT .pdfCascadingStyleSheets  in ONESHOT By DeathCodeYT .pdf
CascadingStyleSheets in ONESHOT By DeathCodeYT .pdf
balbirnainnain496
 
Casecading Style Sheets for Hyper Text Transfer Protocol.pptx
Casecading Style Sheets for Hyper Text Transfer Protocol.pptxCasecading Style Sheets for Hyper Text Transfer Protocol.pptx
Casecading Style Sheets for Hyper Text Transfer Protocol.pptx
usmanahmadawan
 
CSS tutorial chapter 1
CSS tutorial chapter 1CSS tutorial chapter 1
CSS tutorial chapter 1
jeweltutin
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS
GDG On Campus  NBNSCOE Web Workshop Day 1 : HTML & CSSGDG On Campus  NBNSCOE Web Workshop Day 1 : HTML & CSS
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS
udaymore742
 
basic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdfbasic programming language AND HTML CSS JAVApdf
basic programming language AND HTML CSS JAVApdf
elayelily
 
CSS-STUDY MATERIAL.pdf
CSS-STUDY MATERIAL.pdfCSS-STUDY MATERIAL.pdf
CSS-STUDY MATERIAL.pdf
AravindSiva19
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 
Webdev bootcamp
Webdev bootcampWebdev bootcamp
Webdev bootcamp
DSCMESCOE
 
Cascading Style Sheets (CSS) LEVELS.pptx
Cascading Style Sheets (CSS) LEVELS.pptxCascading Style Sheets (CSS) LEVELS.pptx
Cascading Style Sheets (CSS) LEVELS.pptx
DishaGudigar
 
cascadingstylesheets,introduction.css styles-210909054722.pptx
cascadingstylesheets,introduction.css styles-210909054722.pptxcascadingstylesheets,introduction.css styles-210909054722.pptx
cascadingstylesheets,introduction.css styles-210909054722.pptx
hannahroseline2
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
Rafi Haidari
 
gdg_workshop 4 on web development HTML & CSS
gdg_workshop 4 on web development HTML & CSSgdg_workshop 4 on web development HTML & CSS
gdg_workshop 4 on web development HTML & CSS
SaniyaKhan484230
 
Working-With-The-Box-Model-Lesson-5.pptx
Working-With-The-Box-Model-Lesson-5.pptxWorking-With-The-Box-Model-Lesson-5.pptx
Working-With-The-Box-Model-Lesson-5.pptx
AxestetikrieyHales
 

More from Kalin Chernev (20)

Style guides in drupal development workflows
Style guides in drupal development workflowsStyle guides in drupal development workflows
Style guides in drupal development workflows
Kalin Chernev
 
RESTful with Drupal - in-s and out-s
RESTful with Drupal - in-s and out-sRESTful with Drupal - in-s and out-s
RESTful with Drupal - in-s and out-s
Kalin Chernev
 
Trainings and education at hackerspaces
Trainings and education at hackerspacesTrainings and education at hackerspaces
Trainings and education at hackerspaces
Kalin Chernev
 
Introduction to Frontend Development - Session 1 - HTML Fundamentals
Introduction to Frontend Development - Session 1 - HTML FundamentalsIntroduction to Frontend Development - Session 1 - HTML Fundamentals
Introduction to Frontend Development - Session 1 - HTML Fundamentals
Kalin Chernev
 
SEO Fundamentals Outline Lecture 2
SEO Fundamentals Outline Lecture 2SEO Fundamentals Outline Lecture 2
SEO Fundamentals Outline Lecture 2
Kalin Chernev
 
Search Engine Optimization Fundamentals
Search Engine Optimization FundamentalsSearch Engine Optimization Fundamentals
Search Engine Optimization Fundamentals
Kalin Chernev
 
Hackerspaces in Bulgaria Lecture VarnaConf 2012
Hackerspaces in Bulgaria Lecture VarnaConf 2012Hackerspaces in Bulgaria Lecture VarnaConf 2012
Hackerspaces in Bulgaria Lecture VarnaConf 2012
Kalin Chernev
 
Introduction to Drupal 7 - SEO
Introduction to Drupal 7 - SEOIntroduction to Drupal 7 - SEO
Introduction to Drupal 7 - SEO
Kalin Chernev
 
Introduction to Drupal 7 - Performance optimization
Introduction to Drupal 7 - Performance optimizationIntroduction to Drupal 7 - Performance optimization
Introduction to Drupal 7 - Performance optimization
Kalin Chernev
 
Introduction to Drupal 7 - Updating core, themes and modules. applying patches
Introduction to Drupal 7 - Updating core, themes and modules. applying patchesIntroduction to Drupal 7 - Updating core, themes and modules. applying patches
Introduction to Drupal 7 - Updating core, themes and modules. applying patches
Kalin Chernev
 
Introduction to Drupal 7 Users and roles management
Introduction to Drupal 7 Users and roles managementIntroduction to Drupal 7 Users and roles management
Introduction to Drupal 7 Users and roles management
Kalin Chernev
 
Introduction to Drupal 7 Themes and design
Introduction to Drupal 7 Themes and designIntroduction to Drupal 7 Themes and design
Introduction to Drupal 7 Themes and design
Kalin Chernev
 
Introduction to Drupal 7 - Panels
Introduction to Drupal 7 - PanelsIntroduction to Drupal 7 - Panels
Introduction to Drupal 7 - Panels
Kalin Chernev
 
Introduction to Drupal 7 - Homework - webforms on webforms
Introduction to Drupal 7 - Homework - webforms on webformsIntroduction to Drupal 7 - Homework - webforms on webforms
Introduction to Drupal 7 - Homework - webforms on webforms
Kalin Chernev
 
Introduction to Drupal 7 - Webforms
Introduction to Drupal 7 - WebformsIntroduction to Drupal 7 - Webforms
Introduction to Drupal 7 - Webforms
Kalin Chernev
 
Introduction to Drupal 7 - Blocks management and contexts
Introduction to Drupal 7 - Blocks management and contextsIntroduction to Drupal 7 - Blocks management and contexts
Introduction to Drupal 7 - Blocks management and contexts
Kalin Chernev
 
Introduction to Drupal 7 - Installing and configuring WYSIWYG editors in Drupal
Introduction to Drupal 7 - Installing and configuring WYSIWYG editors in DrupalIntroduction to Drupal 7 - Installing and configuring WYSIWYG editors in Drupal
Introduction to Drupal 7 - Installing and configuring WYSIWYG editors in Drupal
Kalin Chernev
 
Introduction to Drupal 7 - Homework on making latest news slideshow block
Introduction to Drupal 7 - Homework on making latest news slideshow blockIntroduction to Drupal 7 - Homework on making latest news slideshow block
Introduction to Drupal 7 - Homework on making latest news slideshow block
Kalin Chernev
 
Introduction to Drupal 7 - Making a slideshow with Views 3
Introduction to Drupal 7 - Making a slideshow with Views 3Introduction to Drupal 7 - Making a slideshow with Views 3
Introduction to Drupal 7 - Making a slideshow with Views 3
Kalin Chernev
 
Introduction to Drupal 7 - Homework - making team section
Introduction to Drupal 7 - Homework - making team sectionIntroduction to Drupal 7 - Homework - making team section
Introduction to Drupal 7 - Homework - making team section
Kalin Chernev
 
Style guides in drupal development workflows
Style guides in drupal development workflowsStyle guides in drupal development workflows
Style guides in drupal development workflows
Kalin Chernev
 
RESTful with Drupal - in-s and out-s
RESTful with Drupal - in-s and out-sRESTful with Drupal - in-s and out-s
RESTful with Drupal - in-s and out-s
Kalin Chernev
 
Trainings and education at hackerspaces
Trainings and education at hackerspacesTrainings and education at hackerspaces
Trainings and education at hackerspaces
Kalin Chernev
 
Introduction to Frontend Development - Session 1 - HTML Fundamentals
Introduction to Frontend Development - Session 1 - HTML FundamentalsIntroduction to Frontend Development - Session 1 - HTML Fundamentals
Introduction to Frontend Development - Session 1 - HTML Fundamentals
Kalin Chernev
 
SEO Fundamentals Outline Lecture 2
SEO Fundamentals Outline Lecture 2SEO Fundamentals Outline Lecture 2
SEO Fundamentals Outline Lecture 2
Kalin Chernev
 
Search Engine Optimization Fundamentals
Search Engine Optimization FundamentalsSearch Engine Optimization Fundamentals
Search Engine Optimization Fundamentals
Kalin Chernev
 
Hackerspaces in Bulgaria Lecture VarnaConf 2012
Hackerspaces in Bulgaria Lecture VarnaConf 2012Hackerspaces in Bulgaria Lecture VarnaConf 2012
Hackerspaces in Bulgaria Lecture VarnaConf 2012
Kalin Chernev
 
Introduction to Drupal 7 - SEO
Introduction to Drupal 7 - SEOIntroduction to Drupal 7 - SEO
Introduction to Drupal 7 - SEO
Kalin Chernev
 
Introduction to Drupal 7 - Performance optimization
Introduction to Drupal 7 - Performance optimizationIntroduction to Drupal 7 - Performance optimization
Introduction to Drupal 7 - Performance optimization
Kalin Chernev
 
Introduction to Drupal 7 - Updating core, themes and modules. applying patches
Introduction to Drupal 7 - Updating core, themes and modules. applying patchesIntroduction to Drupal 7 - Updating core, themes and modules. applying patches
Introduction to Drupal 7 - Updating core, themes and modules. applying patches
Kalin Chernev
 
Introduction to Drupal 7 Users and roles management
Introduction to Drupal 7 Users and roles managementIntroduction to Drupal 7 Users and roles management
Introduction to Drupal 7 Users and roles management
Kalin Chernev
 
Introduction to Drupal 7 Themes and design
Introduction to Drupal 7 Themes and designIntroduction to Drupal 7 Themes and design
Introduction to Drupal 7 Themes and design
Kalin Chernev
 
Introduction to Drupal 7 - Panels
Introduction to Drupal 7 - PanelsIntroduction to Drupal 7 - Panels
Introduction to Drupal 7 - Panels
Kalin Chernev
 
Introduction to Drupal 7 - Homework - webforms on webforms
Introduction to Drupal 7 - Homework - webforms on webformsIntroduction to Drupal 7 - Homework - webforms on webforms
Introduction to Drupal 7 - Homework - webforms on webforms
Kalin Chernev
 
Introduction to Drupal 7 - Webforms
Introduction to Drupal 7 - WebformsIntroduction to Drupal 7 - Webforms
Introduction to Drupal 7 - Webforms
Kalin Chernev
 
Introduction to Drupal 7 - Blocks management and contexts
Introduction to Drupal 7 - Blocks management and contextsIntroduction to Drupal 7 - Blocks management and contexts
Introduction to Drupal 7 - Blocks management and contexts
Kalin Chernev
 
Introduction to Drupal 7 - Installing and configuring WYSIWYG editors in Drupal
Introduction to Drupal 7 - Installing and configuring WYSIWYG editors in DrupalIntroduction to Drupal 7 - Installing and configuring WYSIWYG editors in Drupal
Introduction to Drupal 7 - Installing and configuring WYSIWYG editors in Drupal
Kalin Chernev
 
Introduction to Drupal 7 - Homework on making latest news slideshow block
Introduction to Drupal 7 - Homework on making latest news slideshow blockIntroduction to Drupal 7 - Homework on making latest news slideshow block
Introduction to Drupal 7 - Homework on making latest news slideshow block
Kalin Chernev
 
Introduction to Drupal 7 - Making a slideshow with Views 3
Introduction to Drupal 7 - Making a slideshow with Views 3Introduction to Drupal 7 - Making a slideshow with Views 3
Introduction to Drupal 7 - Making a slideshow with Views 3
Kalin Chernev
 
Introduction to Drupal 7 - Homework - making team section
Introduction to Drupal 7 - Homework - making team sectionIntroduction to Drupal 7 - Homework - making team section
Introduction to Drupal 7 - Homework - making team section
Kalin Chernev
 
Ad

Recently uploaded (20)

Unit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptxUnit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptx
bobby205207
 
The Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdfThe Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdf
dennisongomezk
 
Overview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo SlidesOverview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo Slides
Celine George
 
How to Manage & Create a New Department in Odoo 18 Employee
How to Manage & Create a New Department in Odoo 18 EmployeeHow to Manage & Create a New Department in Odoo 18 Employee
How to Manage & Create a New Department in Odoo 18 Employee
Celine George
 
How to Manage Upselling of Subscriptions in Odoo 18
How to Manage Upselling of Subscriptions in Odoo 18How to Manage Upselling of Subscriptions in Odoo 18
How to Manage Upselling of Subscriptions in Odoo 18
Celine George
 
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptxRai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Dr. Ravi Shankar Arya Mahila P. G. College, Banaras Hindu University, Varanasi, India.
 
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition OecdEnergy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
razelitouali
 
How to Configure Vendor Management in Lunch App of Odoo 18
How to Configure Vendor Management in Lunch App of Odoo 18How to Configure Vendor Management in Lunch App of Odoo 18
How to Configure Vendor Management in Lunch App of Odoo 18
Celine George
 
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptxPEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
Arshad Shaikh
 
Vikas Bansal Himachal Pradesh: A Visionary Transforming Himachal’s Educationa...
Vikas Bansal Himachal Pradesh: A Visionary Transforming Himachal’s Educationa...Vikas Bansal Himachal Pradesh: A Visionary Transforming Himachal’s Educationa...
Vikas Bansal Himachal Pradesh: A Visionary Transforming Himachal’s Educationa...
Himalayan Group of Professional Institutions (HGPI)
 
What is FIle and explanation of text files.pptx
What is FIle and explanation of text files.pptxWhat is FIle and explanation of text files.pptx
What is FIle and explanation of text files.pptx
Ramakrishna Reddy Bijjam
 
Allomorps and word formation.pptx - Google Slides.pdf
Allomorps and word formation.pptx - Google Slides.pdfAllomorps and word formation.pptx - Google Slides.pdf
Allomorps and word formation.pptx - Google Slides.pdf
Abha Pandey
 
LDMMIA GRAD Student Check-in Orientation Sampler
LDMMIA GRAD Student Check-in Orientation SamplerLDMMIA GRAD Student Check-in Orientation Sampler
LDMMIA GRAD Student Check-in Orientation Sampler
LDM & Mia eStudios
 
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_HyderabadWebcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Veera Pallapu
 
Introduction to Generative AI and Copilot.pdf
Introduction to Generative AI and Copilot.pdfIntroduction to Generative AI and Copilot.pdf
Introduction to Generative AI and Copilot.pdf
TechSoup
 
Ray Dalio How Countries go Broke the Big Cycle
Ray Dalio How Countries go Broke the Big CycleRay Dalio How Countries go Broke the Big Cycle
Ray Dalio How Countries go Broke the Big Cycle
Dadang Solihin
 
Publishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke WarnerPublishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke Warner
Brooke Warner
 
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptxROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
Belicia R.S
 
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdfFEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
ChristinaFortunova
 
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti MpdBasic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Restu Bias Primandhika
 
Unit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptxUnit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptx
bobby205207
 
The Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdfThe Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdf
dennisongomezk
 
Overview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo SlidesOverview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo Slides
Celine George
 
How to Manage & Create a New Department in Odoo 18 Employee
How to Manage & Create a New Department in Odoo 18 EmployeeHow to Manage & Create a New Department in Odoo 18 Employee
How to Manage & Create a New Department in Odoo 18 Employee
Celine George
 
How to Manage Upselling of Subscriptions in Odoo 18
How to Manage Upselling of Subscriptions in Odoo 18How to Manage Upselling of Subscriptions in Odoo 18
How to Manage Upselling of Subscriptions in Odoo 18
Celine George
 
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition OecdEnergy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
Energy Balances Of Oecd Countries 2011 Iea Statistics 1st Edition Oecd
razelitouali
 
How to Configure Vendor Management in Lunch App of Odoo 18
How to Configure Vendor Management in Lunch App of Odoo 18How to Configure Vendor Management in Lunch App of Odoo 18
How to Configure Vendor Management in Lunch App of Odoo 18
Celine George
 
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptxPEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
Arshad Shaikh
 
What is FIle and explanation of text files.pptx
What is FIle and explanation of text files.pptxWhat is FIle and explanation of text files.pptx
What is FIle and explanation of text files.pptx
Ramakrishna Reddy Bijjam
 
Allomorps and word formation.pptx - Google Slides.pdf
Allomorps and word formation.pptx - Google Slides.pdfAllomorps and word formation.pptx - Google Slides.pdf
Allomorps and word formation.pptx - Google Slides.pdf
Abha Pandey
 
LDMMIA GRAD Student Check-in Orientation Sampler
LDMMIA GRAD Student Check-in Orientation SamplerLDMMIA GRAD Student Check-in Orientation Sampler
LDMMIA GRAD Student Check-in Orientation Sampler
LDM & Mia eStudios
 
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_HyderabadWebcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Veera Pallapu
 
Introduction to Generative AI and Copilot.pdf
Introduction to Generative AI and Copilot.pdfIntroduction to Generative AI and Copilot.pdf
Introduction to Generative AI and Copilot.pdf
TechSoup
 
Ray Dalio How Countries go Broke the Big Cycle
Ray Dalio How Countries go Broke the Big CycleRay Dalio How Countries go Broke the Big Cycle
Ray Dalio How Countries go Broke the Big Cycle
Dadang Solihin
 
Publishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke WarnerPublishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke Warner
Brooke Warner
 
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptxROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
Belicia R.S
 
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdfFEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
ChristinaFortunova
 
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti MpdBasic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Restu Bias Primandhika
 
Ad

Introduction to Frontend Development - Session 2 - CSS Fundamentals

  • 1. Front-end development Novice to professional Practical HTML, CSS and JavaScript Session 2: CSS Fundamentals
  • 2. Agenda ● What do we have so far ● What is CSS ● Including CSS in your documents ● Block-level elements properties ● Setting up the layout of the document ● CSS properties and selectors to learn today ● Class and home exercises
  • 3. What do we have so far ● Documents ○ index.html ● HTML tags in practice ○ paragraphs, spaces and breaks ○ links, images ● CSS we have ○ none so far ● JavaScript we have ○ none so far
  • 4. What is CSS ● CSS stands for Cascading Style Sheets ● Styles define how to display HTML elements ● External style sheets save a lot of work ● External style sheets are stored in CSS files
  • 5. What is CSS - Example
  • 6. Methods of including CSS ● Inline styles Placed inside the HTML document, style information on a single element, specified using the style attribute ● Embedded style Blocks of CSS information inside the HTML itself ● External style sheets - highly recommended Separate CSS file is referenced. ● Import Importing CSS file from another CSS file when many files are to be edit
  • 7. Rule of thumb When styling a HTML element, the closer the CSS rule is to the given element, it overrides any preceding CSS rules before that. By importance: Link > Import > Embedded > Inline Note: Override any rule with the !important property.
  • 8. Practice Doing: Try the 4 methods of including CSS At the end: separate file style.css in css folder
  • 9. Block-level elements ● May appear only within a <body> element ● Typically formatted with line breaks ● May contain both inline and other block-level elements ● Contain "larger" structures
  • 10. Block-level elements Source: MDN
  • 11. Inline elements ● May contain only data and other inline elements ● By default, do not begin with a new line List of inline elements: ● b, big, i, small, tt ● abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var ● a, bdo, br, img, map, object, q, script, span, sub, sup ● button, input, label, select, textarea Source: MDN
  • 12. Setting up the layout - the source
  • 13. Setting up the layout - browser
  • 14. Practice Doing: Setup the header, content and footer regions. At the end: an index.html file with HTML markup for header, content and footer div containers, together with a CSS file (empty)
  • 15. Display property ● Sets the way to display a HTML element ● Most popular values ○ none - not displayed at all ○ block - displayed as a block-level element ○ inline - default value, displayed as an inline element ○ table - displayed as a table
  • 16. Width and height properties ● height property sets the height of the element ● width property sets the height of the element Both could take dimensions in px, pt, etc., or percentage metrics. Values can also be auto or inherit.
  • 17. Float properties ● Property to specify whether or not an element should float. ● Property options ○ left ○ right ○ none - default value
  • 18. Clear properties ● Property to specify which sides of an element do not allow other floating elements ● Property options ○ left/right ○ both - most common use ○ none
  • 19. Position property ● Specifies the type of positioning method used for an element ● Property options ○ static - elements render in the same order they are in the document ○ absolute - relative to the first positioned (not static) ancestor element ○ fixed - relative to the browser window ○ relative - relative to its normal position
  • 20. Border property ● Sets properties for the outline of the element ● Shorthand for setting all properties at once ● Property options ○ border-width ○ border-style ○ border-color
  • 21. Padding and margin properties ● Padding - space between content of an element and its border. Negative values are not allowed. ● Margin - space between element border and elements next to it. Negative values are allowed.
  • 23. Practice Doing: Write the CSS to visualize the layout At the end: an index.html file with HTML markup for header, content and footer div containers, together with a CSS file with selectors and properties to visualize the markup well enough so one can "see" the divisions.
  • 24. Summary: HTML study ● Block-level and inline elements in HTML ● HTML tags: ○ html, head, body ○ header, content, sidebar and footer ○ navigation
  • 25. Summary: CSS study ● Theory: Including CSS to HTML documents ● Techniques: CSS reset ● Properties: display block, inline, none position relative, absolute width size metric border size, color and place height size metric padding b/n content and border float left, right margin b/n border and outer element clear both
  • 26. Practice at class ● CSS reset ● Layout setup for ○ header ○ group ○ content ○ main ○ footer ● Set fixed sizes on block elements ● Color the borders to see the layout If you're ready, start your homework at class :)
  • 27. Practice at home ● Read and learn about: ○ fonts in CSS ○ text CSS properties ○ background properties ● Repeat class exercises if necessary ● Make sure you understand how to make layouts
  • 28. Contacts Kalin Chernev t: @kalinchernev u: http://shtrak.eu/kalata e: kalin.chernev(at)gmail.com