CSS

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