SlideShare a Scribd company logo
1 of 105
CSS
What is the syntax of a css rule?
How can you apply CSS rule to multiple elements
using the same CSS rule?
Describe the syntax for linking a CSS file to an
HTML file?
Alternatively, describe the syntax for writing CSS
code in HTML file.
Describe the CSS file linking elements and
attributes
<link> </link>
href = ” ”
rel = ” ”
type = ” ”
List the 8 basic selectors commonly found in
XHTML and HTML 4.
What is a universal selector? Describe the
meaning and give syntax.
What is a type selector? Describe the
meaning and give syntax.
What is a class selector? Describe the
meaning and give syntax.
What is a id selector? Describe the meaning
and give syntax.
What is a child selector? Describe the
meaning and give syntax.
What is a descendant selector? Describe the
meaning and give syntax.
What is a adjacent sibling selector? Describe
the meaning and give syntax.
What is a general sibling selector? Describe
the meaning and give syntax.
What is the rule of precedence in CSS?
What is the rule of specificity in CSS?
SimplePoint: Create generic CSS rules that
are used by most elements and specific rules
which only the unique ones do.
How can you inherit the CSS value which is
not inherited by default?
Ex:- how can a <div> element inherit the
padding of a <body> element?
Check for CSS bugs using the following links
BrowserCam.com
BrowserLab.Adobe.com
BrowserShots.org
CrossBrowserTesting.com
Describe the ways in which you can specify
the color of text inside a CSS document?
Note: not CSS3
What is RGB? Describ the syntax.
What are HEX values? Describe the syntax.
How would you specify a text color using
CSS?
How would you set a background color for
an element using CSS?
Describe in CSS3: opacity and rgba
CSS3: What are HSL and HSLA color values?
What is Hue, Saturation, Lumosity, Alpha?
Describe the syntax for hsl and hsla.
If there were visitors to your website who are
using old browsers which do not support
CSS3, how would you optimize your website
accordingly for the background-color
property of an element?
How do you specify a typeface for a font?
What is the CSS selector for changing the size
of the font?
What are the units of type size?
How would you use a font in your web page
that is not installed in your client's computer
using the font-family property?
How would you bold or normalize the
boldness of a font using CSS?
How would you italicize a text using CSS?
How would you make normalize an already
italic text using CSS?
How would you make an UPPERCASE text
lowercase?
How would you make an lowercase text
UPPERCASE?
How would you make text Capitalized?
How would you add an underline to a text
using CSS?
How would you add an overline to a text
using CSS?
How would you add an strike through to a
text using CSS?
How would you add a blinking feature to a
text using CSS?
How would you normalize an already
underlined / overlined / strike through /
blinking text to normal?
What is Leading in reference to text? How do
you calculate Leading?
How can you change the Leading (height
between two lines) using CSS?
What is Kerning in reference to text?
How do you change Kerning (space
between letters) using CSS? Provide the
syntax.
Would you give the value in ems or px?
How do you change the space between
words using CSS? Provide the syntax.
Would you give the value in ems or px?
How would you align the text to left, right,
center or justify using CSS?
What is the vertical-align property in CSS?
What are the parameters it takes?
How would you indent a line of text? What all
values can you parameters can you give to
the property?
What are pseudo elements and pseudo
classes?
How would you select the first letter or the first
line of a text using CSS?
How would you set styles for links that have
not been visited?
How would you set styles for links that have
been visited?
How would you set styles for links that have
been hovered upon?
What is :focus pseudo class?
How would you set styles for links that have
been activated? Meaning thereby, when a
particular link is being clicked and is in the
stage of being clicked.
In what order should the pseudo classes be
used?
How would you change the width and height
of a box using CSS?
How would you change the minimum width
or minimum height of a box?
If the content of the box is bigger than the
size of the box, how would you code the CSS
such that the extra markup is
1. Hidden
2. Scrolled
Hint: Overflow
What is padding, border and margin?
How would you change the width of the
border explicitly? What parameters does it
have?
How can you change style of the border?
What values can it take?
How can you change the color of the
border? What values can it take?
Describe the shorthand syntax for the border
property for CSS selectors.
How would you add border shadow to a box
in CSS?
What is the short hand for border shadow in
CSS?
How would you add border radius to an
element using CSS?
How would you change the padding for the
top / bottom / right / left for different
elements?
What is the shorthand syntax to do all this in
one go?
How would you change the margin for the
top / bottom / right / left for different
elements?
What is the shorthand syntax to do all this in
one go?
How would you center a box on a page or
the elements inside it?
How would you turn an inline element
behave as a block level element or vice
versa?
How would you hide an element from the
page using the display property?
How do you make a block level element flow
like an inline one while retaining its own
features?
How would you create a navigation for a
website?
Practical: Create one
How would you hide or show the visibility of a
box?
Alternate: Explain what the visibility property
can do and what parameters are given to it?
CSS3: How would you display round borders?
CSS3: How would you create elleptical
borders?
LAYOUTS
List the four types of positioning schemes
available in CSS.
What is static positioning?
If there are 3 <div> elements and the CSS rule states
div{
position: static;
height: 100px;
width: 100px;
border: 1px solid black;}
How would the elements be placed
What is relative positioning?
Describe the syntax.
What is absolute positioning?
Describe the syntax.
What is z-index? Describe the syntax of
z-index property.
There are two overlapping <div> elements,
first one with a z-index property set to 1 and
the other's set to 50.
Which one would appear over the other?
Describe the use and syntax of the float
property.
How would you use the float property to
stack the elements side by side?
If there are two <div> elements inside a <div>
wrapper and the elements are given
float: right; float: left;
properties, where would the elements be
placed?
What is clear property? What four values can
it take?
If the float property of a div element is set to
left, what does it mean?
Repeat for right, both and none.
How would you create a multi column layout
using floats?
CSS Frameworks
blueprintcss.org
lessframework.com
developer.yahoo.com/yui/
grids/
How would you align the image to the left or
the right of the parent element?
How would you align an image in the center
of the parent <div> element? List and explain
the two ways in which this can be done.
How would you set a background image to
an element?
Using which property can you control how
many times the displayed image is repeated?
How can you control the repetition of images
horizontally?
How can you control the repetition of images
vertically?
How can you control the repetition of images
in both sides?
How can you disable the repetition of
images?
What is background-attachment property for
background images?
What is meant by
1. background-attachment: fixed;
2. background-attachment: scroll;

More Related Content

What's hot (20)

Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
Css from scratch
Css from scratchCss from scratch
Css from scratch
 
CSS Part I
CSS Part ICSS Part I
CSS Part I
 
Css
CssCss
Css
 
CSS: How To Learn Easily
CSS: How To Learn EasilyCSS: How To Learn Easily
CSS: How To Learn Easily
 
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)
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
 
Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
 
Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)Web Development 4 (HTML & CSS)
Web Development 4 (HTML & CSS)
 
Web Development 4
Web Development 4Web Development 4
Web Development 4
 
CSS Basics (Cascading Style Sheet)
CSS Basics (Cascading Style Sheet)CSS Basics (Cascading Style Sheet)
CSS Basics (Cascading Style Sheet)
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
Rapid HTML Prototyping with Bootstrap 4
Rapid HTML Prototyping with Bootstrap 4Rapid HTML Prototyping with Bootstrap 4
Rapid HTML Prototyping with Bootstrap 4
 
Web Development 3 (HTML & CSS)
Web Development 3  (HTML & CSS)Web Development 3  (HTML & CSS)
Web Development 3 (HTML & CSS)
 

Similar to Css jon duckett - flashcards (20)

Css Introduction
Css IntroductionCss Introduction
Css Introduction
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Introduction 2 css
Introduction 2 cssIntroduction 2 css
Introduction 2 css
 
Introduction of css
Introduction of cssIntroduction of css
Introduction of css
 
Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3
 
Css
CssCss
Css
 
Basic css
Basic cssBasic css
Basic css
 
Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)
 
Css
CssCss
Css
 
Lecture2 CSS 3
Lecture2   CSS 3Lecture2   CSS 3
Lecture2 CSS 3
 
Css basics
Css basicsCss basics
Css basics
 
Presentation 1 [autosaved]
Presentation 1 [autosaved]Presentation 1 [autosaved]
Presentation 1 [autosaved]
 
Html-Prabakaran
Html-PrabakaranHtml-Prabakaran
Html-Prabakaran
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
 
html-css
html-csshtml-css
html-css
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
CSS
CSSCSS
CSS
 

Css jon duckett - flashcards

  • 1. CSS
  • 2. What is the syntax of a css rule?
  • 3. How can you apply CSS rule to multiple elements using the same CSS rule?
  • 4. Describe the syntax for linking a CSS file to an HTML file? Alternatively, describe the syntax for writing CSS code in HTML file.
  • 5. Describe the CSS file linking elements and attributes <link> </link> href = ” ” rel = ” ” type = ” ”
  • 6. List the 8 basic selectors commonly found in XHTML and HTML 4.
  • 7. What is a universal selector? Describe the meaning and give syntax.
  • 8. What is a type selector? Describe the meaning and give syntax.
  • 9. What is a class selector? Describe the meaning and give syntax.
  • 10. What is a id selector? Describe the meaning and give syntax.
  • 11. What is a child selector? Describe the meaning and give syntax.
  • 12. What is a descendant selector? Describe the meaning and give syntax.
  • 13. What is a adjacent sibling selector? Describe the meaning and give syntax.
  • 14. What is a general sibling selector? Describe the meaning and give syntax.
  • 15. What is the rule of precedence in CSS?
  • 16. What is the rule of specificity in CSS?
  • 17. SimplePoint: Create generic CSS rules that are used by most elements and specific rules which only the unique ones do.
  • 18. How can you inherit the CSS value which is not inherited by default? Ex:- how can a <div> element inherit the padding of a <body> element?
  • 19. Check for CSS bugs using the following links BrowserCam.com BrowserLab.Adobe.com BrowserShots.org CrossBrowserTesting.com
  • 20. Describe the ways in which you can specify the color of text inside a CSS document? Note: not CSS3
  • 21. What is RGB? Describ the syntax.
  • 22. What are HEX values? Describe the syntax.
  • 23. How would you specify a text color using CSS?
  • 24. How would you set a background color for an element using CSS?
  • 25. Describe in CSS3: opacity and rgba
  • 26. CSS3: What are HSL and HSLA color values?
  • 27. What is Hue, Saturation, Lumosity, Alpha? Describe the syntax for hsl and hsla.
  • 28. If there were visitors to your website who are using old browsers which do not support CSS3, how would you optimize your website accordingly for the background-color property of an element?
  • 29. How do you specify a typeface for a font?
  • 30. What is the CSS selector for changing the size of the font?
  • 31. What are the units of type size?
  • 32. How would you use a font in your web page that is not installed in your client's computer using the font-family property?
  • 33. How would you bold or normalize the boldness of a font using CSS?
  • 34. How would you italicize a text using CSS?
  • 35. How would you make normalize an already italic text using CSS?
  • 36. How would you make an UPPERCASE text lowercase?
  • 37. How would you make an lowercase text UPPERCASE?
  • 38. How would you make text Capitalized?
  • 39. How would you add an underline to a text using CSS?
  • 40. How would you add an overline to a text using CSS?
  • 41. How would you add an strike through to a text using CSS?
  • 42. How would you add a blinking feature to a text using CSS?
  • 43. How would you normalize an already underlined / overlined / strike through / blinking text to normal?
  • 44. What is Leading in reference to text? How do you calculate Leading?
  • 45. How can you change the Leading (height between two lines) using CSS?
  • 46. What is Kerning in reference to text?
  • 47. How do you change Kerning (space between letters) using CSS? Provide the syntax. Would you give the value in ems or px?
  • 48. How do you change the space between words using CSS? Provide the syntax. Would you give the value in ems or px?
  • 49. How would you align the text to left, right, center or justify using CSS?
  • 50. What is the vertical-align property in CSS? What are the parameters it takes?
  • 51. How would you indent a line of text? What all values can you parameters can you give to the property?
  • 52. What are pseudo elements and pseudo classes?
  • 53. How would you select the first letter or the first line of a text using CSS?
  • 54. How would you set styles for links that have not been visited?
  • 55. How would you set styles for links that have been visited?
  • 56. How would you set styles for links that have been hovered upon?
  • 57. What is :focus pseudo class?
  • 58. How would you set styles for links that have been activated? Meaning thereby, when a particular link is being clicked and is in the stage of being clicked.
  • 59. In what order should the pseudo classes be used?
  • 60. How would you change the width and height of a box using CSS?
  • 61. How would you change the minimum width or minimum height of a box?
  • 62. If the content of the box is bigger than the size of the box, how would you code the CSS such that the extra markup is 1. Hidden 2. Scrolled Hint: Overflow
  • 63. What is padding, border and margin?
  • 64. How would you change the width of the border explicitly? What parameters does it have?
  • 65. How can you change style of the border? What values can it take?
  • 66. How can you change the color of the border? What values can it take?
  • 67. Describe the shorthand syntax for the border property for CSS selectors.
  • 68. How would you add border shadow to a box in CSS?
  • 69. What is the short hand for border shadow in CSS?
  • 70. How would you add border radius to an element using CSS?
  • 71. How would you change the padding for the top / bottom / right / left for different elements? What is the shorthand syntax to do all this in one go?
  • 72. How would you change the margin for the top / bottom / right / left for different elements? What is the shorthand syntax to do all this in one go?
  • 73. How would you center a box on a page or the elements inside it?
  • 74. How would you turn an inline element behave as a block level element or vice versa?
  • 75. How would you hide an element from the page using the display property?
  • 76. How do you make a block level element flow like an inline one while retaining its own features?
  • 77. How would you create a navigation for a website? Practical: Create one
  • 78. How would you hide or show the visibility of a box? Alternate: Explain what the visibility property can do and what parameters are given to it?
  • 79. CSS3: How would you display round borders?
  • 80. CSS3: How would you create elleptical borders?
  • 82. List the four types of positioning schemes available in CSS.
  • 83. What is static positioning?
  • 84. If there are 3 <div> elements and the CSS rule states div{ position: static; height: 100px; width: 100px; border: 1px solid black;} How would the elements be placed
  • 85. What is relative positioning? Describe the syntax.
  • 86. What is absolute positioning? Describe the syntax.
  • 87. What is z-index? Describe the syntax of z-index property.
  • 88. There are two overlapping <div> elements, first one with a z-index property set to 1 and the other's set to 50. Which one would appear over the other?
  • 89. Describe the use and syntax of the float property.
  • 90. How would you use the float property to stack the elements side by side?
  • 91. If there are two <div> elements inside a <div> wrapper and the elements are given float: right; float: left; properties, where would the elements be placed?
  • 92. What is clear property? What four values can it take?
  • 93. If the float property of a div element is set to left, what does it mean?
  • 94. Repeat for right, both and none.
  • 95. How would you create a multi column layout using floats?
  • 97. How would you align the image to the left or the right of the parent element?
  • 98. How would you align an image in the center of the parent <div> element? List and explain the two ways in which this can be done.
  • 99. How would you set a background image to an element?
  • 100. Using which property can you control how many times the displayed image is repeated?
  • 101. How can you control the repetition of images horizontally?
  • 102. How can you control the repetition of images vertically?
  • 103. How can you control the repetition of images in both sides?
  • 104. How can you disable the repetition of images?
  • 105. What is background-attachment property for background images? What is meant by 1. background-attachment: fixed; 2. background-attachment: scroll;

Editor's Notes

  1. using letter-spacing property
  2. By setting the margin-left and margin-right to auto