React JS Training Course Online
- 20k Enrolled Learners
- Weekend
- Live Class
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,
In CSS there are three types:
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.
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,
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,
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.
Course Name | Date | Details |
---|---|---|
Web Developer Certification Training Course | Class Starts on 19th October,2024 19th October SAT&SUN (Weekend Batch) | View Details |
Web Developer Certification Training Course | Class Starts on 28th December,2024 28th December SAT&SUN (Weekend Batch) | View Details |
edureka.co