Introduction

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.

  • CSS is among the core languages of the open web and is standardized across Web browsers according to W3C specifications. Previously, development of various parts of CSS specification was done synchronously, which allowed versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, CSS3. However, CSS4 has never become an official version.
  • From CSS3, the scope of the specification increased significantly and the progress on different CSS modules started to differ so much, that it became more effective to develop and release recommendations separately per module. Instead of versioning the CSS specification, W3C now periodically takes a snapshot of the latest stable state of the CSS specification
Advantages

This guide assumes you have the following basic background:

  • CSS saves time - You can write CSS once and then reuse the same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want.
  • Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So, less code means faster download times.
  • Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cellphones or for printing.
CSS syntax

The basic goal of the Cascading Stylesheet (CSS) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations. The CSS syntax reflects this goal and its basic building blocks are:

The property which is an identifier, that is a human-readable name, that defines which feature is considered.

The value which describe how the feature must be handled by the engine. Each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine. element { style properties } span { background-color: skyblue; }

Type selector
The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document. > /* All elements. */ a { color: red; }
Class selector

The CSS class selector matches elements based on the contents of their class attribute.

Syntax .class_name { style properties }

Example .red { color: #f33; } .yellow-bg { background: #ffa; }

ID selector
The CSS ID selector matches an element based on the value of the element’s id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector.

Syntax #id_value { style properties }

/* The element with id="demo" */ #demo { border: red 2px solid; }

Example #identified { background-color: skyblue; }

Child selector

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

Syntax

selector1 > selector2 { style properties }

Example

span { background-color: white; } div > span { background-color: DodgerBlue; }
Attribute selector
Multiple style rule

You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block as defined in the following example:

h1 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }

Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single line or multiple lines. For better readability, we keep them on separate lines.

Grouping selector

The CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space.

Syntax The syntax for CSS grouping selector is as follows − element, element { /*declarations*/ }

Border collapse property

The border-collapse CSS property sets whether cells inside a

have shared or separate borders.

  • When cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge.
  • When cells are separated, the distance between cells is defined by the border-spacing property.

Syntax collapse | separate /* Keyword values */ border-collapse: collapse; border-collapse: separate; /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: unset;

Values

  • collapse - Adjacent cells have shared borders (the collapsed-border table rendering model).
  • separate - Adjacent cells have distinct borders (the separated-border table rendering model).

Caption side property

The caption-side CSS property puts the content of a table's caption on the specified side. The values are relative to the writing-mode of the table

Syntax /* Directional values */ caption-side: top; caption-side: bottom; /* Logical values */ caption-side: block-start; caption-side: block-end; caption-side: inline-start; caption-side: inline-end;

The caption-side property is specified as one of the keyword values listed below.

Values
  • Top - The caption box should be positioned above the table.
  • Bottom - The caption box should be positioned below the table
  • Block-start - The caption box should be positioned at the block start edge of the table.
  • Block-end The caption box should be positioned at the block end edge of the table.
Positioning
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different position values, and how to use them.
Types of positioning
  • Static positioning.
  • Relative positioning
  • Absolute postioning
  • Fixed positioning
  • Sticky positioning


Satic Positioning
Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here." To demonstrate this, and get your example set up for future sections, first add a class of positioned to the second p in the HTML:

Now add the following rule to the bottom of your CSS: .positioned { position: static; background: yellow; }

Relative positioning is the first position type we'll take a look at. This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position, including making it overlap other elements on the page. Go ahead and update the position declaration in your code: position: relative;

Introducing top, bottom, left, and right top: 30px; left: 30px;

Reference
  • All the documentation in this page is taken from MDN
  • TutorialsPoint SimplyEasyLearning Tutorialspoint