CSS syntax

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.

inline CSS
internal CSS
external CSS

inline CSS

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.

Example

<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;).

internal CSS

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.

Example

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

external CSS

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.

Example

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