CSS Syntax (Rule)

 

CSS Syntax

 
Syntax usually refers to the rule that we gonna write the code, It is also considered as the grammar to write a perfect line of code.

We will discuss the syntax of CSS (Cascading Style Sheet) in the remaining part.

Syntax


The syntax of CSS involves a SELECTOR and a DECLARATION  block.












  • Selector points to the change in an HTML element that we want to style.
  • A declaration is a change that will be implemented in the HTML element.
  • Declarations block consists of one or more declarations separated through (;) Semicolon.
  • Each declaration is separated through a colon that contains a Property and a value, as shown in the image above.
  • The whole Declaration block is enclosed by Curly braces.
Example:








Example Explained

  • p is a selector in CSS (it points to the HTML element you want to style: <p>).
  • color is a property, and red is the property value
  • text-align is a property, and center is the property value





Comments

Post a Comment

Popular posts from this blog

Basics of HTML- Learn web dev online

Image
Learn Web development online (Beginner's Guide) What is HTML? HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating web pages. HTML describes the structure of a web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content. HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.  Basics of HTML language  Learning HTML (HyperText Markup Language) is a great first step into web development. Here’s a guide to the most basic concepts and elements you need to start. 1. Install Vs code editor, customize it according to your will.           2.  learn the basics of HTML           3. Always be practical with learning don't stick with the tutorials only 4. Dont invest too much time in learning HTML, understand the basics and proceed to next language. Dont wait for perfection, this is project b...
Read more

Block and Inline Elements of HTML

Image
Block and Inline elements Here are the two unique elements of HTML that are widely used. Block Elements Block elements start from a new line and occupy enough space compared to the normal text. The browser automatically recognizes these elements and adds spaces. Think of a block element as a building block on a page. It always takes up the full width it can, spreading out as far as possible. Two common types of block elements are: Paragraph <p>: This is for regular text. Each <p> tag starts a new line and goes all the way across the page. Division <div>: This is a more general container. You can use it to group other elements together and style them as a unit. So, basically, block elements stack vertically on a page and fill the entire width available. Here is a list of all the Block Elements of HTML:    2. Inline elements The elements that take up the required space and don't start with a new line are the Inline Elements. It only takes the necessary width....
Read more

CSS - Introduction

Image
What is CSS? CSS or Style.css is called Cascading Style sheets, a constructive language to style a colorless HTML web page. Mainly, it has three main types: Inline CSS Internal CSS External CSS let's briefly talk about each type in the remaining part of the article. 1. Inline CSS Inline CSS is used to apply a unique style to a single HTML element directly within the element's tag. It's done using the " style" attribute inside an HTML tag. Inline CSS is typically used for small or specific changes. Example: 2. Internal CSS Internal CSS is used when you want to define styles for a single HTML page. The CSS rules are defined within a <style> tag in the <head> section of the HTML document. Internal CSS is ideal when you have a unique style for a specific page. Example: 3. External CSS External CSS is used to apply styles to multiple web pages. The CSS rules are defined in a separate .css file , and this file is linked to the HTML documents. This method...
Read more