SlideShare a Scribd company logo
Welcome to CSS!
CSS stands for Cascading Style Sheets.
- Cascading refers to the way CSS applies one style on top of
another.
- Style Sheets control the look and feel of web documents.
CSS and HTML work hand in hand:
- HTML sorts out the page structure.
- CSS defines how HTML elements are displayed.CSS allows
you to apply specific styles to specific HTML elements.
The main benefit of CSS is that it allows you to
separate style from content.
Using just HTML, all the styles and formatting are in the same
place, which becomes rather difficult to maintain as the page
grows.
css
Using an inline style is one of the ways to insert a style sheet.
With an inline style, a unique style is applied to a single element.
In order to use an inline style, add the style attribute to
the relevant tag.
The example below shows how to create a paragraph with a
gray background and white text:
This puts a grey background on a html paragraph
Inline CSS
<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>
internal styles are defined within the <style> element, inside
the head section of an HTML page.
For example, the following code styles all paragraphs:
All paragraphs will have a white font and an orange
background
Internal/Embedded CSS
<html>
<head>
<style>
p {
color:white;
background-color:orange;
}
</style>
</head>
<body>
<p>I love web development. </p>
<p>web development is fun. </p>
</body>
</html>
With this method, all styling rules are contained in a single text file, which is
saved with the .css extension.
This CSS file is then referenced in the HTML using the <link> tag. The <link>
element goes inside the head section.
Here is an example:
The HTML:
The CSS:
External CSS
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my second paragraph. </p>
<p>This is my third paragraph. </p>
</body>
p {
color:white;
background-color:gray;
}

More Related Content

What's hot

HTML- Hyper Text Markup Language
HTML- Hyper Text Markup LanguageHTML- Hyper Text Markup Language
HTML- Hyper Text Markup Language
Codewizacademy
 
Html and css
Html and cssHtml and css
Html and css
Samiksha Pun
 
CSS Basics - Stylesheets and Color
CSS Basics - Stylesheets and ColorCSS Basics - Stylesheets and Color
CSS Basics - Stylesheets and Color
Kelly Kellum
 
Css external style sheet
Css external style sheetCss external style sheet
Css external style sheet
Jesus Obenita Jr.
 
Html Styles-CSS
Html Styles-CSSHtml Styles-CSS
Html Styles-CSS
ispkosova
 
PHP - Introduction to PHP CSS
PHP -  Introduction to PHP CSSPHP -  Introduction to PHP CSS
PHP - Introduction to PHP CSS
Vibrant Technologies & Computers
 
CSS in HTML
CSS in HTMLCSS in HTML
CSS in HTML
Vineet Kumar Saini
 
An Introduction to CSS
An Introduction to CSSAn Introduction to CSS
An Introduction to CSS
Vidya Ananthanarayanan
 
Html css
Html cssHtml css
Html css
kanakaiah kedam
 
Web designing training in chandigarh
Web designing training in chandigarhWeb designing training in chandigarh
Web designing training in chandigarh
Sheetal Sharma
 
Cascading Style Sheets - CSS - Tutorial
Cascading Style Sheets - CSS  -  TutorialCascading Style Sheets - CSS  -  Tutorial
Cascading Style Sheets - CSS - Tutorial
MSA Technosoft
 
N5 CSS
N5 CSSN5 CSS
Html styles
Html stylesHtml styles
Html styles
Micah Fuentes
 
Session Two css
Session Two cssSession Two css
Session Two css
Mustafa Saeed
 
7.2 external style sheets
7.2 external style sheets7.2 external style sheets
7.2 external style sheets
Bulldogs83
 
Css starting
Css startingCss starting
Css starting
Rahul Dihora
 
Css Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder.com | Cssfounder se
Css Founder.com | Cssfounder se
Css Founder
 
Teaching presentation
Teaching presentationTeaching presentation
Teaching presentation
jakia123
 
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
Harshit Srivastava
 
Session v(css)
Session v(css)Session v(css)
Session v(css)
Shrijan Tiwari
 

What's hot (20)

HTML- Hyper Text Markup Language
HTML- Hyper Text Markup LanguageHTML- Hyper Text Markup Language
HTML- Hyper Text Markup Language
 
Html and css
Html and cssHtml and css
Html and css
 
CSS Basics - Stylesheets and Color
CSS Basics - Stylesheets and ColorCSS Basics - Stylesheets and Color
CSS Basics - Stylesheets and Color
 
Css external style sheet
Css external style sheetCss external style sheet
Css external style sheet
 
Html Styles-CSS
Html Styles-CSSHtml Styles-CSS
Html Styles-CSS
 
PHP - Introduction to PHP CSS
PHP -  Introduction to PHP CSSPHP -  Introduction to PHP CSS
PHP - Introduction to PHP CSS
 
CSS in HTML
CSS in HTMLCSS in HTML
CSS in HTML
 
An Introduction to CSS
An Introduction to CSSAn Introduction to CSS
An Introduction to CSS
 
Html css
Html cssHtml css
Html css
 
Web designing training in chandigarh
Web designing training in chandigarhWeb designing training in chandigarh
Web designing training in chandigarh
 
Cascading Style Sheets - CSS - Tutorial
Cascading Style Sheets - CSS  -  TutorialCascading Style Sheets - CSS  -  Tutorial
Cascading Style Sheets - CSS - Tutorial
 
N5 CSS
N5 CSSN5 CSS
N5 CSS
 
Html styles
Html stylesHtml styles
Html styles
 
Session Two css
Session Two cssSession Two css
Session Two css
 
7.2 external style sheets
7.2 external style sheets7.2 external style sheets
7.2 external style sheets
 
Css starting
Css startingCss starting
Css starting
 
Css Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder.com | Cssfounder se
Css Founder.com | Cssfounder se
 
Teaching presentation
Teaching presentationTeaching presentation
Teaching presentation
 
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
 
Session v(css)
Session v(css)Session v(css)
Session v(css)
 

Similar to Welcome to css!

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
Perry Mallari
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
Joseph Gabriel
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
vishal choudhary
 
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
JJFajardo1
 
Css introduction
Css introductionCss introduction
Css introduction
Sridhar P
 
CSS.ppt
CSS.pptCSS.ppt
chitra
chitrachitra
chitra
sweet chitra
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Folasade Adedeji
 
Css
CssCss
Introduction HTML and CSS
Introduction HTML and CSSIntroduction HTML and CSS
Introduction HTML and CSS
GovtITIWomen
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
wubiederebe1
 
Css introduction
Css  introductionCss  introduction
Css introduction
vishnu murthy
 
CSS Training in Bangalore
CSS Training in BangaloreCSS Training in Bangalore
CSS Training in Bangalore
rajkamal560066
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
QA TrainingHub
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Mukesh Tekwani
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
Rafi Haidari
 
Css intro
Css introCss intro
Css intro
Andz Bass
 
Css
CssCss
Css and its types
Css and its typesCss and its types
Css and its types
Mansi Mahadik
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
SURYANARAYANBISWAL1
 

Similar to Welcome to css! (20)

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
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
 
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 introduction
Css introductionCss introduction
Css introduction
 
CSS.ppt
CSS.pptCSS.ppt
CSS.ppt
 
chitra
chitrachitra
chitra
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css
CssCss
Css
 
Introduction HTML and CSS
Introduction HTML and CSSIntroduction HTML and CSS
Introduction HTML and CSS
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
CSS Training in Bangalore
CSS Training in BangaloreCSS Training in Bangalore
CSS Training in Bangalore
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
 
Css intro
Css introCss intro
Css intro
 
Css
CssCss
Css
 
Css and its types
Css and its typesCss and its types
Css and its types
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 

More from sidneyodingo

html 5
html 5html 5
html 5
sidneyodingo
 
html 5
html 5html 5
html 5
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
sidneyodingo
 
Object properties
Object propertiesObject properties
Object properties
sidneyodingo
 
Objects
ObjectsObjects
Objects
sidneyodingo
 
Multiple parameters
Multiple parametersMultiple parameters
Multiple parameters
sidneyodingo
 

More from sidneyodingo (20)

html 5
html 5html 5
html 5
 
html 5
html 5html 5
html 5
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Object properties
Object propertiesObject properties
Object properties
 
Objects
ObjectsObjects
Objects
 
Multiple parameters
Multiple parametersMultiple parameters
Multiple parameters
 

Recently uploaded

How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience
Wahiba Chair Training & Consulting
 
How to deliver Powerpoint Presentations.pptx
How to deliver Powerpoint  Presentations.pptxHow to deliver Powerpoint  Presentations.pptx
How to deliver Powerpoint Presentations.pptx
HajraNaeem15
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
Celine George
 
How to Make a Field Mandatory in Odoo 17
How to Make a Field Mandatory in Odoo 17How to Make a Field Mandatory in Odoo 17
How to Make a Field Mandatory in Odoo 17
Celine George
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Excellence Foundation for South Sudan
 
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Dr. Vinod Kumar Kanvaria
 
Digital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental DesignDigital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental Design
amberjdewit93
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
Priyankaranawat4
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
adhitya5119
 
BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
Katrina Pritchard
 
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptxPrésentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
siemaillard
 
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptxChapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Denish Jangid
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
History of Stoke Newington
 
How to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 InventoryHow to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 Inventory
Celine George
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
Dr. Mulla Adam Ali
 
Film vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movieFilm vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movie
Nicholas Montgomery
 
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
สมใจ จันสุกสี
 
PIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf IslamabadPIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf Islamabad
AyyanKhan40
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
adhitya5119
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
mulvey2
 

Recently uploaded (20)

How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience How to Create a More Engaging and Human Online Learning Experience
How to Create a More Engaging and Human Online Learning Experience
 
How to deliver Powerpoint Presentations.pptx
How to deliver Powerpoint  Presentations.pptxHow to deliver Powerpoint  Presentations.pptx
How to deliver Powerpoint Presentations.pptx
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
 
How to Make a Field Mandatory in Odoo 17
How to Make a Field Mandatory in Odoo 17How to Make a Field Mandatory in Odoo 17
How to Make a Field Mandatory in Odoo 17
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
 
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
 
Digital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental DesignDigital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental Design
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
 
BBR 2024 Summer Sessions Interview Training
BBR  2024 Summer Sessions Interview TrainingBBR  2024 Summer Sessions Interview Training
BBR 2024 Summer Sessions Interview Training
 
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptxPrésentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
 
Chapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptxChapter wise All Notes of First year Basic Civil Engineering.pptx
Chapter wise All Notes of First year Basic Civil Engineering.pptx
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
 
How to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 InventoryHow to Setup Warehouse & Location in Odoo 17 Inventory
How to Setup Warehouse & Location in Odoo 17 Inventory
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
 
Film vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movieFilm vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movie
 
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
คำศัพท์ คำพื้นฐานการอ่าน ภาษาอังกฤษ ระดับชั้น ม.1
 
PIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf IslamabadPIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf Islamabad
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
 
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptxC1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
C1 Rubenstein AP HuG xxxxxxxxxxxxxx.pptx
 

Welcome to css!

  • 1. Welcome to CSS! CSS stands for Cascading Style Sheets. - Cascading refers to the way CSS applies one style on top of another. - Style Sheets control the look and feel of web documents. CSS and HTML work hand in hand: - HTML sorts out the page structure. - CSS defines how HTML elements are displayed.CSS allows you to apply specific styles to specific HTML elements. The main benefit of CSS is that it allows you to separate style from content. Using just HTML, all the styles and formatting are in the same place, which becomes rather difficult to maintain as the page grows. css
  • 2. Using an inline style is one of the ways to insert a style sheet. With an inline style, a unique style is applied to a single element. In order to use an inline style, add the style attribute to the relevant tag. The example below shows how to create a paragraph with a gray background and white text: This puts a grey background on a html paragraph Inline CSS <p style="color:white; background-color:gray;"> This is an example of inline styling. </p>
  • 3. internal styles are defined within the <style> element, inside the head section of an HTML page. For example, the following code styles all paragraphs: All paragraphs will have a white font and an orange background Internal/Embedded CSS <html> <head> <style> p { color:white; background-color:orange; } </style> </head> <body> <p>I love web development. </p> <p>web development is fun. </p> </body> </html>
  • 4. With this method, all styling rules are contained in a single text file, which is saved with the .css extension. This CSS file is then referenced in the HTML using the <link> tag. The <link> element goes inside the head section. Here is an example: The HTML: The CSS: External CSS <head> <link rel="stylesheet" href="example.css"> </head> <body> <p>This is my first paragraph.</p> <p>This is my second paragraph. </p> <p>This is my third paragraph. </p> </body> p { color:white; background-color:gray; }