Introduction to CSS

Hello World !

1.INTRODUCTION

Definition

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

Previously, the development of various parts of CSS specification was done synchronously, which allowed the versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or a CSS4; rather, everything is now CSS without a version number.

Generating CSS

• A seperated stylesheet which will be linked with HTML
  <link rel = "stylesheet" href ="././stle.css">
• Defining styles to elements inside the <style/> tag in a HTML document
• Defining styles to elements through inline blocks when we declare the HTML element
  <p style= "color:red;">
  

NOTE: Priority to style is given based on declaration.

2.SELECTORS

CSS selectors define the pattern to select elements to which a set of CSS rules are then applied.

I.BASIC SELECTORS

• i.Universal selector

  Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.

Syntax: * ns|* *|*

• ii.Type selector

  Selects all elements that have the given node name.

Syntax: elementname

• iii.Class selector

  Selects all elements that have the given class attribute.

Syntax: .classname

• iv. ID selector

  Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.

Syntax: #idname

• v.Attribute selector

  Selects all elements that have the given attribute.

Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

Example: [title] will match all elements that have the title attribute set (to any value).

II.GROUPING SELECTORS

• i.Selectors list

  The , selector is a grouping method that selects all the matching nodes.

Syntax: A, B

Example: div, span will match both <span> and <div> elements.

III.COMBINATORS

• i.Descendant combinator

  The " " (space) combinator selects nodes that are descendants of the first element.

  Example: div span will match all <span> elements that are inside a <div> element.
  

Syntax: A B

• ii.Child combinator

  The > combinator selects nodes that are direct children of the first element.

  Example: ul > li will match all <li> elements that are nested directly inside a <ul> element.
  

Syntax: A > B

• iii.General sibling combinator

  The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.

Syntax: A ~ B

Example: p ~ span will match all <span> elements that follow a <p>, immediately or not.

• iv.Adjacent sibling combinator

  The + combinator matches the second element only if it immediately follows the first element.

Syntax: A + B

Example: h2 + p will match the first <p> element that immediately follows an <h2> element.

• v.Column combinator

  The || combinator selects nodes which belong to a column.

Syntax: A || B

Example: col || td will match all <td> elements that belong to the scope of the <col>.

IV.Pseudo-classes and pseudo-elements

• i.Pseudo classes

  The : pseudo allow the selection of elements based on state information that is not contained in the document tree.

  Example: a:visited will match all <a> elements that have been visited by the user.
  

  https://codepen.io/Kevin-Sylvester/pen/YzvEEqK

• ii.Pseudo elements

  The :: pseudo represent entities that are not included in HTML.

  Example: a:visited will match all <a> elements that have been visited by the user.
  

4.CONCLUSION

We now understand what is CSS ? why it is used ? and how to assign the property to elements by selecting it.

So thats all for today, hope you liked it. Will be covering more concepts in the forthcoming blogs.
Stay Tuned !