CSS - Revision history

Nancyvarkey at 06:45, 2 December 2022

2022-12-02T06:45:34Z

Nancyvarkey at 06:42, 2 December 2022

2022-12-02T06:42:45Z

Pravin1389 at 08:58, 19 July 2021

2021-07-19T08:58:36Z

Pravin1389: /* Basic Level */

2021-07-19T08:28:40Z

‎Basic Level

Pravin1389: /* Introduction */

2021-07-19T08:20:11Z

‎Introduction

Minal: Created page with '=== Introduction === The Spoken Tutorials for '''CSS - Cascading Style Sheets''' are being contributed by '''DesiCrew Solutions, Chennai'''. DesiCrew Solutions Pvt. Ltd is a rur…'

2012-12-11T10:26:04Z

Created page with '=== Introduction === The Spoken Tutorials for '''CSS - Cascading Style Sheets''' are being contributed by '''DesiCrew Solutions, Chennai'''. DesiCrew Solutions Pvt. Ltd is a rur…'

New page

=== Introduction ===

The Spoken Tutorials for '''CSS - Cascading Style Sheets''' are being contributed by '''DesiCrew Solutions, Chennai'''. DesiCrew Solutions Pvt. Ltd is a rural BPO company, incubated by RTBI of IIT- Madras. For more information please visit '''http://desicrew.in/'''

__TOC__

=== Basic Level ===

# Introduction to CSS 2.0    
#* What is CSS
#* How does CSS work
#* What can we do with CSS
# CSS syntax and inline style    
#* Description of CSS syntax
#* Inline Style
#* Styling Headings
# Our First Style Sheet    
#* Why and how we should use external stylesheets
#* The importance of the DOCTYPE declaration
#* How to add comments to CSS
#* Adding background color and images and aligning text
# Working with Text properties
#* Units used in CSS
#* Letter-spacing
#* Line-height
#* Text-decoration
#* Text-indent
# Text transformation, alignment and fonts
#* Text-transform
#* Vertical-align
#* White-space
#* Word-spacing
#* The span element
#* Font-style
#* Font-variant
#* Font-weight
#* Font-size
#* Font-family
# Box model properties
#* What is the box model?
#* What are the properties of boxes in CSS?
#* How do we change box properties?
# Box model dimensions
#* How to outline elements
#* How to adjust margins
#* How to set the dimension size of elements
#* How to use div tags to contain elements within the body
# Applying styles to tables and lists
#* How to use border-collapse and border-spacing to control the appearance of table borders
#* How to set the empty-cells parameter to hide or display borders around empty cells
#* How to control cell width using table-layout
#* How to set the caption location using caption-side
# List styles
#* How to use CSS to control list markers
#* How to use CSS to set styles in multi-level lists
# Positioning and visibility
#* How to set the position property of an element
#* How to change the top, bottom, left, and right position values
#* How to set the clip value of an image
#* How to use the overflow property
# Positioning and layout
#* How to use the z-index to set layers on a page
#* How to float and clear to control page layout
#* How to use the display and visibility properties of an element to alter the way images and other elements appear
# Applying styles selectively
#* How to use inheritance
#* How to use ID as a selector
#* How to use nesting
#* How to use grouping
# Using classes and containers
#* How to use classes to refine how styles are applied
#* How to use span and div to apply styles to elements within classes
#* How to use classes, span, and div to create a highlighted menu
# Pseudo classes and pseudo elements
#* What pseudo classes and pseudo elements are
#* How to use anchor pseudo classes
#* How to combine pseudo classes with CSS classes
#* How to use first-line and first-letter pseudo elements
# Working with paged media
#* How to use CSS to format a web page for printing by setting page breaks
#* How to use page breaks to prevent widows and orphans
# Time saver tools
#* How to use web-based tools to help us generate CSS style sheets
#* How to use web-based tools to help us generate CSS style sheets
# Image gallery and image opacity
#* How to use CSS to create an image gallery
#* How to use CSS to create an image gallery

@@ Line 1: / Line 1: @@
 === Introduction ===
-Cascading Style Sheet (CSS) is a style sheet language used to style documents written in a markup language like HTML and XML. It allows developers to control how the webpage should be displayed by applying styles ( e.g color, font, space). Before CSS, all the styles and formatting were explicitly defined within HTML. Due to this, the creation of large websites became a long and expensive process. This is because, for every single page, style information has to be added repeatedly. For the solution of this problem, the World Wide Consortium (W3C) introduced CSS in 1996. CSS file is an independent file and is saved with [dot] CSS (.css) extension. Now developers can write the style information of the web pages to a separate style sheet. The separation of HTML and CSS i.e content and styling, makes it easier to maintain sites, improves content accessibility, share style sheets across pages and provides more flexibility. CSS3 is the latest version of the Cascading Style Sheets language and extends CSS2.1. It has several new features like shadows, gradients, rounded corners transitions or animations, and new layouts like a multi-columns, flexible box or grid layouts. The CSS specifications are maintained by the World Wide Consortium (W3C). The latest snapshot of CSS published by it is available at https://www.w3.org/TR/css-2018
+'''Cascading Style Sheet (CSS)''' is a style sheet language used to style documents written in a markup language like '''HTML''' and '''XML'''. It allows developers to control how the webpage should be displayed by applying styles ( e.g color, font, space). Before '''CSS''', all the styles and formatting were explicitly defined within HTML. Due to this, the creation of large websites became a long and expensive process. This is because, for every single page, style information has to be added repeatedly. For the solution of this problem, the World Wide Consortium (W3C) introduced CSS in 1996. CSS file is an independent file and is saved with [dot] CSS (.css) extension.
 The Spoken Tutorial effort for '''CSS''' has been contributed by '''Praveen Somu''', '''Neha Solanki''' and '''Madhuri Ganpathi''' with support from '''Nancy Varkey '''from '''Spoken Tutorial '''team.

← Older revision		Revision as of 06:42, 2 December 2022
Line 2:		Line 2:

	Cascading Style Sheet (CSS) is a style sheet language used to style documents written in a markup language like HTML and XML. It allows developers to control how the webpage should be displayed by applying styles ( e.g color, font, space). Before CSS, all the styles and formatting were explicitly defined within HTML. Due to this, the creation of large websites became a long and expensive process. This is because, for every single page, style information has to be added repeatedly. For the solution of this problem, the World Wide Consortium (W3C) introduced CSS in 1996. CSS file is an independent file and is saved with [dot] CSS (.css) extension. Now developers can write the style information of the web pages to a separate style sheet. The separation of HTML and CSS i.e content and styling, makes it easier to maintain sites, improves content accessibility, share style sheets across pages and provides more flexibility. CSS3 is the latest version of the Cascading Style Sheets language and extends CSS2.1. It has several new features like shadows, gradients, rounded corners transitions or animations, and new layouts like a multi-columns, flexible box or grid layouts. The CSS specifications are maintained by the World Wide Consortium (W3C). The latest snapshot of CSS published by it is available at https://www.w3.org/TR/css-2018		Cascading Style Sheet (CSS) is a style sheet language used to style documents written in a markup language like HTML and XML. It allows developers to control how the webpage should be displayed by applying styles ( e.g color, font, space). Before CSS, all the styles and formatting were explicitly defined within HTML. Due to this, the creation of large websites became a long and expensive process. This is because, for every single page, style information has to be added repeatedly. For the solution of this problem, the World Wide Consortium (W3C) introduced CSS in 1996. CSS file is an independent file and is saved with [dot] CSS (.css) extension. Now developers can write the style information of the web pages to a separate style sheet. The separation of HTML and CSS i.e content and styling, makes it easier to maintain sites, improves content accessibility, share style sheets across pages and provides more flexibility. CSS3 is the latest version of the Cascading Style Sheets language and extends CSS2.1. It has several new features like shadows, gradients, rounded corners transitions or animations, and new layouts like a multi-columns, flexible box or grid layouts. The CSS specifications are maintained by the World Wide Consortium (W3C). The latest snapshot of CSS published by it is available at https://www.w3.org/TR/css-2018
		+
		+	The Spoken Tutorial effort for '''CSS''' has been contributed by '''Praveen Somu''', '''Neha Solanki''' and '''Madhuri Ganpathi''' with support from '''Nancy Varkey '''from '''Spoken Tutorial '''team.
		+
		+	The domain review for '''CSS''' series was done by xxxxx.

← Older revision		Revision as of 08:58, 19 July 2021
Line 85:		Line 85:
	#* Remove the display property		#* Remove the display property
	#** Undo the changes in the files		#** Undo the changes in the files
		+
		+	=== Intermediate Level ===
		+
		+	#Float and Overflow in CSS
		+	#* About float property
		+	#* Use of float property values - left, right, none, initial & inherit
		+	#* Add an image
		+	#* Set float property for an image
		+	#* About the clear property
		+	#* Use of clear property values - left, right, both, none, initial & inherit
		+	#* Set clear property for a paragraph
		+	#* About overflow property
		+	#* Use of overflow property values - visible, scroll, auto, hidden, initial & inherit
		+	#* Set overflow property for a div block
		+	#Link in CSS
		+	#* About styling link
		+	#* Add links to the webpage
		+	#* About default property of link:
		+	#** Underline
		+	#** Color
		+	#* About link states - link, visited, hover & active
		+	#* Set color of the link
		+	#* Set background color of the link
		+	#* Set text-decoration of the link
		+	#** Remove the underline of the link
		+	#List in CSS
		+	#* About list properties
		+	#* Add an ordered list to the webpage
		+	#* Add an unordered list to the webpage
		+	#* Set the style of the marker for the ordered list
		+	#* Set the shape of the marker for the unordered list
		+	#* Set background color for the lists
		+	#* Set background color for the list-items
		+	#* Set an image as a marker for the unordered list
		+	#* Set position of the marker for the lists
		+	#* Set list properties using shorthand
		+	#Table in CSS
		+	#* About table properties
		+	#* Add a table to the webpage
		+	#* Set border for the table
		+	#* Set width of the table
		+	#* Set height of the table
		+	#* Set horizontal alignment for the text inside the table
		+	#* Set vertical alignment for the text inside the table
		+	#* Set padding for the text inside the table
		+	#* Set text color and background color for the table
		+	#* Set position of the caption of a table
		+	#Advanced Table Design in CSS
		+	#* About table design
		+	#* About different ways to design tables
		+	#* Set horizontal border divider for the table
		+	#* Set background to a particular color on hovering the mouse
		+	#* Set an image as a background for the table
		+	#* Set zebra stripe design for the table
		+	#* Decorate table column-wise
		+	#* Set background color for the column of a table
		+	#* Set layout property for the table
		+	#* Create responsive table
		+	#Forms in CSS
		+	#* About properties used for styling forms
		+	#* Design input text
		+	#** Set border and border-radius property
		+	#** Set width
		+	#** Set padding
		+	#** Set text color and background color
		+	#** Use of focus selector
		+	#** Set background image
		+	#** Set text-indentation property
		+	#** Set transition property
		+	#* Design label
		+	#* Design Select Menu
		+	#* Design Textarea
		+	#* Design input buttons
		+	#* Create a responsive form using media rule
		+
		+	=== Advance Level ===
		+
		+	#Counters in CSS
		+	#* About counters
		+	#* About counters properties:
		+	#** counter-reset property
		+	#** counter-increment property
		+	#** counter-reset property
		+	#** counter() or counters() function
		+	#* Set headings
		+	#* Set counter for the headings
		+	#* About nested counters
		+	#* Set nested counter for the headings
		+	#Multi-column Layout in CSS
		+	#* About multi-column layout
		+	#* About column properties
		+	#* Add some text to the webpage
		+	#* Set column-width property for the text
		+	#* Set column-count property for the text
		+	#* Set column-gap property for the text
		+	#* Set column-rule-style property for the text
		+	#* Set column-rule-color property for the text
		+	#* Set column-rule property for the text
		+	#* Set column-span property for the text
		+	#Web Layout in CSS
		+	#* About web layout
		+	#* About header
		+	#* Set heading as a header
		+	#* Set CSS properties for header
		+	#* About menu bar
		+	#* Set links as a menu bar
		+	#* Set CSS properties for the menu bar
		+	#* About content
		+	#* Set paragraphs as content
		+	#* Set CSS properties for content
		+	#* About footer
		+	#* Set some text as the footer
		+	#* Set CSS properties for footer

@@ Line 8: / Line 8: @@
 === Basic Level ===
-# Introduction to CSS 2.0 &nbsp; &nbsp;
+#Overview of CSS
-#* What is CSS
+#* CSS Overview
-#* How does CSS work
+#* About CSS
-#* What can we do with CSS
+#* The content available in various tutorials in this series
-# CSS syntax and inline style &nbsp; &nbsp;
+# First CSS File
-#* Description of CSS syntax
+#* Create a CSS file
-#* Inline Style
+#* Syntax of CSS to write a style
-#* Styling Headings
+#* Types of Selectors
-# Our First Style Sheet &nbsp; &nbsp;
+#* About Declaration
-#* Why and how we should use external stylesheets
+#* Save the CSS file in a folder
-#* The importance of the DOCTYPE declaration
+#* Link a CSS file with an HTML file
-#* How to add comments to CSS
+#* Descendant Selector with example
-#* Adding background color and images and aligning text
+#* Grouping Selector with example
-# Working with Text properties
+#* Universal Selector with example
-#* Units used in CSS
+#* Id Selector with example
-#* Letter-spacing
+#* Class Selector with example
-#* Line-height
+#Dimensions and Measuring Units in CSS
-#* Text-decoration
+#* What are measuring Units
-#* Text-indent
+#* What are relative Units
-# Text transformation, alignment and fonts
+#* What are absolute Units
-#* Text-transform
+#* Setting width using percentage
-#* Vertical-align
+#* Setting font size using percentage
-#* White-space
+#* Setting font size using points
-#* Word-spacing
+#* Setting height using centimetre
-#* The span element
+#* Setting properties for paragraph
-#* Font-style
+#* Setting properties for heading
-#* Font-variant
+#* What are heading tag sizes
-#* Font-weight
+#Box Model in CSS
-#* Font-size
+#* What is Box Model
-#* Font-family
+#* Setting border using properties: Style, Width, Color
-# Box model properties
+#* Setting different border styles for each side
-#* What is the box model?
+#* Setting margin
-#* What are the properties of boxes in CSS?
+#* Setting different margins for each side
-#* How do we change box properties?
+#* Setting Padding
-# Box model dimensions
+#* Setting properties for division tag
-#* How to outline elements
+#Background in CSS
-#* How to adjust margins
+#* What are background properties
-#* How to set the dimension size of elements
+#* How to style background
-#* How to use div tags to contain elements within the body
+#* Setting background-color using:
-# Applying styles to tables and lists
+#** Color names
-#* How to use border-collapse and border-spacing to control the appearance of table borders
+#** Hexadecimal values
-#* How to set the empty-cells parameter to hide or display borders around empty cells
+#** RGB values
-#* How to control cell width using table-layout
+#* Setting background image
-#* How to set the caption location using caption-side
+#* Setting background-repeat property
-# List styles
+#* Setting background-attachment property
-#* How to use CSS to control list markers
+#* Setting background-position property
-#* How to use CSS to set styles in multi-level lists
+#* Styling background using shorthand
-# Positioning and visibility
+#Text Properties in CSS
-#* How to set the position property of an element
+#* Format and style text elements
-#* How to change the top, bottom, left, and right position values
+#* Use of color names, hexadecimal values and RGB values to set the text color
-#* How to set the clip value of an image
+#* Align the text horizontally using left, right, center and justify options
-#* How to use the overflow property
+#* Indent the text using the length values - cm, px, and  %
-# Positioning and layout
+#* Change the letter spacing and word spacing of the text
-#* How to use the z-index to set layers on a page
+#* Set the line height of the text
-#* How to float and clear to control page layout
+#* Set the direction property using ltr and rtl values
-#* How to use the display and visibility properties of an element to alter the way images and other elements appear
+#* Transform the text using values
-# Applying styles selectively
+#* Decorate the text
-#* How to use inheritance
+#* Apply shadow effect on the text
-#* How to use ID as a selector
+#Font Properties in CSS
-#* How to use nesting
+#* Set the font-family property of the text
-#* How to use grouping
+#* Style text font using the font-style property
-# Using classes and containers
+#* Use of font-style values - normal, italic & oblique
-#* How to use classes to refine how styles are applied
+#* Specify the thickness of the font
-#* How to use span and div to apply styles to elements within classes
+#* Use of font-weight values  - keywords & numeric
-#* How to use classes, span, and div to create a highlighted menu
+#* Vary the font text using the font-variant values - small caps and normal
-# Pseudo classes and pseudo elements
+#* Set the font size using points
-#* What pseudo classes and pseudo elements are
+#* Use of font-size values - length , keywords & percentage
-#* How to use anchor pseudo classes
+#* Set the font properties using the shorthand method
-#* How to combine pseudo classes with CSS classes
+#Display Property in CSS
-#* How to use first-line and first-letter pseudo elements
+#* Set the display property to present an element on the webpage
-# Working with paged media
+#* Use of display property values
-#* How to use CSS to format a web page for printing by setting page breaks
+#** Set the display property using -  Block, Inline,  None values
-#* How to use page breaks to prevent widows and orphans
+#* Create elements using an id selector.
-# Time saver tools
+#* Set height, width and background for the elements
-#* How to use web-based tools to help us generate CSS style sheets
+#** Style the paragraphs
-#* How to use web-based tools to help us generate CSS style sheets
+#* Remove the display property
-# Image gallery and image opacity
+#** Undo the changes in the files
-#* How to use CSS to create an image gallery
-#* How to use CSS to create an image gallery

← Older revision		Revision as of 08:20, 19 July 2021
Line 1:		Line 1:
	=== Introduction ===		=== Introduction ===

−	~~The Spoken Tutorials for '''CSS -~~ Cascading Style ~~Sheets''' are being contributed~~ by ~~'''DesiCrew Solutions~~, ~~Chennai'''~~. ~~DesiCrew Solutions Pvt~~. ~~Ltd~~ is a ~~rural BPO company~~, ~~incubated by RTBI~~ of ~~IIT~~- ~~Madras~~. ~~For more information please visit '''http~~://~~desicrew~~.in/~~'''~~	+	Cascading Style Sheet (CSS) is a style sheet language used to style documents written in a markup language like HTML and XML. It allows developers to control how the webpage should be displayed by applying styles ( e.g color, font, space). Before CSS, all the styles and formatting were explicitly defined within HTML. Due to this, the creation of large websites became a long and expensive process. This is because, for every single page, style information has to be added repeatedly. For the solution of this problem, the World Wide Consortium (W3C) introduced CSS in 1996. CSS file is an independent file and is saved with [dot] CSS (.css) extension. Now developers can write the style information of the web pages to a separate style sheet. The separation of HTML and CSS i.e content and styling, makes it easier to maintain sites, improves content accessibility, share style sheets across pages and provides more flexibility. CSS3 is the latest version of the Cascading Style Sheets language and extends CSS2.1. It has several new features like shadows, gradients, rounded corners transitions or animations, and new layouts like a multi-columns, flexible box or grid layouts. The CSS specifications are maintained by the World Wide Consortium (W3C). The latest snapshot of CSS published by it is available at https://www.w3.org/TR/css-2018