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 ❯❯


HTML - CSS


You have often seen websites having different text sizes(i.e. Large and small texts), colors, fonts e.t.c. Have you ever wondered how it happens?


Well! The answer is CSS.


What is the full form of CSS?


The full form of CSS is Cascading Style Sheet. Which actually means, a style that is applied to a parent would be applied to all its children.


Sounds confusing?


No worries! We will simplify later in this tutorial.


What is CSS in HTML?


CSS is a design language that helps making the web pages presentable with its so called CSS properties.


Ways of using CSS in HTML


There are three ways using which CSS can be used in HTML :

  1. Inline CSS



    Inline CSS can be applied to HTML using the style attribute in HTML elements.

  2. Internal CSS



    Internal CSS can be applied to HTML using the <style> element within the <head> element.

  3. External CSS



    External CSS can be applied to HTML using the <link> element within the <head> element.

Inline CSS in HTML


Inline CSS is used to apply styles to an HTML element. It can be applied to one element directly.


Example : 



<html>	
	<body>
		<p style = "color:green;">
			The color of this text is green with inline CSS.
		</p>	
	</body>
</html>


Output :



 

So, if you look at the above output, the color of the text is green. The color got set as we have assigned the color property to green in the style attribute of <p> element. 


<p style = "color:green;">

This is the inline CSS that we have applied to <p> element directly.

Spring_Boot

Internal CSS in HTML


Internal CSS is used to apply styles to an entire HTML page. It is defined in the <style> element and the <style> element is placed inside the <head> element of HTML.


Example : 



<html>
	<head> 
		<style>
			.myFirstClass {
                border-style: dotted;
                border-width: 5px;
			}
		</style>
	</head>
	<body>
		<div class = "myFirstClass">
			<img src="image1.jpg" style = "width:100%">
        </div>
	</body>
</html>


Output :



 

So, if you look at the above code the the <style> element is used to define the internal CSS. And the <head> element acts as a container for the <style> tag.


<head>
	<style>
		.myFirstClass {
			border-style: dotted;
			border-width: 5px;
		}
	</style>
</head>

In the <style> tag we have specified the CSS properties for the class myFirstClass.


.myFirstClass {
	border-style: dotted;
	border-width: 5px;
}

And the border is applied around the image contained in the <img> element.


External CSS in HTML


An external CSS is used to define styles for multiple HTML pages. An external CSS is defined in a separate file and can be used in the current HTML file by including it using the <link> element.


Example : 



<html>
	<head> 
		<link rel="stylesheet" href="myCustomStyle.css">
	</head>
	<body>
		<div class = "myFirstClass">
			<img src="image1.jpg" style = "width:100%">
        </div>
	</body>
</html>


Output :



 

So, if you look at the above output, the external CSS is defined in a file myCustomStyle.css and is included using the <link> element.


<link rel="stylesheet" href="myCustomStyle.css">

The <link> element has two attributes :

  1. rel attribute



    Says that it is a CSS file or a stylesheet.

  2. href attribute



    Defines the external CSS file.

Let us see myCustomStyle.css file :


.myFirstClass {
	border-style: dotted;
	border-width: 5px;
}

Once myCustomStyle.css file is added using the <link> element, the border is applied for the image (i.e. image1.jpg).


<div class = "myFirstClass">
	<img src="image1.jpg" style = "width:100%">
</div>

Note : We will be learning more about CSS in a detail tutorial.


❮❮ PREV NEXT ❯❯