CSS
From Script | Spoken-Tutorial
Revision as of 14:28, 19 July 2021 by Pravin1389 (Talk | contribs)
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
- Overview of CSS
- CSS Overview
- About CSS
- The content available in various tutorials in this series
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
