CSS

From Grundy
Jump to navigation Jump to search

Cascading Style Sheet(CSS) is a style sheet language used for describing how the content, written in some markup language should be displayed on screen. It controls the style and layout of web pages. So one can use CSS to alter the text styles, table sizes, and other aspects of webpages that previously could only be defined in a page's HTML.

CSS helps Web developers create a uniform look and feel across several pages of a website. You donot have to define the style of each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS file and can be used by any page that references that CSS file.

All websites on the internet today use CSS to style their webpages, hence it is the first technology one should start learning after HTML. It is highly recommended to have a basic knowledge about HTML before trying to learn CSS. You cannot really learn much about or use CSS without knowing the fundamentals of HTML. Review basics of HTML here

For Beginners

Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. These links provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

Selectors

You want different types of content on your webpage to be displayed differently, and this where selectors are required. A CSS selector is that part of the CSS rule set which decides the set of elements to style. Here's an example -

/* All p elements are red */
p {
  color: red;
}

The class or id of an HTML element are also used as selectors. Note that CSS uses the prefix # for IDs and . for Classes.

/* All  the elements with the class "important" are red */
.important {
  color: red;
}

/* The element with the id "header" is bolded */
#header {
  font-weight: bold;
}

Box Model

CSS uses what is called the 'box-model' where each HTML element is essentially represented as a rectangular box. This box consists of margin, border, padding, and the actual content in this order. The major CSS properties involved here are :

  • Width and Height - Setting the width and height of the content box
  • Padding - Transparent space between the content and border. Ideally the text in a content box should be separated from its border, which is why padding is required.
  • Border - It is set to 0 by default, making it invisible.
  • Margin - Surrounds a CSS box. Used for spacing different CSS boxes.

One of the useful features of CSS3 is the additional box-sizing property which allows us to include the padding and border in an element's total width and height. The tutorials by MDN and tutorialspoint are very helpful to understand the box-model in depth.

Example and Tutorials

  • For detailed examples and tutorials, head here

Useful Links

  • Learn basic css layouting from here
  • W3Schools
  • Once you are comfortable with css, you should start learning sass ( which is css with variables and functions, how cool is that!)