SlideShare una empresa de Scribd logo
1 de 13
Introduction to CSS
CSS Defined: ,[object Object],[object Object],[object Object],[object Object],[object Object]
Three Ways to Use CSS: ,[object Object],[object Object],[object Object]
CSS Format Conflicts: ,[object Object],[object Object]
What is Meant by "Cascading"? ,[object Object],[object Object],[object Object],[object Object],[object Object],For each XHTML element, the browser will check to see which inline styles are defined, then those styles in the internal style sheet, and finally those styles in the external sheet.  For all conflicts, it will use this priority system to determine which format to display on the page. In the prior example, the paragraph would display as red, because the inline style "outranks" all the others.
Example: Inline Style <h2  style=&quot;font-family:georgia; color:red;&quot; > CAUTION: Stormy Weather! </h2> An inline style declaration like this one will affect  only that particular element .  In other words, other <h2> elements on the page will not be affected by this formatting. A semicolon must follow each style declaration. Because inline styles do not properly separate content and presentation, their use is discouraged.  We will not be using inline styles in this class. PREVIEW:
Example: Internal Style Sheet <head> <style type=&quot;text/css&quot;> h2 {font-family:georgia; color:red;} </style> </head> Styles declared in the internal style sheet will affect  all matching elements on the page .  In this example, all <h2> elements on the page will be displayed in Georgia font and in red color. For internal style sheets, all formatting declarations are placed inside the <style> element within the <head> section of the document.  An element is listed and all the styling information follows, surrounded by opening and closing curly brackets,  { } . A semicolon must still follow each style declaration.
Example: External Style Sheet <head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /> </head> Styles declared in an external style sheet will affect  all matching elements on all web pages that link to the stylesheet .  In this example, all <h2> elements on all pages using this style sheet will be displayed in Georgia font and in red color. For external style sheets, a <link> tag is placed at the beginning of the <head> section of the document specifying the external style sheet (with a .css extension) to be used for formatting.  The external style sheet uses the same syntax as the internal style sheet when listing elements and their styling. h2 {font-family:georgia; color:red;} style.css (separate file):
Internal vs. External Style Sheets ,[object Object],[object Object],[object Object],[object Object]
CSS Terminology and Syntax: ,[object Object],Correct syntax: selector {property:value;} Selector Property Value Be careful to put the semicolon after each declaration.  It is the single most common mistake made by those learning CSS.
Setting Multiple Properties: ,[object Object],[object Object],[object Object],[object Object],[object Object],Many designers choose to place the selector and the open bracket on a dedicated line and the closing bracket on its own line too.  By doing this, all the selectors in between are aligned and easy to read. You can define as many selectors as you wish for the element you are formatting. In the above example, all paragraph elements will now show red italic text that is centered on the page.
Setting a Background with CSS: body { background-image:url('picture.gif'); background-repeat:repeat-x; background-color:red; } With background-image, you can specify an image to be placed in the background of your web page. If you specify a background image, you can also decide whether the image will &quot;tile&quot; across or down the screen.  Possible values for the background-repeat property include repeat-x (horizontally only), repeat-y (vertical only), and no-repeat (no tiling at all).  If you don't specify this property at all, by default the image will repeat up and down to fill the entire page. You can use the background-color property to set one solid color for the background.  Even if you specify a background image, it is good practice to specify a color too.  If for some reason the background image is not available, the background color will be shown instead.
CSS Text Properties: The following properties can be specified for any element that contains text, such as <h1> thru <h6>, <p>, <ol>, <ul>, and <a>: Property Some Possible Values text-align:  center, left, right, justify text-decoration: underline, line-through, blink color: blue, green, yellow, red, white, etc. font-family: Arial, Verdana, &quot;Times New Roman&quot; font-size: large, 120%, 20px (pixels)    font-weight: bold, normal font-style: italic, normal For a full list of available color names, refer to the following page: http://www.w3.org/TR/css3-color/#svg-color

Más contenido relacionado

La actualidad más candente

Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Hatem Mahmoud
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheetvijayta
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksAmit Tyagi
 
Customizing the Appearance and HTML Output of Visualforce Pages
Customizing the Appearance and HTML Output of VisualforcePages Customizing the Appearance and HTML Output of VisualforcePages
Customizing the Appearance and HTML Output of Visualforce Pages Mohammed Safwat Abu Kwaik
 
Creating a webpage in html
Creating a webpage in htmlCreating a webpage in html
Creating a webpage in htmlShrey Goswami
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheetMichael Jhon
 
Introduction to Cascading Style Sheets
Introduction to Cascading Style SheetsIntroduction to Cascading Style Sheets
Introduction to Cascading Style SheetsTushar Joshi
 
How to create a html webpage using notepad
How to create a html webpage using notepadHow to create a html webpage using notepad
How to create a html webpage using notepadSophieBarwick1999
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)Webtech Learning
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssTesfaye Yenealem
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakessanjay2211
 

La actualidad más candente (20)

Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
What is CSS?
What is CSS?What is CSS?
What is CSS?
 
Css mod1
Css mod1Css mod1
Css mod1
 
Customizing the Appearance and HTML Output of Visualforce Pages
Customizing the Appearance and HTML Output of VisualforcePages Customizing the Appearance and HTML Output of VisualforcePages
Customizing the Appearance and HTML Output of Visualforce Pages
 
Creating a webpage in html
Creating a webpage in htmlCreating a webpage in html
Creating a webpage in html
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
CSS
CSSCSS
CSS
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Css
CssCss
Css
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
Introduction to Cascading Style Sheets
Introduction to Cascading Style SheetsIntroduction to Cascading Style Sheets
Introduction to Cascading Style Sheets
 
How to create a html webpage using notepad
How to create a html webpage using notepadHow to create a html webpage using notepad
How to create a html webpage using notepad
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
 
Chapter 4a cascade style sheet css
Chapter 4a cascade style sheet cssChapter 4a cascade style sheet css
Chapter 4a cascade style sheet css
 
CSS - LinkedIn
CSS - LinkedInCSS - LinkedIn
CSS - LinkedIn
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
 
Css Basics
Css BasicsCss Basics
Css Basics
 

Destacado

Špoģi-Syke
Špoģi-Syke  Špoģi-Syke
Špoģi-Syke Eva Vovka
 
7.1 xhtml validation
7.1 xhtml validation7.1 xhtml validation
7.1 xhtml validationBulldogs83
 
[Gmic]nale be cubbying
[Gmic]nale be cubbying[Gmic]nale be cubbying
[Gmic]nale be cubbyingHyoin Sung
 
Presentation 10
Presentation 10Presentation 10
Presentation 10rfvbgt111
 
6.1 special characters
6.1 special characters6.1 special characters
6.1 special charactersBulldogs83
 
Another world (1) The author Ilze
Another world (1) The author IlzeAnother world (1) The author Ilze
Another world (1) The author IlzeEva Vovka
 
Dress from newspapers_-_copy (1)
Dress from newspapers_-_copy (1)Dress from newspapers_-_copy (1)
Dress from newspapers_-_copy (1)Eva Vovka
 
Global dimension in social sciences subjects in formal
Global dimension in social sciences subjects in formalGlobal dimension in social sciences subjects in formal
Global dimension in social sciences subjects in formalEva Vovka
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to cssBulldogs83
 
2.1 adding images
2.1 adding images2.1 adding images
2.1 adding imagesBulldogs83
 
American Campaign to supress Islam
American Campaign to supress IslamAmerican Campaign to supress Islam
American Campaign to supress IslamAbu Talha
 
Marathon Oil Corp. Industry Profile
Marathon Oil Corp. Industry ProfileMarathon Oil Corp. Industry Profile
Marathon Oil Corp. Industry ProfileLIS7205
 
Questionaire all-teachers-2011
Questionaire all-teachers-2011Questionaire all-teachers-2011
Questionaire all-teachers-2011Mihajlo Gajic
 

Destacado (20)

Introduction 2 css
Introduction 2 cssIntroduction 2 css
Introduction 2 css
 
Komonvelt portoriko
Komonvelt portorikoKomonvelt portoriko
Komonvelt portoriko
 
Špoģi-Syke
Špoģi-Syke  Špoģi-Syke
Špoģi-Syke
 
7.1 xhtml validation
7.1 xhtml validation7.1 xhtml validation
7.1 xhtml validation
 
[Gmic]nale be cubbying
[Gmic]nale be cubbying[Gmic]nale be cubbying
[Gmic]nale be cubbying
 
Presentation 10
Presentation 10Presentation 10
Presentation 10
 
6.1 special characters
6.1 special characters6.1 special characters
6.1 special characters
 
Ultimate frisbee
Ultimate frisbeeUltimate frisbee
Ultimate frisbee
 
Osnove windows-a
Osnove windows-aOsnove windows-a
Osnove windows-a
 
Java ders2
Java ders2Java ders2
Java ders2
 
Another world (1) The author Ilze
Another world (1) The author IlzeAnother world (1) The author Ilze
Another world (1) The author Ilze
 
Dress from newspapers_-_copy (1)
Dress from newspapers_-_copy (1)Dress from newspapers_-_copy (1)
Dress from newspapers_-_copy (1)
 
Global dimension in social sciences subjects in formal
Global dimension in social sciences subjects in formalGlobal dimension in social sciences subjects in formal
Global dimension in social sciences subjects in formal
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
2.1 adding images
2.1 adding images2.1 adding images
2.1 adding images
 
American Campaign to supress Islam
American Campaign to supress IslamAmerican Campaign to supress Islam
American Campaign to supress Islam
 
Marathon Oil Corp. Industry Profile
Marathon Oil Corp. Industry ProfileMarathon Oil Corp. Industry Profile
Marathon Oil Corp. Industry Profile
 
Fstpt 15-solo-english
Fstpt 15-solo-englishFstpt 15-solo-english
Fstpt 15-solo-english
 
Questionaire all-teachers-2011
Questionaire all-teachers-2011Questionaire all-teachers-2011
Questionaire all-teachers-2011
 
Geo gebra u1
Geo gebra u1Geo gebra u1
Geo gebra u1
 

Similar a 3.2 introduction to css (20)

Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
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 notes
CSS notesCSS notes
CSS notes
 
Web Programming-css.pptx
Web Programming-css.pptxWeb Programming-css.pptx
Web Programming-css.pptx
 
CSS
CSSCSS
CSS
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Css 2010
Css 2010Css 2010
Css 2010
 
Css 2010
Css 2010Css 2010
Css 2010
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
Css.prabu
Css.prabuCss.prabu
Css.prabu
 
CSS
CSSCSS
CSS
 
html-css
html-csshtml-css
html-css
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common Errors
 
CSS
CSSCSS
CSS
 

Más de Bulldogs83

7.2 external style sheets
7.2 external style sheets7.2 external style sheets
7.2 external style sheetsBulldogs83
 
6.2 css link styling
6.2 css link styling6.2 css link styling
6.2 css link stylingBulldogs83
 
5.2 nesting and floating elements
5.2 nesting and floating elements5.2 nesting and floating elements
5.2 nesting and floating elementsBulldogs83
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box modelBulldogs83
 
4.3 table styling
4.3 table styling4.3 table styling
4.3 table stylingBulldogs83
 
4.2 css classes
4.2 css classes4.2 css classes
4.2 css classesBulldogs83
 
4.1 advanced tables
4.1 advanced tables4.1 advanced tables
4.1 advanced tablesBulldogs83
 
3.1 xhtml tables
3.1 xhtml tables3.1 xhtml tables
3.1 xhtml tablesBulldogs83
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)Bulldogs83
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)Bulldogs83
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating linksBulldogs83
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating linksBulldogs83
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)Bulldogs83
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)Bulldogs83
 
1.1 xhtml basics
1.1 xhtml basics1.1 xhtml basics
1.1 xhtml basicsBulldogs83
 

Más de Bulldogs83 (15)

7.2 external style sheets
7.2 external style sheets7.2 external style sheets
7.2 external style sheets
 
6.2 css link styling
6.2 css link styling6.2 css link styling
6.2 css link styling
 
5.2 nesting and floating elements
5.2 nesting and floating elements5.2 nesting and floating elements
5.2 nesting and floating elements
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
 
4.3 table styling
4.3 table styling4.3 table styling
4.3 table styling
 
4.2 css classes
4.2 css classes4.2 css classes
4.2 css classes
 
4.1 advanced tables
4.1 advanced tables4.1 advanced tables
4.1 advanced tables
 
3.1 xhtml tables
3.1 xhtml tables3.1 xhtml tables
3.1 xhtml tables
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 
1.1 xhtml basics
1.1 xhtml basics1.1 xhtml basics
1.1 xhtml basics
 

Último

Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Celine George
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operationalssuser3e220a
 
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQ-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQuiz Club NITW
 
Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1GloryAnnCastre1
 
Congestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentationCongestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentationdeepaannamalai16
 
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxDIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxMichelleTuguinay1
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management systemChristalin Nelson
 
31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...
31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...
31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...Nguyen Thanh Tu Collection
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptxmary850239
 
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxCLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxAnupam32727
 
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfActive Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfPatidar M
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptxmary850239
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management SystemChristalin Nelson
 
ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6Vanessa Camilleri
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...DhatriParmar
 
Sulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesSulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesVijayaLaxmi84
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfVanessa Camilleri
 
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptxGrade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptxkarenfajardo43
 

Último (20)

Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operational
 
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQ-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
 
Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1Reading and Writing Skills 11 quarter 4 melc 1
Reading and Writing Skills 11 quarter 4 melc 1
 
Congestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentationCongestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentation
 
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxDIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management system
 
31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...
31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...
31 ĐỀ THI THỬ VÀO LỚP 10 - TIẾNG ANH - FORM MỚI 2025 - 40 CÂU HỎI - BÙI VĂN V...
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx
 
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptxCLASSIFICATION OF ANTI - CANCER DRUGS.pptx
CLASSIFICATION OF ANTI - CANCER DRUGS.pptx
 
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfActive Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdf
 
prashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Professionprashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Profession
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management System
 
Mattingly "AI & Prompt Design: Large Language Models"
Mattingly "AI & Prompt Design: Large Language Models"Mattingly "AI & Prompt Design: Large Language Models"
Mattingly "AI & Prompt Design: Large Language Models"
 
ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
 
Sulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their usesSulphonamides, mechanisms and their uses
Sulphonamides, mechanisms and their uses
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdf
 
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptxGrade Three -ELLNA-REVIEWER-ENGLISH.pptx
Grade Three -ELLNA-REVIEWER-ENGLISH.pptx
 

3.2 introduction to css

  • 2.
  • 3.
  • 4.
  • 5.
  • 6. Example: Inline Style <h2 style=&quot;font-family:georgia; color:red;&quot; > CAUTION: Stormy Weather! </h2> An inline style declaration like this one will affect only that particular element . In other words, other <h2> elements on the page will not be affected by this formatting. A semicolon must follow each style declaration. Because inline styles do not properly separate content and presentation, their use is discouraged. We will not be using inline styles in this class. PREVIEW:
  • 7. Example: Internal Style Sheet <head> <style type=&quot;text/css&quot;> h2 {font-family:georgia; color:red;} </style> </head> Styles declared in the internal style sheet will affect all matching elements on the page . In this example, all <h2> elements on the page will be displayed in Georgia font and in red color. For internal style sheets, all formatting declarations are placed inside the <style> element within the <head> section of the document. An element is listed and all the styling information follows, surrounded by opening and closing curly brackets, { } . A semicolon must still follow each style declaration.
  • 8. Example: External Style Sheet <head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /> </head> Styles declared in an external style sheet will affect all matching elements on all web pages that link to the stylesheet . In this example, all <h2> elements on all pages using this style sheet will be displayed in Georgia font and in red color. For external style sheets, a <link> tag is placed at the beginning of the <head> section of the document specifying the external style sheet (with a .css extension) to be used for formatting. The external style sheet uses the same syntax as the internal style sheet when listing elements and their styling. h2 {font-family:georgia; color:red;} style.css (separate file):
  • 9.
  • 10.
  • 11.
  • 12. Setting a Background with CSS: body { background-image:url('picture.gif'); background-repeat:repeat-x; background-color:red; } With background-image, you can specify an image to be placed in the background of your web page. If you specify a background image, you can also decide whether the image will &quot;tile&quot; across or down the screen. Possible values for the background-repeat property include repeat-x (horizontally only), repeat-y (vertical only), and no-repeat (no tiling at all). If you don't specify this property at all, by default the image will repeat up and down to fill the entire page. You can use the background-color property to set one solid color for the background. Even if you specify a background image, it is good practice to specify a color too. If for some reason the background image is not available, the background color will be shown instead.
  • 13. CSS Text Properties: The following properties can be specified for any element that contains text, such as <h1> thru <h6>, <p>, <ol>, <ul>, and <a>: Property Some Possible Values text-align: center, left, right, justify text-decoration: underline, line-through, blink color: blue, green, yellow, red, white, etc. font-family: Arial, Verdana, &quot;Times New Roman&quot; font-size: large, 120%, 20px (pixels) font-weight: bold, normal font-style: italic, normal For a full list of available color names, refer to the following page: http://www.w3.org/TR/css3-color/#svg-color