Difference between revisions of "CSS"

From Grundy
Jump to navigation Jump to search
(Added Selectors)
(Added box-model)
Line 9: Line 9:
 
== Selectors ==
 
== Selectors ==
  
All the content on a webpage does not have the same style, and this why 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
+
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 -
 
  <nowiki>
 
  <nowiki>
 
/* All p elements are red */
 
/* All p elements are red */
Line 28: Line 28:
 
   font-weight: bold;
 
   font-weight: bold;
 
}</nowiki>
 
}</nowiki>
 +
 +
== 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 <code>box-sizing</code> property which allows us to include the padding and border in an element's total width and height.
 +
The tutorials by [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model MDN] and [https://www.tutorialspoint.com/css/css3_box_sizing.htm tutorialspoint] are very helpful to understand the box-model in depth.

Revision as of 07:23, 23 October 2017

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.


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.