הלינקייה: מגזין חודשי למפתחים

רוצה לשמוע על כל האירועים, המדריכים, הקורסים והמאמרים שנכתבו החודש ?
הלינקייה הינו מגזין חופשי בעברית שמשאיר אותך בעניינים.
בלי ספאם. בלי שטויות. פעם בחודש אצלך בתיבה.

CSS Selectors

03 css from Ynon Perek

A Css style sheet is a collection of styling rules, each built from two main components:

  • A css selector - what elements should this rule apply to.
  • A css instruction block - what to do with these elements

Let's exmaine some basic examples

/* A CSS comment is marked like the multiline c comment
 * Everything between the opening and closing comment tag is 
 * ignored by the CSS parser
 */
 
/**
 * Here we have a simple selector taking all the h1 and h2 elements 
 * in the document, and applying font and color preferences on them
 * Using this CSS will cause each h1 and each h2 element to have a 
 * red color and Arial font family
 */
 
h1, h2 {
  font-family: arial;
  color: red;
}
 
/**
 * HTML elements can also have a class attribute. That attribute is linked
 * to the CSS and we have a special class selector in css that selects
 * only the elements matching that class.
 * The following example takes every p element with class="header" in
 * the document and applies the bold font on it.  */
 
p.header {
  font-weight: bold;
}
 
/**
 * In HTML, id attribute can be used to identify a specific element in the
 * DOM. An id uniquely identifies an element, so we can use that
 * to create markup for specific elements.
 *
 * The following example will take the link anchor whose id is "out"
 * and color it blue. 
 */
 
a#out {
  color: blue;
}
/** 
 * We don't even need to add or change HTML document every time we want
 * to apply a style. The next group of CSS selectors allows selecting
 * arbitrary HTML elements by their position and relations to other
 * elements in the document
 */
 
/** 
 * We start with a descendant selector. This one will select ALL the p 
 * elements inside the div sidebar, and apply a white color on them.
 * Note the HTML color notation using #RGB syntax
 */
 
div.sidebar p {
  color: #FFFFFF
}