DEV Community 👩‍💻👨‍💻

elinabey
elinabey

Posted on

Introduction to CSS Controls

Introduction to CSSIn this post we'll see the basic controls of CSS. As we know 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. In our last tutorial we discussed What is CSS?.

Basic CSS Controls.

1.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.

2.Class Selector:
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.

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

3.Display:
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.

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

4.ID Selector:
The id selector can use the id of an attribute of an HTML element and help in selecting a specific element.

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

5.Comments:
This CSS Controls are desirable to be used when writing code. Comments are ignored by browsers

<h1>This is Comment</h1>
<style>/*This is a comment*/</style>
Enter fullscreen mode Exit fullscreen mode

6.Background Color:
The background-color attribute determines the color which is to be set for the background of an element.

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

This post originally published at What is CSS Controls. If you want to read in detail visit their.

I am new to web development and am going to learn and share good content that can help others. If you have any questions please discuss below.
Thank you.

Top comments (0)

Let's team up together 🤝

We're Hiring

We're hiring for a Senior Full Stack Engineer to join the DEV team. Want the deets? Head here to learn more about who we're looking for.