The Complete WebDeveloper (42 Blogs) Become a Certified Professional

How To Best Utilize Different Types Of CSS?

Published on Aug 26,2019 19 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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=&rdquo;text/css&rdquo; media=&rdquo;>
Style Rules
&hellip;.&hellip;&hellip;&hellip;&hellip;&hellip;.
</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

Print

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=&rdquo;&hellip;style rules&hellip;&rdquo;>
AttributeValueDescription

Style

Style rules

Here style attribute is the combination of style declaration separated by semicolon (;).

Attributes

Example

<h1 style=&rdquo;color: #36F;&rdquo;> This is inline CSS </h1>

Output

Output - Types Of CSS - Edureka

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=&rdquo;text/css&rdquo; href=&rdquo;&hellip;&rdquo;media&rdquo;&hellip;/>
</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

Print

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 Web Developer Masters Program 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.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.