Example
<E style="property-name:property-value;"></E>
<div style="width:400px; height:400px; background-color:lightblue;"></div>
Try </>
Web development courses to make an interactive and responsive website.
The CSS properties can be written either in the style attribute of every html element or in the <style> element.
HTML elements can be designed by the CSS properties. There are three methods to apply CSS properties.
In this method, style attribute is used in the starting tag of the element that we want to style. The syntax of inline CSS has been given below.
<E style="property-name:property-value;"></E>
<div style="width:400px; height:400px; background-color:lightblue;"></div>
Try </>
In the above example, style attribute contains the CSS properties. One property includes the property-name and property-value. For example, width is the property-name and 400px is the property-value (width:400px;).
In this method, CSS properties are specified in the <style>
tag. And the <style>
must be present in the <head>
tag. See the syntax given below for the internal CSS properties.
<head>
<style>
div{
width:400px;
height:400px;
background-color:lightblue;
}
</style>
</head>
Try </>
The above given inline and internal methods apply the same CSS properties.
In this method, a separate file of CSS is used to style the content. To make a css file
Copy the above given code and paste it in the notepad. Now, save the file with the name external.css
.
Remember that you can give any name to the file but the extension must be .css.
And now connect CSS file with the HTML using <style> tag. And in this case, <style> tag may be placed inside the head or body sections.
The syntax to import a CSS file is given below.
<head>
<link href="external.css" rel="stylesheet">
</head>
Try </>
rel means relation. And the value of rel is stylesheet because external.css is a style sheet.
Was this article helpful?
Email:
Message:
Get the newsletter