Introduction to CSS

What is CSS?

1) CSS stands for Cascading Style Sheets
2) CSS describes how HTML elements are to be displayed on screen, paper, or in other media
3) CSS saves a lot of work. It can control the layout of multiple web pages all at once
4) External stylesheets are stored in CSS files

Why use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Solved a Big Problem :

HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
< h1>This is a heading< /h1>
< p>This is a paragraph.< /p>
When tags like < font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!

Advantages of CSS :

  • CSS plays an important role, by using CSS you simply got to specify a repeated style for element once & use it multiple times as because CSS will automatically apply the required styles.
  • CSS plays an important role, by using CSS you simply got to specify a repeated style for element once & use it multiple times as because CSS will automatically apply the required styles.
  • Web designers needs to use few lines of programming for every page improving site speed.
  • Cascading sheet not only simplifies website development, but also simplifies the maintenance as a change of one line of code affects the whole web site and maintenance time.
  • It is less complex therefore the effort are significantly reduced.
  • It helps to form spontaneous and consistent changes.
  • CSS changes are device friendly. With people employing a batch of various range of smart devices to access websites over the web, there’s a requirement for responsive web design.
  • It has the power for re-positioning. It helps us to determine the changes within the position of web elements who are there on the page.
  • These bandwidth savings are substantial figures of insignificant tags that are indistinct from a mess of pages.
  • Easy for the user to customize the online page
  • It reduces the file transfer size.

    • Disadvantages of CSS :

  • CSS, CSS 1 up to CSS3, result in creating of confusion among web browsers.
  • With CSS, what works with one browser might not always work with another. The web developers need to test for compatibility, running the program across multiple browsers.
  • There exists a scarcity of security.
  • After making the changes we need to confirm the compatibility if they appear. The similar change affects on all the browsers.
  • The programing language world is complicated for non-developers and beginners. Different levels of CSS i.e. CSS, CSS 2, CSS 3 are often quite confusing.
  • Browser compatibility (some styles sheet are supported and some are not).
  • CSS works differently on different browsers. IE and Opera supports CSS as different logic.
  • There might be cross-browser issues while using CSS.
  • There are multiple levels which creates confusion for non-developers and beginners.

    • What To Avoid in CSS :

  • Don’t use too specific selectors. Avoid prefixing classes with tag names.
  • The use of !important should be as moderate as possible. A good use case is to override third-party styling.
  • Don’t use CSS import. Always favor the < link> tag.
  • Choose a naming convention and stick to it.
  • Don’t use inline styling. Always put your style code in separate stylesheets.
  • Use z-index wisely. Don’t brute-force z-index values.
  • Don’t use IDs in CSS unless you’re trying to style third-party code, whose markup you don’t control.
  • Avoid too generic class names, since they’re conflict-prone.