SlideShare a Scribd company logo
1 of 3
Download to read offline
R.ManiMaran
                                                                     Klug



                      Very Easy Method Create CSS Layout with HTML


      In method 8 or 10 Steps create css layout basic at 30 mint.
      I am using ubuntu bluefish editor , This editor will understand very easily.
      you should read the css E-books so you came to know css element very well.
      then you can create your own layout in css, so many

                      languages can be embedded with this example such as HTML,J-query,
PHP,.....


                                   Css page structure
screen short


        css layout create basic steps

       It's css steps.   you following step by step.

       (The yellow color windows)

       step1: -    #container                     (light green)
       step2: -    #topbar or header              (drak brown
       step3: -    #navbar or menu                (light brown)
       step4: -    #main                          (white)
       step5: -    #colum_left                    (light rose)
       step6: -    #colum_right                   (drak rose)
       step7: -    #colum_abse                    (drak green)
       step8: -    div.spacer
       step9: -    #footer                        (white)
Html coding




CSS coding


      it's basic steps only, Many things is there to know about css in depth...

More Related Content

Viewers also liked

Shri vinayaga engg works
Shri vinayaga engg worksShri vinayaga engg works
Shri vinayaga engg worksManimaran R
 
Shri vinayaga engg works pdf
Shri vinayaga engg works pdfShri vinayaga engg works pdf
Shri vinayaga engg works pdfManimaran R
 
GIRISH FOOD STORE ( CASE PRESENTATION
GIRISH FOOD STORE ( CASE PRESENTATION GIRISH FOOD STORE ( CASE PRESENTATION
GIRISH FOOD STORE ( CASE PRESENTATION Jyoti Punj Prakash
 
INTERNATIONAL CAPITAL CORPORATION CASE PRESENTATION
INTERNATIONAL CAPITAL CORPORATION CASE PRESENTATIONINTERNATIONAL CAPITAL CORPORATION CASE PRESENTATION
INTERNATIONAL CAPITAL CORPORATION CASE PRESENTATIONJyoti Punj Prakash
 
Brief History of Printmaking
Brief History of PrintmakingBrief History of Printmaking
Brief History of Printmakinglber23
 
Presentation on Fundraising
Presentation on FundraisingPresentation on Fundraising
Presentation on FundraisingFilip Tack
 
Handout LinkedIn-Workshop_2016-09-10
Handout LinkedIn-Workshop_2016-09-10Handout LinkedIn-Workshop_2016-09-10
Handout LinkedIn-Workshop_2016-09-10Denise Mändli
 

Viewers also liked (10)

Романовы и революция
Романовы и революцияРомановы и революция
Романовы и революция
 
Shri vinayaga engg works
Shri vinayaga engg worksShri vinayaga engg works
Shri vinayaga engg works
 
Shri vinayaga engg works pdf
Shri vinayaga engg works pdfShri vinayaga engg works pdf
Shri vinayaga engg works pdf
 
GIRISH FOOD STORE ( CASE PRESENTATION
GIRISH FOOD STORE ( CASE PRESENTATION GIRISH FOOD STORE ( CASE PRESENTATION
GIRISH FOOD STORE ( CASE PRESENTATION
 
INTERNATIONAL CAPITAL CORPORATION CASE PRESENTATION
INTERNATIONAL CAPITAL CORPORATION CASE PRESENTATIONINTERNATIONAL CAPITAL CORPORATION CASE PRESENTATION
INTERNATIONAL CAPITAL CORPORATION CASE PRESENTATION
 
Gimp
GimpGimp
Gimp
 
ICICI CASE ON CRM
ICICI CASE ON CRMICICI CASE ON CRM
ICICI CASE ON CRM
 
Brief History of Printmaking
Brief History of PrintmakingBrief History of Printmaking
Brief History of Printmaking
 
Presentation on Fundraising
Presentation on FundraisingPresentation on Fundraising
Presentation on Fundraising
 
Handout LinkedIn-Workshop_2016-09-10
Handout LinkedIn-Workshop_2016-09-10Handout LinkedIn-Workshop_2016-09-10
Handout LinkedIn-Workshop_2016-09-10
 

Similar to Css Layout

Google IO 2013: Web Performance Matters
Google IO 2013: Web Performance MattersGoogle IO 2013: Web Performance Matters
Google IO 2013: Web Performance MattersMitch Chen
 
Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753george42__
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the WildRich Quick
 
app/assets/stylesheets - How to not make a mess
app/assets/stylesheets - How to not make a messapp/assets/stylesheets - How to not make a mess
app/assets/stylesheets - How to not make a messjasnow
 
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkcrystalenka
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comKaelig Deloumeau-Prigent
 
Do More with LESS
Do More with LESS Do More with LESS
Do More with LESS Sane Angel
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applicationsVittorio Vittori
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass bookPhoenix
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSSTodd Anglin
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter BootstrapAhmed Haque
 
OOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsOOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsNetguru
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
 
Fecrash10:3:17 sd
Fecrash10:3:17 sdFecrash10:3:17 sd
Fecrash10:3:17 sdThinkful
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy DesignRich Quick
 
Bootstrap Workout 2015
Bootstrap Workout 2015Bootstrap Workout 2015
Bootstrap Workout 2015Rob Davarnia
 
Presentation1
Presentation1Presentation1
Presentation1nhuthi
 

Similar to Css Layout (20)

Activity 5
Activity 5Activity 5
Activity 5
 
Look ma! No images!
Look ma! No images!Look ma! No images!
Look ma! No images!
 
Google IO 2013: Web Performance Matters
Google IO 2013: Web Performance MattersGoogle IO 2013: Web Performance Matters
Google IO 2013: Web Performance Matters
 
Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
app/assets/stylesheets - How to not make a mess
app/assets/stylesheets - How to not make a messapp/assets/stylesheets - How to not make a mess
app/assets/stylesheets - How to not make a mess
 
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS frameworkNot Just a Pretty Face: How to design and build a cross-CMS CSS framework
Not Just a Pretty Face: How to design and build a cross-CMS CSS framework
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.com
 
Do More with LESS
Do More with LESS Do More with LESS
Do More with LESS
 
Teams, styles and scalable applications
Teams, styles and scalable applicationsTeams, styles and scalable applications
Teams, styles and scalable applications
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass book
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
OOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsOOScss Architecture For Rails Apps
OOScss Architecture For Rails Apps
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
Fecrash10:3:17 sd
Fecrash10:3:17 sdFecrash10:3:17 sd
Fecrash10:3:17 sd
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy Design
 
Bootstrap Workout 2015
Bootstrap Workout 2015Bootstrap Workout 2015
Bootstrap Workout 2015
 
Presentation1
Presentation1Presentation1
Presentation1
 

Recently uploaded

New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfBluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfngoud9212
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsSnow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsHyundai Motor Group
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 

Recently uploaded (20)

New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Bluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdfBluetooth Controlled Car with Arduino.pdf
Bluetooth Controlled Car with Arduino.pdf
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
The transition to renewables in India.pdf
The transition to renewables in India.pdfThe transition to renewables in India.pdf
The transition to renewables in India.pdf
 
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter RoadsSnow Chain-Integrated Tire for a Safe Drive on Winter Roads
Snow Chain-Integrated Tire for a Safe Drive on Winter Roads
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 

Css Layout

  • 1. R.ManiMaran Klug Very Easy Method Create CSS Layout with HTML In method 8 or 10 Steps create css layout basic at 30 mint. I am using ubuntu bluefish editor , This editor will understand very easily. you should read the css E-books so you came to know css element very well. then you can create your own layout in css, so many languages can be embedded with this example such as HTML,J-query, PHP,..... Css page structure
  • 2. screen short css layout create basic steps It's css steps. you following step by step. (The yellow color windows) step1: - #container (light green) step2: - #topbar or header (drak brown step3: - #navbar or menu (light brown) step4: - #main (white) step5: - #colum_left (light rose) step6: - #colum_right (drak rose) step7: - #colum_abse (drak green) step8: - div.spacer step9: - #footer (white)
  • 3. Html coding CSS coding it's basic steps only, Many things is there to know about css in depth...