This article will introduce you to a simple yet an interesting topic that is Types Of CSS and follow it up with a programmatic demonstration. Following pointers will be covered in this article,
So let us get started with this article,
Types Of CSS
In CSS there are three types:
- Inline CSS
- Internal CSS
- External CSS
Cascading style sheets is used to set the style to your web page which contains HTML elements. In these three types of the CSS the most commonly used methods are inline CSS and external CSS.
These three are the different methods that a cascading style sheet can be used to apply a unique style in these different methods and as mentioned inline CSS and external CSS is commonly used ones.
Moving on with this article on Types Of CSS,
There are four ways in which it can associate style with the HTML document.
Embedded CSS – The Style Element
In these you can insert CSS rules into an HTML document using this <style> element. This tag is mentioned or placed inside the <head>…</head> tags.Below showing the generic syntax:
<head> <style type=”text/css” media=”> Style Rules ….……………. </style> </head>
These are associated with <style> elements:Attributes
Attribute | Value | Description |
Type | Text/css | This specifies the style sheet language for a content-type. This attribute is required. |
Media | Screen Tty Tv Projection Handheld | These devices specifies the document to be displayed on. For these default values are all. This is the optional attribute. |
Moving on with this article on Types Of CSS,
Inline CSS
An Inline CSS is used to apply various unique style to a single element. It is also used to define a style for a special types of elements, add a class attribute to the element. You can use any style attribute of any HTML element to define style rules. Then the rules will only be applied to that element. Below is the syntax:
<element style=”…style rules…”>
| Attribute | Value | Description |
Style | Style rules | Here style attribute is the combination of style declaration separated by semicolon (;). |
Attributes
Example
<h1 style=”color: #36F;”> This is inline CSS </h1>
Output
Moving on with this article on Types On CSS,
External CSS – The Link element
This <link> element can be used to include and exclude an external style sheet file in HTML document. An external style sheet is the separate text file with an .css extension. So here you define all the style rules within the text file and then you include this file into any HTML document using this <link> element. Below is the generic syntax:
<head> <link type=”text/css” href=”…”media”…/> </head>
Attributes
The attribute that are associated with <style> elements are:
Attribute | Value | Description |
Type | Text/css | This specifies the style sheet language as a content-type. It is the required attribute. |
Href | URL | It specifies the style sheet having a style rules. It is the required attribute. |
Media | Screen Tty Tv Projection Handheld | These devices specifies the document to be displayed or viewed. It is an optional attribute. |
Example
h1, h2, h3
{
color: #36C;
font-weight-weight: normal;
letter-spacing-spacing : .5cm
margin-bottom-bottom: 2cm;
text-transform: lowercase;
}
Include this file in any HTML document as shown below:
<head> <link type="text/css" href="mystyle.css" media="all"/> </head>
This brings us to the end of this article on Types Of CSS.
Checkout our Full Stack Developer Training which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.
Got a question for us? Please mention it in the comments section of article and we will get back to you.