Learnerslesson
   JAVA   
  SPRING  
  SPRINGBOOT  
 HIBERNATE 
  HADOOP  
   HIVE   
   ALGORITHMS   
   PYTHON   
   GO   
   KOTLIN   
   C#   
   RUBY   
   C++   
   HTML   
   CSS   
   JAVA SCRIPT   
   JQUERY   
JAVA SPRING SPRINGBOOT HIBERNATE HADOOP HIVE ALGORITHMS PYTHON GO KOTLIN C# RUBY C++ HTML CSS JAVA SCRIPT JQUERY


❮❮ PREV NEXT ❯❯


CSS - Syntax


CSS Syntax usually contains a Selector with property and value pairs.


Note : We will be learning about selectors in the next tutorial.

CSS Syntax


To understand CSS Syntax, let us take the example of an HTML paragraph element(i.e. <p>).And we want to change the color of the contents of the <p> element to red.


Note : In the below example we would be using Internal CSS to demonstrate CSS Syntax.

Example : 



<html>
<head>
	<style>
		p {
  			color: red;
  		}
	</style>
</head>

<body>
    <p>This is the first paragraph</p>
</body>
</html>


Output :



 

So, in the above example, we have used Internal CSS to demonstrate CSS syntax. An InternalCSS is where the CSS properties are written inside the HTML file within the <style> element.


<style>
	p {
		color: red;
	}
</style>

Now, coming to the CSS Syntax.


p {
	color: red;
}

There are three elements that CSS syntax contains.


  1. Selector : Here 'p' is the selector.

  2. Braces : Then we have the opening brace (i.e. '{') and the closing brace(i.e. '}').

  3. Property : Here 'color' is the property.

  4. Value : Here 'red' is the value of the property 'color'.


    CSS-Syntax

So, with the above CSS, the color of the text, This is the first paragraph inside the<p> element changes to red.


<p>This is the first paragraph</p>

This is because we have set the value of the color Property to red.


p {
	color: red;
}

CSS syntax for multiple property value pairs


Now, let us see how can we have multiple property value pairs in CSS.


Example : 



<html>
<head>
	<style>
		p {
  			color: red;
  			font-size: 40px;
  		}
	</style>
</head>

<body>
    <p>This is the first paragraph</p>
</body>
</html>


Output :



 

Now, let us say, we want to increase the size of the text for the contents of the <p> elementalong with the color red.


And we added the property value pair(i.e. font-size: 40px;) for the p selector.


<style>
	p {
		color: red;
		font-size: 40px;
	}
</style>

Just remember, we can add multiple property value pairs separated by semicolon(i.e. ;).



❮❮ PREV NEXT ❯❯