Difference between revisions of "CSS"

From Script | Spoken-Tutorial
Jump to: navigation, search
(→‎Introduction)
(→‎Basic Level)
Line 8: Line 8:
 
=== 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
+

Revision as of 13:58, 19 July 2021

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


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

Contributors and Content Editors

Minal, Nancyvarkey, Pravin1389

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