Difference between revisions of "CSS"

From Grundy
Jump to navigation Jump to search
(Added box-model)
(added other useful links)
Line 38: Line 38:
 
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.  
 
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.
 
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.
 +
 +
==Useful Links==
 +
* Learn basic css layouting from [http://learnlayout.com/ here]
 +
*[https://developer.mozilla.org/en-US/docs/Learn/CSS CSS - Styling the Web]
 +
*[https://www.w3schools.com/html/html_css.asp W3Schools]
 +
*Once you are comfortable with css, you should start learning [http://sass-lang.com/guide sass] ( which is css with variables and functions, how cool is that!)

Revision as of 07:57, 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.

Useful Links

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