SlideShare uma empresa Scribd logo
1 de 17
Baixar para ler offline
Web Authoring

   Topic 16 –
  CSS Workflow
Objectives
Students should able to:

1   Use a standardized workflow to
    create a CSS web page.

2. Create a master style sheet.
CSS Web Page
Designers who are just starting out with CSS
often find that it can be difficult to think out
how to use CSS for layout and design.

With a standardized workflow, you can create
a new CSS Web page in half the time it would
otherwise take.
DO NOT START WITH CSS
It can be very tempting to start out designing
a Web page by working on the design.

But with CSS this can get you into trouble.

If you don’t know what will be on the page it
can be difficult if not impossible to create
anything more than a basic layout.
DO NOT START WITH CSS
Start with your content.

Put in your navigation in a list, your headlines
with H1, H2, and H3 tags, and your content
inside paragraphs. If you have sub-sections
on the page, you can separate them with div
tags
Master Style Sheet
CSS Workflow - How to Start Work on a
CSS Web Page
Start off with a new Master style sheet
Master style sheet should remove default
styling from browsers and provide a clean
slate for your entire page.
Master Style Sheet
Start at the Top and Work Down
Once you have your content and basic HTML
in the page, start at the top of the page and
work on CSS styles as you move down the
page.
When you work down the HTML document,
you are following the direction of the
cascade, and so will end up with less
complicated CSS.
Master Style Sheet
Keep Your CSS Simple
Use simpler CSS:
Avoid complex selectors - use simple tag,
class, and ID selectors where ever possible.

Avoid changing your HTML unless it’s
absolutely essential - adding extra div tags is
almost always a mistake (except for your
"container" element for columnal layouts)
Master Style Sheet
Create a Library of Styles that You Always Use

These include elements like "center", "float
left", "underline", and "no underline".
You can even create a standard style sheet
that you load first on all your pages.
Then, for example, when you use the class
"floatLeft" you know that that element will
have the float: left; style applied to it.
Master Style Sheet
Global Defaults
 Your master stylesheet should start by
 zeroing out the margins, paddings, and
 borders on the page.
 This makes sure that they all display the
 same:
           html, body {
           margin: 0px;
           padding: 0px;
           border: 0px;
           }
Master Style Sheet
Headline/Header Formatting
Header tags (H1, H2, H3, etc.) typically
default to bold text with large margins or
padding around them. Clearing the weight,
margins, and padding, you ensure that
these tags do not have any extra styles:
h1, h2, h3, h4, h5, h6 {
                margin: 0;
                 padding: 0;
                font-weight: normal;
                font-family: Arial, Helvetica, sans-serif;
}
Master Style Sheet
Plain Text Formatting
Beyond headers, there are other text tags
that you should be sure to clear out.
Such as table cell tags (TH and TD) and form
tags (SELECT, TEXTAREA, and INPUT).
If you do not set those to the same size as
your body and paragraph text, you may be
surprised at how the browsers render them.
Master Style Sheet
Links and Images
Links are easy to manage.
Preferably, links are underlined, but if you
prefer it a different way, you can set these
options separately.
Do not include colours in the master style
sheet, because that depends upon the
design.
Master Style Sheet
Tables
 We've already made sure that the default
 text size is the same for your table cells,
 but there are a few other styles you
 should set, so that your tables stay the
 same:
           table {
                 margin: 0;
                 padding: 0;
                 border: none;
           }
Master Style Sheet
Forms
Like with other elements, you should clear
out the margins and paddings around your
forms. Define the font information for
select, textarea, and input up above, so
that it's the same as the rest of the text.
         form {
                  margin: 0;
                  padding: 0;
                  display: inline;
         }
Master Style Sheet
Common Classes
 For this part of the master stylesheet, you
 should define classes that make sense to
 you. Note that they are not set to any
 particular element, so you can assign them
 to whatever you need:
 For example:
           .clear { clear: both; }
           .floatLeft { float: left; }
           .textLeft { text-align: left; }
Summary
Start at the Top and Work Down
Keep Your CSS Simple
Create a Library of Styles that You Always Use
Global Defaults
Headline Formatting
Plain Text Formatting
Links and Images
Tables
Forms
Common Classes

Mais conteúdo relacionado

Mais procurados

Cascading style-sheet-
Cascading style-sheet-Cascading style-sheet-
Cascading style-sheet-Nimrakhan89
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to csseShikshak
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
Cascading style sheet (css)]
Cascading style sheet (css)]Cascading style sheet (css)]
Cascading style sheet (css)]9574395990
 
Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Sutinder Mann
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation Salman Memon
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Chris Poteet
 
Css training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentialsCss training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentialsQA TrainingHub
 
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and StyleLesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and StylePerry Mallari
 

Mais procurados (18)

Cascading style-sheet-
Cascading style-sheet-Cascading style-sheet-
Cascading style-sheet-
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
CSS tutorial
CSS tutorialCSS tutorial
CSS tutorial
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
Css
CssCss
Css
 
Cascading style sheet (css)]
Cascading style sheet (css)]Cascading style sheet (css)]
Cascading style sheet (css)]
 
Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10
 
chitra
chitrachitra
chitra
 
What is CSS?
What is CSS?What is CSS?
What is CSS?
 
Css
CssCss
Css
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Css training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentialsCss training tutorial css3 & css4 essentials
Css training tutorial css3 & css4 essentials
 
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and StyleLesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style
 
CSS
CSSCSS
CSS
 

Destaque

Web topic 21 pass info via javascript
Web topic 21  pass info via javascriptWeb topic 21  pass info via javascript
Web topic 21 pass info via javascriptCK Yang
 
Web topic 15 2 basic css layout
Web topic 15 2  basic css layoutWeb topic 15 2  basic css layout
Web topic 15 2 basic css layoutCK Yang
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in cssCK Yang
 
Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html formsCK Yang
 
Web topic 22 validation on web forms
Web topic 22  validation on web formsWeb topic 22  validation on web forms
Web topic 22 validation on web formsCK Yang
 
Web topic 18 conflict resolution in css
Web topic 18  conflict resolution in cssWeb topic 18  conflict resolution in css
Web topic 18 conflict resolution in cssCK Yang
 
Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html formsCK Yang
 
Web topic 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibilityCK Yang
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layoutCK Yang
 
Web topic 30 ensure web contents meet
Web topic 30   ensure web contents meetWeb topic 30   ensure web contents meet
Web topic 30 ensure web contents meetCK Yang
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized websiteCK Yang
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validationCK Yang
 
Web topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelinesWeb topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelinesCK Yang
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validationCK Yang
 
Web topic 24 usage of web browser
Web topic 24  usage of web browserWeb topic 24  usage of web browser
Web topic 24 usage of web browserCK Yang
 
Web topic 32 validate web contents
Web topic 32  validate web contentsWeb topic 32  validate web contents
Web topic 32 validate web contentsCK Yang
 
Web topic 14 cascading style sheets
Web topic 14  cascading style sheetsWeb topic 14  cascading style sheets
Web topic 14 cascading style sheetsCK Yang
 
Web topic 26 browser compatibilty and security
Web topic 26  browser compatibilty and securityWeb topic 26  browser compatibilty and security
Web topic 26 browser compatibilty and securityCK Yang
 
Web topic 33 publish websites
Web topic 33  publish websitesWeb topic 33  publish websites
Web topic 33 publish websitesCK Yang
 
Web topic 31 setup remote site
Web topic 31  setup remote siteWeb topic 31  setup remote site
Web topic 31 setup remote siteCK Yang
 

Destaque (20)

Web topic 21 pass info via javascript
Web topic 21  pass info via javascriptWeb topic 21  pass info via javascript
Web topic 21 pass info via javascript
 
Web topic 15 2 basic css layout
Web topic 15 2  basic css layoutWeb topic 15 2  basic css layout
Web topic 15 2 basic css layout
 
Web topic 17 font family in css
Web topic 17  font family in cssWeb topic 17  font family in css
Web topic 17 font family in css
 
Web topic 20 1 html forms
Web topic 20 1  html formsWeb topic 20 1  html forms
Web topic 20 1 html forms
 
Web topic 22 validation on web forms
Web topic 22  validation on web formsWeb topic 22  validation on web forms
Web topic 22 validation on web forms
 
Web topic 18 conflict resolution in css
Web topic 18  conflict resolution in cssWeb topic 18  conflict resolution in css
Web topic 18 conflict resolution in css
 
Web topic 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html forms
 
Web topic 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibility
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
 
Web topic 30 ensure web contents meet
Web topic 30   ensure web contents meetWeb topic 30   ensure web contents meet
Web topic 30 ensure web contents meet
 
Web topic 25 mobile optimized website
Web topic 25  mobile optimized websiteWeb topic 25  mobile optimized website
Web topic 25 mobile optimized website
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
 
Web topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelinesWeb topic 28. w3 c standards and guidelines
Web topic 28. w3 c standards and guidelines
 
Web topic 29 w3 c page validation
Web topic 29  w3 c page validationWeb topic 29  w3 c page validation
Web topic 29 w3 c page validation
 
Web topic 24 usage of web browser
Web topic 24  usage of web browserWeb topic 24  usage of web browser
Web topic 24 usage of web browser
 
Web topic 32 validate web contents
Web topic 32  validate web contentsWeb topic 32  validate web contents
Web topic 32 validate web contents
 
Web topic 14 cascading style sheets
Web topic 14  cascading style sheetsWeb topic 14  cascading style sheets
Web topic 14 cascading style sheets
 
Web topic 26 browser compatibilty and security
Web topic 26  browser compatibilty and securityWeb topic 26  browser compatibilty and security
Web topic 26 browser compatibilty and security
 
Web topic 33 publish websites
Web topic 33  publish websitesWeb topic 33  publish websites
Web topic 33 publish websites
 
Web topic 31 setup remote site
Web topic 31  setup remote siteWeb topic 31  setup remote site
Web topic 31 setup remote site
 

Semelhante a Web topic 16 css workflow

Css introduction
Css introductionCss introduction
Css introductionSridhar P
 
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 JAVApdfelayelily
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdfwubiederebe1
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2Sutinder Mann
 
Css Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheetssmithaps4
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheetssmitha273566
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakessanjay2211
 
20130909_GODEL Style Guide Guide
20130909_GODEL Style Guide Guide20130909_GODEL Style Guide Guide
20130909_GODEL Style Guide GuideMilly Schmidt
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxJJFajardo1
 

Semelhante a Web topic 16 css workflow (20)

Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Css introduction
Css introductionCss introduction
Css introduction
 
CSS
CSSCSS
CSS
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
Css external style sheet
Css external style sheetCss external style sheet
Css external style sheet
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Css Basics
Css BasicsCss Basics
Css Basics
 
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
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
Css Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder.com | Cssfounder se
Css Founder.com | Cssfounder se
 
Html Css Mistakes
Html Css MistakesHtml Css Mistakes
Html Css Mistakes
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
 
Cascading style sheets
Cascading style sheetsCascading style sheets
Cascading style sheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
 
20130909_GODEL Style Guide Guide
20130909_GODEL Style Guide Guide20130909_GODEL Style Guide Guide
20130909_GODEL Style Guide Guide
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
 
Css intro
Css introCss intro
Css intro
 

Mais de CK Yang

Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class testCK Yang
 
Web topic 13 html validation tools
Web topic 13  html validation toolsWeb topic 13  html validation tools
Web topic 13 html validation toolsCK Yang
 
Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in htmlCK Yang
 
Web topic 11 importance of html validation
Web topic 11  importance of html validationWeb topic 11  importance of html validation
Web topic 11 importance of html validationCK Yang
 
Web topic 10 2 web design basics
Web topic 10 2  web design basicsWeb topic 10 2  web design basics
Web topic 10 2 web design basicsCK Yang
 
Web topic 9 navigation and link
Web topic 9  navigation and linkWeb topic 9  navigation and link
Web topic 9 navigation and linkCK Yang
 
Web topic 8 listings in html
Web topic 8  listings in htmlWeb topic 8  listings in html
Web topic 8 listings in htmlCK Yang
 
Web topic 7 html tags for links
Web topic 7  html tags for linksWeb topic 7  html tags for links
Web topic 7 html tags for linksCK Yang
 
Web topic 5 text formatting
Web topic 5  text formattingWeb topic 5  text formatting
Web topic 5 text formattingCK Yang
 
Web topic 4 style in html
Web topic 4  style in htmlWeb topic 4  style in html
Web topic 4 style in htmlCK Yang
 

Mais de CK Yang (10)

Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class test
 
Web topic 13 html validation tools
Web topic 13  html validation toolsWeb topic 13  html validation tools
Web topic 13 html validation tools
 
Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in html
 
Web topic 11 importance of html validation
Web topic 11  importance of html validationWeb topic 11  importance of html validation
Web topic 11 importance of html validation
 
Web topic 10 2 web design basics
Web topic 10 2  web design basicsWeb topic 10 2  web design basics
Web topic 10 2 web design basics
 
Web topic 9 navigation and link
Web topic 9  navigation and linkWeb topic 9  navigation and link
Web topic 9 navigation and link
 
Web topic 8 listings in html
Web topic 8  listings in htmlWeb topic 8  listings in html
Web topic 8 listings in html
 
Web topic 7 html tags for links
Web topic 7  html tags for linksWeb topic 7  html tags for links
Web topic 7 html tags for links
 
Web topic 5 text formatting
Web topic 5  text formattingWeb topic 5  text formatting
Web topic 5 text formatting
 
Web topic 4 style in html
Web topic 4  style in htmlWeb topic 4  style in html
Web topic 4 style in html
 

Último

ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 

Último (20)

ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 

Web topic 16 css workflow

  • 1. Web Authoring Topic 16 – CSS Workflow
  • 2. Objectives Students should able to: 1 Use a standardized workflow to create a CSS web page. 2. Create a master style sheet.
  • 3. CSS Web Page Designers who are just starting out with CSS often find that it can be difficult to think out how to use CSS for layout and design. With a standardized workflow, you can create a new CSS Web page in half the time it would otherwise take.
  • 4. DO NOT START WITH CSS It can be very tempting to start out designing a Web page by working on the design. But with CSS this can get you into trouble. If you don’t know what will be on the page it can be difficult if not impossible to create anything more than a basic layout.
  • 5. DO NOT START WITH CSS Start with your content. Put in your navigation in a list, your headlines with H1, H2, and H3 tags, and your content inside paragraphs. If you have sub-sections on the page, you can separate them with div tags
  • 6. Master Style Sheet CSS Workflow - How to Start Work on a CSS Web Page Start off with a new Master style sheet Master style sheet should remove default styling from browsers and provide a clean slate for your entire page.
  • 7. Master Style Sheet Start at the Top and Work Down Once you have your content and basic HTML in the page, start at the top of the page and work on CSS styles as you move down the page. When you work down the HTML document, you are following the direction of the cascade, and so will end up with less complicated CSS.
  • 8. Master Style Sheet Keep Your CSS Simple Use simpler CSS: Avoid complex selectors - use simple tag, class, and ID selectors where ever possible. Avoid changing your HTML unless it’s absolutely essential - adding extra div tags is almost always a mistake (except for your "container" element for columnal layouts)
  • 9. Master Style Sheet Create a Library of Styles that You Always Use These include elements like "center", "float left", "underline", and "no underline". You can even create a standard style sheet that you load first on all your pages. Then, for example, when you use the class "floatLeft" you know that that element will have the float: left; style applied to it.
  • 10. Master Style Sheet Global Defaults Your master stylesheet should start by zeroing out the margins, paddings, and borders on the page. This makes sure that they all display the same: html, body { margin: 0px; padding: 0px; border: 0px; }
  • 11. Master Style Sheet Headline/Header Formatting Header tags (H1, H2, H3, etc.) typically default to bold text with large margins or padding around them. Clearing the weight, margins, and padding, you ensure that these tags do not have any extra styles: h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }
  • 12. Master Style Sheet Plain Text Formatting Beyond headers, there are other text tags that you should be sure to clear out. Such as table cell tags (TH and TD) and form tags (SELECT, TEXTAREA, and INPUT). If you do not set those to the same size as your body and paragraph text, you may be surprised at how the browsers render them.
  • 13. Master Style Sheet Links and Images Links are easy to manage. Preferably, links are underlined, but if you prefer it a different way, you can set these options separately. Do not include colours in the master style sheet, because that depends upon the design.
  • 14. Master Style Sheet Tables We've already made sure that the default text size is the same for your table cells, but there are a few other styles you should set, so that your tables stay the same: table { margin: 0; padding: 0; border: none; }
  • 15. Master Style Sheet Forms Like with other elements, you should clear out the margins and paddings around your forms. Define the font information for select, textarea, and input up above, so that it's the same as the rest of the text. form { margin: 0; padding: 0; display: inline; }
  • 16. Master Style Sheet Common Classes For this part of the master stylesheet, you should define classes that make sense to you. Note that they are not set to any particular element, so you can assign them to whatever you need: For example: .clear { clear: both; } .floatLeft { float: left; } .textLeft { text-align: left; }
  • 17. Summary Start at the Top and Work Down Keep Your CSS Simple Create a Library of Styles that You Always Use Global Defaults Headline Formatting Plain Text Formatting Links and Images Tables Forms Common Classes