Difference between Internal,  External and Inline CSS with their priority






Type Priority
Inline CSS Highest priority
Internal CSS Medium priority
Lowest CSS Highest priority





Inline CSS:


An inline css may be used to apply a unique style for a single element. The inline styles loses many of the advantages of style sheets by mixing content with presentation. Use this maethod sparingly.

To use inline styles, you use the style attribute in a relevent tag. The style attribute can contain any CSS property. The syntax for inline style sheet is given below.

<tag style="property:value;">

Eg: <p style="color:red;">


Internal CSS:


An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:



<head>
<style type="text/css">
hr 
{
color:sienna;
}
p 
{
margin:20px;
}
body 
{
background-url:("images/back 40.gif");
}
</style>
</head>


External CSS


An external style sheet is ideal when the style is applied to many pages. With an external style heet, you can
change the look of an entire Web sile y changing one file. Each page must link to the style sheet using the link>
tag. The <link> tag goes inside the head section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>



An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet
should be saved with a .css extension. An example of a style sheet file is shown below:

hr 
{
color:sienna;
}
p 
{
margin:20px;
}
body 
{
background-url:("images/back 40.gif");
}

Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is:
margin-left:20px;


Comments

Post a Comment

Popular posts from this blog

Node.js Cheat Sheet

Image
To start a new node project, type  C:\Users\jinoy\OneDrive\Desktop\MERN>npm init -y      The basic syntax of calling a function in node.js with express is : const   functionname  = ()  =>  { console . log ( "hello world" ); } functionname (); To call a function after every 5 seconds : setInterval (()  =>  {      console . log ( "hello" ); }, 5000  ); To call a function only once after 4 second : setTimeout (() => { console . log ( "test" ); }, 4000 ); To run a script.js file on terminal, type : C:\Users\jinoy\OneDrive\Desktop\MERN>node script.js  OR C:\Users\jinoy\OneDrive\Desktop\MERN>node script To stop a function that is executing on every interval( time to call function again) : const   interval  =  setInterval (()  =>  {      console . log ( "hello" ); }, 1000  ); setTimeout (() => {      clearInterva...
Read more

Codeigniter ! Simple But Powerful

Image
CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications. It is the second largest php framework for website development (first-Laravel). Due to its simplicity, it is the most used framework ever than laravel. Actually these frameworks are only used for developing large scale website. The important thing about this framework is that it is using MVC principle . A MVC or Model View Control framework has a controller that controls all the pages in the website. There can be any number of controller created in codeigniter. The orginal webpages or the contents are placed in the folder named view .  Note : Don't touch the forder named system because it is the soul of the codeigniter Next ⇒
Read more

Enhancing Supply Chain Security and Cloud-Native Development with Chainguard

Image
In the ever-evolving landscape of software development, ensuring supply chain security and embracing cloud-native practices are paramount. One solution that stands out in addressing these concerns is Chainguard, a platform providing secure images for development environments. Recently, I had the opportunity to explore Chainguard's capabilities firsthand through a sponsored video collaboration. The video delved into the seamless integration of Chainguard images into various development workflows, highlighting the significant advantages they offer in terms of security and efficiency. From hosting images on platforms like ECS, Apprunner, and Google Cloud Run to leveraging DockerHub for streamlined deployment, Chainguard simplifies the process while enhancing security measures. What sets Chainguard apart is its proactive approach to security. Images are rebuilt daily and frequently patched, minimizing vulnerabilities and mitigating risks associated with outdated dependencies. This ...
Read more