SlideShare a Scribd company logo
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

Similar to New css

Activity 5
Activity 5Activity 5
Activity 5
John Vincent Caño
 
Look ma! No images!
Look ma! No images!Look ma! No images!
Look ma! No images!
Lennart Schoors
 
Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753Static websites assignment 1 - CIT012753
Static websites assignment 1 - CIT012753
george42__
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
Rich Quick
 
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
crystalenka
 
Google IO 2013: Web Performance Matters
Google IO 2013: Web Performance MattersGoogle IO 2013: Web Performance Matters
Google IO 2013: Web Performance MattersMitch Chen
 
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
jasnow
 
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
Kaelig Deloumeau-Prigent
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass book
Phoenix
 
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 applications
Vittorio Vittori
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
Gareth Saunders
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
Todd Anglin
 
OOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsOOScss Architecture For Rails Apps
OOScss Architecture For Rails Apps
Netguru
 
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
Sanjoy Kr. Paul
 
Fecrash10:3:17 sd
Fecrash10:3:17 sdFecrash10:3:17 sd
Fecrash10:3:17 sd
Thinkful
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy Design
Rich Quick
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
Ahmed Haque
 
Bootstrap Workout 2015
Bootstrap Workout 2015Bootstrap Workout 2015
Bootstrap Workout 2015
Rob Davarnia
 
PSD to HTML Conversion
PSD to HTML ConversionPSD to HTML Conversion
PSD to HTML Conversion
Darryl Sherman
 

Similar to New css (20)

Activity 5
Activity 5Activity 5
Activity 5
 
Look ma! No images!
Look ma! No images!Look ma! No images!
Look ma! No images!
 
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
 
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
 
Google IO 2013: Web Performance Matters
Google IO 2013: Web Performance MattersGoogle IO 2013: Web Performance Matters
Google IO 2013: Web Performance Matters
 
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
 
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
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass book
 
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
 
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
 
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
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
Bootstrap Workout 2015
Bootstrap Workout 2015Bootstrap Workout 2015
Bootstrap Workout 2015
 
PSD to HTML Conversion
PSD to HTML ConversionPSD to HTML Conversion
PSD to HTML Conversion
 

Recently uploaded

The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
Pierluigi Pugliese
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
Peter Spielvogel
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 

Recently uploaded (20)

The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 

New css

  • 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.
  • 3. 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)
  • 4. Html coding CSS coding it's basic steps only, Many things is there to know about css in depth...