Introduction to CSS Controls - Informatic Point

Introduction to CSS Controls. CSS stands for Cascading Style Sheets. It is used to define the performance of the document which is written in a markup language like HTML. It does the work of division of performance and content which includes diverse layout, colors, and fonts. The separation gives flexibility and also controls the diverse properties which enable multiple web pages to share formatting by specifying proper CSS. The CSS terms are sustained by World Web Consortium. In addition to this, it also provides specific rules which help in another formatting if the content is being obtained from a mobile device.

Basic CSS Controls.

Some of the basic controls are mentioned below:

CSS Syntax:

There are a set of rules that need to be followed in CSS Controls. The CSS rule-set consists of a selector and a declaration block. The selector is used to point to the HTML tags which users would like to style. The declaration block can contain one or more declarations that can be separated by semicolons. Every declaration should include a property name with its value and these separated by colons.

Class Selector:

<h1 class="class-selector">This is Class Selectors</h1>
<style>
  .class-selector{color:blue;}
</style>

To select a special class attribute the class selector is used to select the elements from that class. To make use of tags in a particular class a period (.) character is used. It is followed by the name of the class. With this, if the user needs that only particular elements are to be used then only those can be specified by a class.

Display:

<h1 class="class-selector">This is Class Selectors</h1>
<style>
  .class-selector{
    display:block;}
</style>

Many HTML elements are set to this mode of display. By default, the block-level elements take as much space and they cannot be placed on the same line with any other display mode. It is possible to gain the strength to change the element’s height and width as per your wish.

ID Selector:

<h1 id="class-selector">This is Class Selectors</h1>
<style>
  #class-selector{color:blue;}
</style>

The id selector can use the id of an attribute of an HTML element and help in selecting a specific element. It is used to select one individual element and this element should be single for that page. In order to select an element with a particular id, ‘#’ symbol is used and this is followed by the id of that element.

Comments:

<h1>This is Comment</h1>
<style>/*This is a comment*/</style>

These CSS Controls are desirable to be used when writing code. They give transparency as to what the code is doing and help you or someone else who is new to the code to work upon it accordingly. Comments are ignored by browsers. A CSS comment starts /* and ends with */.

Grouping Selectors:

<style>
  h1, p, div{
    color:black; font-size:20px; /*etc */
</style>

There are times when elements have the same style outlines. To have them mutually grouped and minimize the code is a better option. To the group, the selector’s user can make use of a comma, and separate each selector.

Colors in CSS:

<h1 id="class-selector">This is Color Blue</h1>
<style>
  #class-selector{color:blue;}
</style>

In these CSS controls, colors can be defined in RGB formula, HEX, and RGBA. Each parameter represents the power of these colors and defines a new color. For example, to display black all color parameters should be set to RGB(0,0,0), #000, and RGBA(0,0,0,0.9).

Background Color:

<h1 id="class-selector">This is background Color Green</h1>
<style>
  #class-selector{background-color:green;}
</style>

The background-color attribute determines the color which is to be set for the background of an element. CSS Color can easily be defined by giving a color name, by adding a Hex value or by setting RGB value, etc.

CSS Margins:

<style>
  /*Margin: Top, right, bottom, left.*/
  margin:10px 10px 10px 10px;
</style>

CSS Controls has various margin features that can help in creating space around different elements and also defines these outside borders. CSS can have attributes like margin-top, margin-right, margin-bottom, and margin-left, It can also be write as margin:10px 10px 10px 10px;

Conclusion

CSS Controls helps you to hold the informational content of a document separate and helps in displaying it. It helps in evading duplication, controlling the code easily, and using the same content with different styles.