SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
CSS REFRESHER
Styling HTML elements
what is css?
• Cascading Style Sheets
• A set of rules on how to display your
  HTML elements
• Internal documents: embedded in the
  head part of the HTML file
• External documents: something.css
Basic CSS RULE
SELECTORS
• Tag/element: p{color:black;}
  <p>This text will be black</p>

• ID: #alternate {color:green;}
  <p id=“alternate”>This will be
  green</p>

• Class: .another{color:blue;}
  <p class=“another”>While this will
  be blue</p>
MORE SELECTORS
• Element-specific: p.red
                       {color:red;}
  <p class=“red”>This text will be
  red</p>

• Multiple elements: .title,   .head
  {color:pink;}
  <h1 class=“head”>Pink Heading</h1>
  <p class=“title”>Pink Title</p>
HOW to apply CSS

• Internal stylesheet
• External stylesheet
• Inline stylesheet
INTERNAL CSS
<head>
<style type=“text/css”>
p.red {
color:red;
}
</style>
</head>
EXTERNAL CSS

<head>
<link rel=“stylesheet” type=“text/
css” href= “samples.css” />
</head>
INLINE CSS

<a href=“somewhere.html” style=
“color:black;text-size:25px”>
This is a link
</a>
CASCADING
• Elements can inherit rules from
  multiple style sheets
• Inheritance order:
 1. Browser default
 2. External stylesheet
 3. Internal stylesheet
 4. Inline style
Exception!
<head>
<style type=“text/css”>
p.red {
color:red;
}
</style>
<link rel=“stylesheet” type=“text/
css” href= “samples.css” />
</head>
RULES: BACKGROUND
body {
background-color:#000000;
background-image:url(‘bg.gif’);
background-repeat:repeat-y;
background-attachment:scroll;
background-position:right top;
}
RULES: BACKGROUND

body {
background:#000000 url(‘bg.gif’)
repeat-y scroll right top
}
RULES: TEXT
h1 {
color:blue;
text-align:right;
text-decoration:underline;
text-transform:uppercase;
text-indent:50px;
}
RULES: TEXT

h1 {
word-spacing:10px;
line-height:30px;
letter-spacing:-5px;
}
RULES: FONT
p.font {
font-family:“Times New Roman”,
Verdana, Arial;
font-style:italic;
font-size:16px;
font-variant:small-caps;
font-weight:bolder;
}
Web units

• pixel: font-size:32px
• percent: font-size:200%
• em: font-size:2em
LINK STYLES
•   a:link{color:blue;}

•   a:visited{color:green;}

•   a:hover{color:pink;}

•   a:active{color:black;}

Contenu connexe

Tendances

Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSMario Hernandez
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/jsKnoldus Inc.
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmleShikshak
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 
Web Design Assignment 1
Web Design Assignment 1 Web Design Assignment 1
Web Design Assignment 1 beretta21
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptFahim Abdullah
 
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesIntro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesHeather Rock
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksAmit Tyagi
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLAmit Tyagi
 
CSS Basics (Cascading Style Sheet)
CSS Basics (Cascading Style Sheet)CSS Basics (Cascading Style Sheet)
CSS Basics (Cascading Style Sheet)Ajay Khatri
 

Tendances (20)

CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Web Design Assignment 1
Web Design Assignment 1 Web Design Assignment 1
Web Design Assignment 1
 
Css
CssCss
Css
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
Html
HtmlHtml
Html
 
HTML CSS | Computer Science
HTML CSS | Computer ScienceHTML CSS | Computer Science
HTML CSS | Computer Science
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesIntro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
CSS Basics (Cascading Style Sheet)
CSS Basics (Cascading Style Sheet)CSS Basics (Cascading Style Sheet)
CSS Basics (Cascading Style Sheet)
 

Similaire à CSS Refresher (20)

Turorial css
Turorial cssTurorial css
Turorial css
 
LIS3353 SP12 Week 13
LIS3353 SP12 Week 13LIS3353 SP12 Week 13
LIS3353 SP12 Week 13
 
BITM3730Week4.pptx
BITM3730Week4.pptxBITM3730Week4.pptx
BITM3730Week4.pptx
 
Html Styles-CSS
Html Styles-CSSHtml Styles-CSS
Html Styles-CSS
 
Css
CssCss
Css
 
Cascade.ss
Cascade.ssCascade.ss
Cascade.ss
 
Session 2 intro to Css
Session 2 intro to CssSession 2 intro to Css
Session 2 intro to Css
 
Session Two css
Session Two cssSession Two css
Session Two css
 
html-css
html-csshtml-css
html-css
 
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet)
 
Css1
Css1Css1
Css1
 
Web Design Course: CSS lecture 1
Web Design Course: CSS lecture 1Web Design Course: CSS lecture 1
Web Design Course: CSS lecture 1
 
Ict 8 css
Ict 8 cssIct 8 css
Ict 8 css
 
Css1
Css1Css1
Css1
 
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.pptwaxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
 
css1.ppt
css1.pptcss1.ppt
css1.ppt
 
Introduction to CSS.pptx
Introduction to CSS.pptxIntroduction to CSS.pptx
Introduction to CSS.pptx
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
 
Unit 3 (it workshop).pptx
Unit 3 (it workshop).pptxUnit 3 (it workshop).pptx
Unit 3 (it workshop).pptx
 
6_CasCadingStylesSheetsCSS.ppt
6_CasCadingStylesSheetsCSS.ppt6_CasCadingStylesSheetsCSS.ppt
6_CasCadingStylesSheetsCSS.ppt
 

Plus de Gerson Abesamis (20)

YMSAT Project Proposal Form
YMSAT Project Proposal FormYMSAT Project Proposal Form
YMSAT Project Proposal Form
 
YMSAT Student Primer
YMSAT Student PrimerYMSAT Student Primer
YMSAT Student Primer
 
Final Project
Final ProjectFinal Project
Final Project
 
960 Grid System
960 Grid System960 Grid System
960 Grid System
 
CSS Box Model
CSS Box ModelCSS Box Model
CSS Box Model
 
Photography Orientation 11-12
Photography Orientation 11-12Photography Orientation 11-12
Photography Orientation 11-12
 
WebDev2 Orientation 11-12
WebDev2 Orientation 11-12WebDev2 Orientation 11-12
WebDev2 Orientation 11-12
 
Photography Class 11-12
Photography Class 11-12Photography Class 11-12
Photography Class 11-12
 
Prewar report
Prewar reportPrewar report
Prewar report
 
Typo Graphics
Typo GraphicsTypo Graphics
Typo Graphics
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Typographic Contrast
Typographic ContrastTypographic Contrast
Typographic Contrast
 
WebDev Template Finals
WebDev Template FinalsWebDev Template Finals
WebDev Template Finals
 
Css positioning
Css positioningCss positioning
Css positioning
 
Pinhole photography vale
Pinhole photography valePinhole photography vale
Pinhole photography vale
 
CSS Box Model and Dimensions
CSS Box Model and DimensionsCSS Box Model and Dimensions
CSS Box Model and Dimensions
 
Interface Design
Interface DesignInterface Design
Interface Design
 
CSS Lists and Tables
CSS Lists and TablesCSS Lists and Tables
CSS Lists and Tables
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
Information Architecture
Information ArchitectureInformation Architecture
Information Architecture
 

CSS Refresher