Difference between revisions of "CSS"

From Script | Spoken-Tutorial
Jump to: navigation, search
(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…')
 
 
(4 intermediate revisions by 2 users not shown)
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
 +
 
 +
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.
  
  
Line 8: Line 14:
 
=== Basic Level ===
 
=== Basic Level ===
  
−
# Introduction to CSS 2.0    
+
#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    
+
# 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    
+
#* 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
+
=== 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

Latest revision as of 12:15, 2 December 2022

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

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.


Basic Level

  1. Overview of CSS
    • CSS Overview
    • About CSS
    • The content available in various tutorials in this series
  2. First CSS File
    • Create a CSS file
    • Syntax of CSS to write a style
    • Types of Selectors
    • About Declaration
    • Save the CSS file in a folder
    • Link a CSS file with an HTML file
    • Descendant Selector with example
    • Grouping Selector with example
    • Universal Selector with example
    • Id Selector with example
    • Class Selector with example
  3. Dimensions and Measuring Units in CSS
    • What are measuring Units
    • What are relative Units
    • What are absolute Units
    • Setting width using percentage
    • Setting font size using percentage
    • Setting font size using points
    • Setting height using centimetre
    • Setting properties for paragraph
    • Setting properties for heading
    • What are heading tag sizes
  4. Box Model in CSS
    • What is Box Model
    • Setting border using properties: Style, Width, Color
    • Setting different border styles for each side
    • Setting margin
    • Setting different margins for each side
    • Setting Padding
    • Setting properties for division tag
  5. Background in CSS
    • What are background properties
    • How to style background
    • Setting background-color using:
      • Color names
      • Hexadecimal values
      • RGB values
    • Setting background image
    • Setting background-repeat property
    • Setting background-attachment property
    • Setting background-position property
    • Styling background using shorthand
  6. Text Properties in CSS
    • Format and style text elements
    • Use of color names, hexadecimal values and RGB values to set the text color
    • Align the text horizontally using left, right, center and justify options
    • Indent the text using the length values - cm, px, and  %
    • Change the letter spacing and word spacing of the text
    • Set the line height of the text
    • Set the direction property using ltr and rtl values
    • Transform the text using values
    • Decorate the text
    • Apply shadow effect on the text
  7. Font Properties in CSS
    • Set the font-family property of the text
    • Style text font using the font-style property
    • Use of font-style values - normal, italic & oblique
    • Specify the thickness of the font
    • Use of font-weight values - keywords & numeric
    • Vary the font text using the font-variant values - small caps and normal
    • Set the font size using points
    • Use of font-size values - length , keywords & percentage
    • Set the font properties using the shorthand method
  8. Display Property in CSS
    • Set the display property to present an element on the webpage
    • Use of display property values
      • Set the display property using - Block, Inline, None values
    • Create elements using an id selector.
    • Set height, width and background for the elements
      • Style the paragraphs
    • Remove the display property
      • Undo the changes in the files

Intermediate Level

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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

  1. 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
  2. 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
  3. 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

Contributors and Content Editors

Minal, Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS&oldid=56084"