SlideShare ist ein Scribd-Unternehmen logo
1 von 25
Downloaden Sie, um offline zu lesen
Cascading Style Sheet
• What is CSS?
• Syntax
• Applying CSS
• Commonly used CSS properties
• Grouping and Nesting
• Floats in Page Layouting
• @ rules
• Q&A
Agenda
What is CSS?
CSS, or Cascading Styles Sheets, is a way
to style and present HTML.
Cascading Style Sheets, or CSS, is the
recommended way to control the
presentation layer in a web document.
The main advantage of CSS over
presentational HTML markup is that the
styling can be kept entirely separate from
the content.
CSS
A style sheet consists of a list of rules. Each rule or rule-set consists of one or
more selectors, and a declaration block.
selector [, selector2, ...] [:pseudo-class]
{
property: value;
[property2: value2; ...]
}
/* comment */
Syntax
There are three ways to apply CSS to HTML:
In-line – written directly inside the tag
Internal – embedded into an HTML document.
External – written in separate files and then linked to in the HTML
<p style="color: red">text</p>
<style>
p {color: red; }
</style>
<link rel="stylesheet" href="style.css">
Applying CSS
Selectors are the names given to styles in internal and external style sheets.
The property is the style attribute you want to change and Values are assigned
to properties
p
{
color: red;
}
selector
property value
Selectors, Properties & Values
General Units used in values:
px (such as font-size: 12px) is the unit for pixels.
em (such as font-size: 2em) is the unit for the calculated size of a font. So
“2em”, for example, is two times the current font size.
pt (such as font-size: 12pt) is the unit for points, typically used in printed
media.
% (such as width: 80%)
Other units include pc(picas), cm, mm and in(inches)
Note: When a value is zero, there is no need to state a unit. For e.g. to specify
no border, it would be border: 0.
Units
Colors in CSS can take the form of:
name - E.g.: color:red
RGB value – E.g.: color: rgb(255,0,0)
RGBA value - E.g.: color: rgba(255,0,0,1)
Hexa value - E.g.: color: #ff0000 or color:#f00
HSL value - E.g.: color: hsl(0,100%,50%)
HSLA value - E.g.: color: hsla(0,100%,50%,0.3)
Colors can be applied using the color or background-color property
Colors
Gradients lets you display smooth transitions between two or more specified
colors
Browsers support two types of gradients - linear and radial
Linear Gradient
background: linear-gradient(to bottom right, blue, white);
background: linear-gradient(70deg, black, white);
background: linear-gradient(to bottom, blue, white 80%, orange);
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)),
url(http://foo.com/image.jpg);
Colors - Gradients
Radial Gradient
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
Repeating gradients used to automatically repeat the color stops.
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
.gradient
{
width: auto; height: 500px; margin: 0 50px;
background: -webkit-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background: -moz-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background: -o-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background: repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
background-size: 100% 21px;
}
.gradient:before
{
content: ""; display: inline-block; height: 500px; width: 4px;
border-left: 4px double #FCA1A1; position: relative; left: 30px;
}
Colors – Gradients (Contd…)
Text in CSS can be manipulated using the following properties:
family - E.g.: font-family: Arial, Helvetica, sans-serif
size – E.g.: font-size:16px
style - E.g.: font-style:italic; (normal, italic, oblique, inherit)
weight - E.g.: font-weight:bold; (normal, bold, bolder, lighter, 100…900, inherit)
variant - E.g.: font-variant:small-caps; (normal, inherit)
All in one order – “<font-style>< font-variant ><font-weight>< font-
size/line-height>< font-family>”
E.g.: font: italic bold 12px/30px Georgia, serif;
Other Text properties that can be referred to –
Text-decoration, text-transform, letter-spacing, word-spacing, line-height, text-
align, text-indent etc…
Text
Backgrounds are a core part of CSS, that can be used to add color or images to
a page or element. It can be manipulated using the following properties:
background-color - E.g.: background-color :rgba(0,0,255,1)
background-image – E.g.: background-image: url(image.jpg);
background-position - E.g.: background-position: 75px 0; (left, center, right, top,
center, bottom)
background-repeat - E.g.: background-repeat: repeat; (repeat-x, repeat-y,
no-repeat, inherit)
background-attachment - E.g.: background-attachment: scroll; (scroll, fixed,
inherit)
All in one order – background: <color> <image> <position> <attachment>
<repeat>
E.g.: background: transparent url(image.jpg) 50% 0 scroll repeat-y;
Background
Box-shadow allows casting a drop shadow from the frame of almost any
element. It takes the form as below:
box-shadow: none | inset <offset-x> <offset-y> <blur-radius>
<spread-radius> <color>
.shadow
{
box-shadow: 4px 4px 4px 5px #f00;
}
Shadows
Margin and Padding are the two most commonly used properties for spacing-
out elements.
Margin is the space outside something, whereas padding is the space inside
something.
Margin and Padding
p
{
margin: 20% auto;
padding: 10px 20px 40px 5px;
}
Example for margin and padding in shorthand
div
{
margin-top:10px;
margin-right:10px;
margin-bottom: 5px;
margin-left: 3px;
padding-left: 30px;
}
Another example with expanded forms:
Margin and Padding(Contd…)
Used to set borders around an element. The properties that can be set are
Width - E.g.: border-width: 12px;
Style - E.g.: border-style: solid; (none, hidden, dotted, dashed, solid, double groove,
ridge, inset, outset, inherit)
Color - E.g.: border-color: #ff0000;
Radius - E.g.: border-radius:5px;
Or shorthand
div
{
border :12px dashed #ff0000;
border-radius:5px 2px 3px 0;
}
Borders
class and ID selectors can be defined in order to customize the selectors i.e.
you can have the same HTML element, but present it differently depending
on its class or ID.
A class selector is a name preceded by a full stop (“.”) and an ID selector is
a name preceded by a hash character (“#”).
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.
#top
{
background-color: #ccc;
padding: 20px
}
.intro
{
color: red;
font-weight: bold;
}
Class and ID Selectors
Grouping is giving the same properties to a number of selectors without
having to repeat them. You can simply separate selectors with commas in
one line and apply the same properties to all of them.
h2
{
color: red;
}
.secondClass
{
color: red;
}
.thirdClass
{
color: red;
}
h2, .secondClass, .thirdClass
{
color: red;
}
Can just be written as
Grouping
Nesting is specifying properties to selectors within other selectors.
This removes the need for classes or IDs on the p and h1 tags if it is applied
to HTML that looks something like this:
#top {
background-color: #ccc; padding: 1em;
}
#top h1 {
color: #ff0;
}
#top p {
color: red; font-weight: bold;
}
<div id="top">
<h1>Sport</h1>
<p>Sport refers to a competitive physical activity.</p>
<p>"Sport" comes from the Old French desport meaning "leisure“.</p>
</div>
Sport
Sport refers to a competitive physical activity.
“Sport” comes from the Old
French desport meaning “leisure”.
CSS
Output:
Nesting
Pseudo classes are added to selectors to specify a state or relation to the
selector. They are written simply with a colon in between the selector and the
pseudo class.
E.g. In case of Links -
a:link {color:#ff0; text-decoration:none;}
a:hover {color:#f00; text-decoration:underline;}
a:visited {color:#00f; text-decoration:none;}
a:active {color:#ccc; text-decoration:underline;}
Other pseudo classes that can be referred to are first-child,
last-child, focus, first-letter, before, after etc…
Pseudo Classes
Float is a CSS positioning property and can be used to create entire web layouts
Clearing Floats
Floats when used need to be cleared and that is done using the clear property
E.g.: clear:both;
Float not cleared Float cleared
Page Layouts - Floats
At-rules are clever, powerful little huggers that encapsulate a bunch of CSS
rules and apply them to something specific. They can be used to import other
CSS files, apply CSS to a particular media, or embed uncommon fonts.
Importing
@import rule is used to bolt another stylesheet onto your existing one.
This must be placed at the top of a stylesheet, before any other rules.
E.g.: @import url(morestyles.css);
At- Rules
Targeting media types
@media can be used to apply styles to a specific media, such as print.
E.g.: @media screen and (max-width: 1000px)
{
#content { width: 100% }
}
@media screen and (max-width: 800px)
{
#nav { float: none }
}
@media screen and (max-width: 600px)
{
#content aside { float: none; display: block; }
}
Note that if, for example, a layout area was 600 pixels wide or less, all three of these
would be applied (because it would be less than or equal to 1000px, 800px, and 600px).
At- Rules(Contd…)
Embedding fonts
@font-face is used for embedding fonts in a web page so that a typeface can be
used even if it isn’t sitting on the user’s computer.
E.g.: @font-face
{
font-family: “Futura”;
src: url(Futura.woff);
}
OR
@font-face
{
font-family: “Futura”;
src: local(“Futura”), local(“Futura LT”), url(“Futura.woff”);
font-weight: 400;
font-style: normal;
}
At- Rules(Contd…)
End
Thank You !

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Css
CssCss
Css
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
 
Html&amp;css slideshare
Html&amp;css   slideshareHtml&amp;css   slideshare
Html&amp;css slideshare
 
Chapter 14: Box Model
Chapter 14: Box ModelChapter 14: Box Model
Chapter 14: Box Model
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
 
CSS Part II
CSS Part IICSS Part II
CSS Part II
 
Chapter 11: Intro to CSS
Chapter 11: Intro to CSSChapter 11: Intro to CSS
Chapter 11: Intro to CSS
 
Css3 Complete Reference
Css3 Complete ReferenceCss3 Complete Reference
Css3 Complete Reference
 
Css ppt
Css pptCss ppt
Css ppt
 
Basic css
Basic cssBasic css
Basic css
 
Css
CssCss
Css
 
Css
CssCss
Css
 
CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)CSS_Day_Two (W3schools)
CSS_Day_Two (W3schools)
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Css
CssCss
Css
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Html4
Html4Html4
Html4
 
FFW Gabrovo PMG - CSS
FFW Gabrovo PMG - CSSFFW Gabrovo PMG - CSS
FFW Gabrovo PMG - CSS
 
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
 

Andere mochten auch

Andere mochten auch (20)

Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading 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 tutorial
CSS tutorialCSS tutorial
CSS tutorial
 
Css advance
Css   advanceCss   advance
Css advance
 
Chapter 12
Chapter 12Chapter 12
Chapter 12
 
Chapter 19
Chapter 19Chapter 19
Chapter 19
 
Chapter 25
Chapter 25Chapter 25
Chapter 25
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
 
CSS
CSSCSS
CSS
 
Intro To ECAT
Intro To ECATIntro To ECAT
Intro To ECAT
 
HTML5 &CSS: Chapter 08
HTML5 &CSS: Chapter 08HTML5 &CSS: Chapter 08
HTML5 &CSS: Chapter 08
 
Html and CSS: Chapter 02
Html and CSS: Chapter 02Html and CSS: Chapter 02
Html and CSS: Chapter 02
 
HTML & CSS: Chapter 03
HTML & CSS: Chapter 03HTML & CSS: Chapter 03
HTML & CSS: Chapter 03
 
HTML: Chapter 01
HTML: Chapter 01HTML: Chapter 01
HTML: Chapter 01
 
HTML & CSS: Chapter 07
HTML & CSS: Chapter 07HTML & CSS: Chapter 07
HTML & CSS: Chapter 07
 
HTML & CSS: Chapter 06
HTML & CSS: Chapter 06HTML & CSS: Chapter 06
HTML & CSS: Chapter 06
 
Unit 6, Lesson 3 - Vectors
Unit 6, Lesson 3 - VectorsUnit 6, Lesson 3 - Vectors
Unit 6, Lesson 3 - Vectors
 
HTML & CSS: Chapter 04
HTML & CSS: Chapter 04HTML & CSS: Chapter 04
HTML & CSS: Chapter 04
 
Basic css-tutorial
Basic css-tutorialBasic css-tutorial
Basic css-tutorial
 
Bread board
Bread boardBread board
Bread board
 

Ähnlich wie CSS - Basics (20)

Css siva
Css sivaCss siva
Css siva
 
Css siva
Css sivaCss siva
Css siva
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
html-css
html-csshtml-css
html-css
 
Css
CssCss
Css
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
CSS
CSSCSS
CSS
 
Web - CSS 1.pptx
Web - CSS 1.pptxWeb - CSS 1.pptx
Web - CSS 1.pptx
 
Css Introduction
Css IntroductionCss Introduction
Css Introduction
 
Cascstylesheets
CascstylesheetsCascstylesheets
Cascstylesheets
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
CSS Training in Bangalore
CSS Training in BangaloreCSS Training in Bangalore
CSS Training in Bangalore
 
Css
CssCss
Css
 
Css basics
Css basicsCss basics
Css basics
 
CSS Presentation Notes.pptx
CSS Presentation Notes.pptxCSS Presentation Notes.pptx
CSS Presentation Notes.pptx
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 

Kürzlich hochgeladen

Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...Nguyen Thanh Tu Collection
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and stepobaje godwin sunday
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsEugene Lysak
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17Celine George
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 

Kürzlich hochgeladen (20)

Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and step
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George Wells
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 

CSS - Basics

  • 2. • What is CSS? • Syntax • Applying CSS • Commonly used CSS properties • Grouping and Nesting • Floats in Page Layouting • @ rules • Q&A Agenda
  • 3. What is CSS? CSS, or Cascading Styles Sheets, is a way to style and present HTML. Cascading Style Sheets, or CSS, is the recommended way to control the presentation layer in a web document. The main advantage of CSS over presentational HTML markup is that the styling can be kept entirely separate from the content. CSS
  • 4. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block. selector [, selector2, ...] [:pseudo-class] { property: value; [property2: value2; ...] } /* comment */ Syntax
  • 5. There are three ways to apply CSS to HTML: In-line – written directly inside the tag Internal – embedded into an HTML document. External – written in separate files and then linked to in the HTML <p style="color: red">text</p> <style> p {color: red; } </style> <link rel="stylesheet" href="style.css"> Applying CSS
  • 6. Selectors are the names given to styles in internal and external style sheets. The property is the style attribute you want to change and Values are assigned to properties p { color: red; } selector property value Selectors, Properties & Values
  • 7. General Units used in values: px (such as font-size: 12px) is the unit for pixels. em (such as font-size: 2em) is the unit for the calculated size of a font. So “2em”, for example, is two times the current font size. pt (such as font-size: 12pt) is the unit for points, typically used in printed media. % (such as width: 80%) Other units include pc(picas), cm, mm and in(inches) Note: When a value is zero, there is no need to state a unit. For e.g. to specify no border, it would be border: 0. Units
  • 8. Colors in CSS can take the form of: name - E.g.: color:red RGB value – E.g.: color: rgb(255,0,0) RGBA value - E.g.: color: rgba(255,0,0,1) Hexa value - E.g.: color: #ff0000 or color:#f00 HSL value - E.g.: color: hsl(0,100%,50%) HSLA value - E.g.: color: hsla(0,100%,50%,0.3) Colors can be applied using the color or background-color property Colors
  • 9. Gradients lets you display smooth transitions between two or more specified colors Browsers support two types of gradients - linear and radial Linear Gradient background: linear-gradient(to bottom right, blue, white); background: linear-gradient(70deg, black, white); background: linear-gradient(to bottom, blue, white 80%, orange); background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg); Colors - Gradients
  • 10. Radial Gradient background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%); Repeating gradients used to automatically repeat the color stops. background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px); .gradient { width: auto; height: 500px; margin: 0 50px; background: -webkit-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); background: -moz-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); background: -o-repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); background: repeating-linear-gradient(-90deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px); background-size: 100% 21px; } .gradient:before { content: ""; display: inline-block; height: 500px; width: 4px; border-left: 4px double #FCA1A1; position: relative; left: 30px; } Colors – Gradients (Contd…)
  • 11. Text in CSS can be manipulated using the following properties: family - E.g.: font-family: Arial, Helvetica, sans-serif size – E.g.: font-size:16px style - E.g.: font-style:italic; (normal, italic, oblique, inherit) weight - E.g.: font-weight:bold; (normal, bold, bolder, lighter, 100…900, inherit) variant - E.g.: font-variant:small-caps; (normal, inherit) All in one order – “<font-style>< font-variant ><font-weight>< font- size/line-height>< font-family>” E.g.: font: italic bold 12px/30px Georgia, serif; Other Text properties that can be referred to – Text-decoration, text-transform, letter-spacing, word-spacing, line-height, text- align, text-indent etc… Text
  • 12. Backgrounds are a core part of CSS, that can be used to add color or images to a page or element. It can be manipulated using the following properties: background-color - E.g.: background-color :rgba(0,0,255,1) background-image – E.g.: background-image: url(image.jpg); background-position - E.g.: background-position: 75px 0; (left, center, right, top, center, bottom) background-repeat - E.g.: background-repeat: repeat; (repeat-x, repeat-y, no-repeat, inherit) background-attachment - E.g.: background-attachment: scroll; (scroll, fixed, inherit) All in one order – background: <color> <image> <position> <attachment> <repeat> E.g.: background: transparent url(image.jpg) 50% 0 scroll repeat-y; Background
  • 13. Box-shadow allows casting a drop shadow from the frame of almost any element. It takes the form as below: box-shadow: none | inset <offset-x> <offset-y> <blur-radius> <spread-radius> <color> .shadow { box-shadow: 4px 4px 4px 5px #f00; } Shadows
  • 14. Margin and Padding are the two most commonly used properties for spacing- out elements. Margin is the space outside something, whereas padding is the space inside something. Margin and Padding
  • 15. p { margin: 20% auto; padding: 10px 20px 40px 5px; } Example for margin and padding in shorthand div { margin-top:10px; margin-right:10px; margin-bottom: 5px; margin-left: 3px; padding-left: 30px; } Another example with expanded forms: Margin and Padding(Contd…)
  • 16. Used to set borders around an element. The properties that can be set are Width - E.g.: border-width: 12px; Style - E.g.: border-style: solid; (none, hidden, dotted, dashed, solid, double groove, ridge, inset, outset, inherit) Color - E.g.: border-color: #ff0000; Radius - E.g.: border-radius:5px; Or shorthand div { border :12px dashed #ff0000; border-radius:5px 2px 3px 0; } Borders
  • 17. class and ID selectors can be defined in order to customize the selectors i.e. you can have the same HTML element, but present it differently depending on its class or ID. A class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). 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. #top { background-color: #ccc; padding: 20px } .intro { color: red; font-weight: bold; } Class and ID Selectors
  • 18. Grouping is giving the same properties to a number of selectors without having to repeat them. You can simply separate selectors with commas in one line and apply the same properties to all of them. h2 { color: red; } .secondClass { color: red; } .thirdClass { color: red; } h2, .secondClass, .thirdClass { color: red; } Can just be written as Grouping
  • 19. Nesting is specifying properties to selectors within other selectors. This removes the need for classes or IDs on the p and h1 tags if it is applied to HTML that looks something like this: #top { background-color: #ccc; padding: 1em; } #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; } <div id="top"> <h1>Sport</h1> <p>Sport refers to a competitive physical activity.</p> <p>"Sport" comes from the Old French desport meaning "leisure“.</p> </div> Sport Sport refers to a competitive physical activity. “Sport” comes from the Old French desport meaning “leisure”. CSS Output: Nesting
  • 20. Pseudo classes are added to selectors to specify a state or relation to the selector. They are written simply with a colon in between the selector and the pseudo class. E.g. In case of Links - a:link {color:#ff0; text-decoration:none;} a:hover {color:#f00; text-decoration:underline;} a:visited {color:#00f; text-decoration:none;} a:active {color:#ccc; text-decoration:underline;} Other pseudo classes that can be referred to are first-child, last-child, focus, first-letter, before, after etc… Pseudo Classes
  • 21. Float is a CSS positioning property and can be used to create entire web layouts Clearing Floats Floats when used need to be cleared and that is done using the clear property E.g.: clear:both; Float not cleared Float cleared Page Layouts - Floats
  • 22. At-rules are clever, powerful little huggers that encapsulate a bunch of CSS rules and apply them to something specific. They can be used to import other CSS files, apply CSS to a particular media, or embed uncommon fonts. Importing @import rule is used to bolt another stylesheet onto your existing one. This must be placed at the top of a stylesheet, before any other rules. E.g.: @import url(morestyles.css); At- Rules
  • 23. Targeting media types @media can be used to apply styles to a specific media, such as print. E.g.: @media screen and (max-width: 1000px) { #content { width: 100% } } @media screen and (max-width: 800px) { #nav { float: none } } @media screen and (max-width: 600px) { #content aside { float: none; display: block; } } Note that if, for example, a layout area was 600 pixels wide or less, all three of these would be applied (because it would be less than or equal to 1000px, 800px, and 600px). At- Rules(Contd…)
  • 24. Embedding fonts @font-face is used for embedding fonts in a web page so that a typeface can be used even if it isn’t sitting on the user’s computer. E.g.: @font-face { font-family: “Futura”; src: url(Futura.woff); } OR @font-face { font-family: “Futura”; src: local(“Futura”), local(“Futura LT”), url(“Futura.woff”); font-weight: 400; font-style: normal; } At- Rules(Contd…)