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
Contents
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
