SlideShare uma empresa Scribd logo
1 de 19
Web Authoring

    Topic 15 –
 Basic CSS Layout
       Part 1
Objectives
Students should able to:
1   Explain Cascading Style Sheet
    Class and ID Selector.

2   Identify internal and external
    Cascading Style Sheets.

3   Cascading Style Sheets
    background.
DIV-based Layout
- Example
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
 transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <html>
 <head>
 <title>How to Build a Basic CSS Layout</title>
 </head>
 <body>
 <h1>How To Build a Basic CSS Layout</h1>
 <div id="main"></div>
 <div id="footer"></div>
 </body>
 </html>
Class Selector
In the CSS, a class selector is a name
preceded by a full stop (.)
 Example:
   .intro {
      color: red;
      font-weight: bold;
   }
ID Selector
In the CSS, an ID selector is a name preceded
by a hash character (#).
 Example:
   #top {
     background-color: #ccc;
     padding: 1em
   }
   - Database
ID and Class Selector
CSS by using the attributes id and class could
look something like this:
 Example:
    <div id="top">
    <h1>Chocolate curry</h1>
    <p class="intro">This is my recipe for making
    curry purely with chocolate</p>
    <p class="intro">Mmm mm mmmmm</p>
    </div>
ID and Class
The difference between an ID and a class is
that an ID can be used to identify one
element, whereas a class can be used to
identify more than one.
Universal Selector
The universal selector is an asterisk.
When used alone, the universal selector tells
the CSS interpreter to apply the CSS rule to all
elements in the document.
*{
border: 1 px solid black;
    }
SPAN AND DIV
The difference between span and div is that a
span element is in-line and usually used for a
small chunk of in-line HTML .
Whereas a div (division) element is block-line
(which is basically equivalent to having a line-
break before and after it) and used to group
larger chunks of code.
STYLES in CSS
There are 3 ways to use styles in CSS:
    • internal (or embedded)
    • External
    • Inline
STYLES in CSS
    • Internal
The following CSS STYLE declaration puts a
border around every H1 element in the
document and centers it on the page.
<HEAD>
<STYLE type="text/css"> H1 {border-width: 1;
border: solid; text-align: center}
</STYLE>
</HEAD>
STYLES in CSS
     •   External
In this example, we first specify a
persistent style sheet located in the file
mystyle.css:
 <LINK href="mystyle.css" rel="stylesheet"
 type="text/css">
For optimal flexibility, authors should
define styles in external style sheets.
STYLES in CSS
    • Inline
This CSS example sets colour and font
size information for the text in a specific
paragraph.
<P style="font-size: 12pt; color: fuchsia">
Aren't style sheets wonderful?
In CSS, property declarations have the form
"name : value" and are separated by a
semi-colon.
CSS Background
CSS backgrounds are an important part of
web design. The property is where you add
the colours and images that sit behind your
content, which controls much of the
aesthetics of your site.
Remove CSS backgrounds and your site will
probably be text on a white background.
CSS Background
There are 4 background properties you can
apply to a CSS selector:
  background-colour
  background-image
  background-repeat
  background-position
Background-colour
background-colour — sets the background
colour of an element. The colour can be
specified as a hex value, an rgb value, or by
one of the limited colour names. The
background-colour can also be set as
transparent or it can be set to inherit the
background-colour of its parent element
Background-image
background-image — sets an image as the
background of an element and it’s value will
look like url(“path-to-an-image”). The
background-image property can also have
values of none and inherit.
Background-repeat
background-repeat — sets how a
background-image is repeated. Values are
repeat, no-repeat, repeat-x, repeat-y, and
inherit.
Background-position
background-position — sets the starting
position of the background image within the
element. Images can be set to start
vertically at the top, center, or bottom and
horizontally at the left, center, or right. The
background position can also be set to start
a fixed amount or a % from the top left
corner of the element.

Mais conteúdo relacionado

Mais procurados (19)

Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Css.html
Css.htmlCss.html
Css.html
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
CSS
CSSCSS
CSS
 
Css
CssCss
Css
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
 
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 Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
CSS
CSSCSS
CSS
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
 
Css
CssCss
Css
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Casc Style Sheets Ii
Casc Style Sheets IiCasc Style Sheets Ii
Casc Style Sheets Ii
 
Css
CssCss
Css
 
CSS
CSS CSS
CSS
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 

Destaque

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 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibilityCK 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 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 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 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 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 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
 
Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class testCK Yang
 
Web topic 16 css workflow
Web topic 16  css workflowWeb topic 16  css workflow
Web topic 16 css workflowCK 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 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 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 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 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
 

Destaque (20)

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 23 web accessibility
Web topic 23  web accessibilityWeb topic 23  web accessibility
Web topic 23 web accessibility
 
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 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 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 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 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 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
 
Web topic 27 class test
Web topic 27  class testWeb topic 27  class test
Web topic 27 class test
 
Web topic 16 css workflow
Web topic 16  css workflowWeb topic 16  css workflow
Web topic 16 css workflow
 
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 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 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 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 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
 

Semelhante a Web topic 15 1 basic css layout

Semelhante a Web topic 15 1 basic css layout (20)

Webpage style with CSS
Webpage style with CSSWebpage style with CSS
Webpage style with CSS
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
WT CSS
WT  CSSWT  CSS
WT CSS
 
Css
CssCss
Css
 
Web app development_html_css_03
Web app development_html_css_03Web app development_html_css_03
Web app development_html_css_03
 
Unit 3 (it workshop).pptx
Unit 3 (it workshop).pptxUnit 3 (it workshop).pptx
Unit 3 (it workshop).pptx
 
LIS3353 SP12 Week 13
LIS3353 SP12 Week 13LIS3353 SP12 Week 13
LIS3353 SP12 Week 13
 
CSS.pdf
CSS.pdfCSS.pdf
CSS.pdf
 
Html Styles-CSS
Html Styles-CSSHtml Styles-CSS
Html Styles-CSS
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
CSS-part-1.ppt
CSS-part-1.pptCSS-part-1.ppt
CSS-part-1.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
Internet tech &amp; web prog. p4,5
Internet tech &amp; web prog.  p4,5Internet tech &amp; web prog.  p4,5
Internet tech &amp; web prog. p4,5
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.pptUnit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
 
CSS
CSSCSS
CSS
 

Mais de CK 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 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 20 2 html forms
Web topic 20 2  html formsWeb topic 20 2  html forms
Web topic 20 2 html forms
 
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

🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 

Último (20)

🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 

Web topic 15 1 basic css layout

  • 1. Web Authoring Topic 15 – Basic CSS Layout Part 1
  • 2. Objectives Students should able to: 1 Explain Cascading Style Sheet Class and ID Selector. 2 Identify internal and external Cascading Style Sheets. 3 Cascading Style Sheets background.
  • 3. DIV-based Layout - Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>How to Build a Basic CSS Layout</title> </head> <body> <h1>How To Build a Basic CSS Layout</h1> <div id="main"></div> <div id="footer"></div> </body> </html>
  • 4. Class Selector In the CSS, a class selector is a name preceded by a full stop (.) Example: .intro { color: red; font-weight: bold; }
  • 5. ID Selector In the CSS, an ID selector is a name preceded by a hash character (#). Example: #top { background-color: #ccc; padding: 1em } - Database
  • 6. ID and Class Selector CSS by using the attributes id and class could look something like this: Example: <div id="top"> <h1>Chocolate curry</h1> <p class="intro">This is my recipe for making curry purely with chocolate</p> <p class="intro">Mmm mm mmmmm</p> </div>
  • 7. ID and Class The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
  • 8. Universal Selector The universal selector is an asterisk. When used alone, the universal selector tells the CSS interpreter to apply the CSS rule to all elements in the document. *{ border: 1 px solid black; }
  • 9. SPAN AND DIV The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML . Whereas a div (division) element is block-line (which is basically equivalent to having a line- break before and after it) and used to group larger chunks of code.
  • 10. STYLES in CSS There are 3 ways to use styles in CSS: • internal (or embedded) • External • Inline
  • 11. STYLES in CSS • Internal The following CSS STYLE declaration puts a border around every H1 element in the document and centers it on the page. <HEAD> <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD>
  • 12. STYLES in CSS • External In this example, we first specify a persistent style sheet located in the file mystyle.css: <LINK href="mystyle.css" rel="stylesheet" type="text/css"> For optimal flexibility, authors should define styles in external style sheets.
  • 13. STYLES in CSS • Inline This CSS example sets colour and font size information for the text in a specific paragraph. <P style="font-size: 12pt; color: fuchsia"> Aren't style sheets wonderful? In CSS, property declarations have the form "name : value" and are separated by a semi-colon.
  • 14. CSS Background CSS backgrounds are an important part of web design. The property is where you add the colours and images that sit behind your content, which controls much of the aesthetics of your site. Remove CSS backgrounds and your site will probably be text on a white background.
  • 15. CSS Background There are 4 background properties you can apply to a CSS selector: background-colour background-image background-repeat background-position
  • 16. Background-colour background-colour — sets the background colour of an element. The colour can be specified as a hex value, an rgb value, or by one of the limited colour names. The background-colour can also be set as transparent or it can be set to inherit the background-colour of its parent element
  • 17. Background-image background-image — sets an image as the background of an element and it’s value will look like url(“path-to-an-image”). The background-image property can also have values of none and inherit.
  • 18. Background-repeat background-repeat — sets how a background-image is repeated. Values are repeat, no-repeat, repeat-x, repeat-y, and inherit.
  • 19. Background-position background-position — sets the starting position of the background image within the element. Images can be set to start vertically at the top, center, or bottom and horizontally at the left, center, or right. The background position can also be set to start a fixed amount or a % from the top left corner of the element.