Skip to content
EngineeringHulk

EngineeringHulk

Free Educational Notes

  • Home
  • Question Papers
  • Toggle search form
  • Micro programmed control unit
    Micro programmed control unit general
  • Thales theorem
    Thales theorem general
  • Introversion
    Introvert meaning in Hindi general
  • Top 10 Engineering Colleges in Hyderabad
    Top 10 Engineering Colleges in Hyderabad general
  • Biogas digester design consideration
    Biogas digester design consideration Energy from Biomass
  • 11th admission
    11th Admission general
  • Drum brakes
    Mechanical brakes in Automobile Engineering Automobile Engineering
  • Marcos Commando
    Marcos commando general
Types of CSS (Cascading Style Sheet)

Types of CSS (Cascading Style Sheet)

Posted on December 28, 2022December 28, 2022 By Dr. Jennifer Russel 2 Comments on Types of CSS (Cascading Style Sheet)

Table of Contents

  • What is CSS?
  • Some More additional Knowledge about CSS
  • CSS Selectors and its Declarations
  • Types of CSS
    • 1. Inline CSS
    • 2. Internal CSS
    • 3. External CSS

CSS is a language used to describe the styling of a document written in a markup language such as HTML. It uses selectors to identify which elements of the document will be affected by the styles. CSS can be used to control the layout of multiple web pages all at once.

It can also be used to apply styles to web pages, such as colors, backgrounds, fonts, and so on. CSS can also be used to create responsive designs, which allow web pages to adapt to different devices and screen sizes.

We will also cover topics like layout, typography, animation, transitions, and responsive design. We will also discuss advanced topics such as flexbox, grid, and media queries.

In addition, we will talk about the different CSS frameworks like Bootstrap, Foundation, and Semantic UI and their uses. We will also show you how to use a pre-processor like Sass to save time and make your code more efficient. 

In the end, we will give you some tips and tricks to help you optimize your CSS code. We will also provide practical examples to help you understand the concepts better.

What is CSS?

In simple terms, CSS (Cascading Style Sheets) is a language that allows you to control the appearance of a website. It is used to apply styles, such as fonts, colors, and layout, to the elements of a web page.

Here is an example of a simple CSS rule that changes the color of all the paragraphs on a web page to red:

p {

  color: red;

}

This CSS rule targets all the <p> elements on the page and sets their color to red. The rule is applied to the HTML elements using a selector (in this case, the p element), and the styles are defined within the curly braces ({}).

Here is an example of how this rule would be used in an HTML file:

<!DOCTYPE html>

<html>

  <head>

    <style>

      p {

        color: red;

      }

    </style>

  </head>

  <body>

    <p>This paragraph will be red.</p>

    <p>This paragraph will also be red.</p>

  </body>

</html>

The CSS rule is added to the HTML file within an <style> element in the <head> of the document. When the HTML file is loaded in a web browser, the paragraphs will be displayed in red because of the CSS rule.

CSS is a powerful tool that allows you to customize the look and feel of a website to match your branding or design preferences.

It is an essential part of modern web development and is used by web designers and developers to create visually appealing and user-friendly websites.

Some More additional Knowledge about CSS

CSS stands for Cascading Style Sheets and is used to style and format the look of websites. It is a language used to describe the look and formatting of HTML documents. CSS can be used to define the size, color, font, border, background, and other aspects of the page.

It is also used to create responsive designs, meaning the website can be viewed on any device, regardless of screen size. CSS is a key component of web development, and a web page is incomplete without it.

CSS Selectors and its Declarations

CSS selectors are used to specify which elements in an HTML document a set of CSS rules should be applied to. Selectors can target elements based on their tag name, class, id, attribute, and other characteristics.

Types of CSS (Cascading Style Sheet)

Here are some examples of common CSS selectors:

Element selectors: These selectors target elements based on their tag names, such as p, div, h1, etc. For example, the following rule will apply to all p elements in the HTML document:

p {

  color: red;

}

Class selectors: These selectors target elements that have a specific class attribute. Class selectors start with a period (.) followed by the class name. For example, the following rule will apply to all elements with a class of highlights:

.highlight {

  background-color: yellow;

}

ID selectors: These selectors target elements that have a specific id attribute. ID selectors start with a hash (#) followed by the id name. For example, the following rule will apply to the element with an id of main-header:

#main-header {

  font-size: 32px;

}

CSS declarations are the styles that are applied to the elements that are targeted by the selectors. Declarations consist of a property and a value, separated by a colon (:). Multiple declarations can be applied to an element by separating them with a semicolon (;).

p {

  color: red;

  font-size: 16px;

  text-align: center;

}

Here is an example of a CSS convention with multiple declarations:

This rule will apply the color red, a font size of 16 pixels, and centered text alignment to all p elements in the HTML document.

CSS selectors and declarations are used together to create CSS rules that control the appearance of elements in an HTML document. By using different selectors and declarations, you can customize the look and feel of your website to match your branding or design preferences.

Types of CSS

There are three main types of Cascading Style Sheets (CSS):

1. Inline CSS

This type of CSS is applied directly to an HTML element using the style attribute. It is not recommended to use inline CSS, as it can make the HTML code difficult to read and maintain. Here is an illustration of inline CSS:

<p style=”color: red; font-size: 20px;”>This paragraph has inline CSS applied to it.</p>

2. Internal CSS

This type of CSS is defined within the <style> element in the <head> of an HTML document. It allows you to apply styles to multiple elements on a single page, but the styles are not reusable on other pages. Here is an illustration of internal CSS:

<!DOCTYPE html>

<html>

  <head>

    <style>

      p {

        color: red;

        font-size: 20px;

      }

    </style>

  </head>

  <body>

    <p>This paragraph has internal CSS applied to it.</p>

  </body>

</html>

3. External CSS

This type of CSS is defined in a separate CSS file and linked to the HTML document using the <link> element. It allows you to apply styles to multiple pages on your site and make it easier to maintain and update the styles, as all the styles are in a single, centralized location. Here is an illustration of external CSS:

<!DOCTYPE html>

<html>

  <head>

    <link rel=”stylesheet” href=”/path/to/style.css”>

  </head>

  <body>

    <p>This paragraph has external CSS applied to it.</p>

  </body>

</html>

The external CSS file (style.css in this example) might contain rules similar to the following:

p {

  color: red;

  font-size: 20px;

}

External CSS is the most commonly used type of CSS, as it allows you to easily maintain and update the styles for multiple pages on a website.

CSS is an essential component of web development. It can be used to create a variety of design features and styles. Different types of CSS are available to suit different needs. Each type of CSS provides different advantages and can be used in different situations.

Choosing the right type of CSS for a project can help to create a visually appealing and functional website.

For more articles, please visit the home page

general

Post navigation

Previous Post: Classifications Of DBMS (Database Management System)
Next Post: Diploma in Civil Engineering?

Related Posts

  • N-Phenylethanamide
    N phenylethanamide general
  • UPSC preparation
    UPSC Syllabus general
  • Best courses after computer engineering
    Best courses after computer engineering general
  • Tally full form
    Tally full form general
  • ed full form
    ed full form general
  • Intrusion Prevention Systems - (IPS)
    Intrusion Prevention Systems – (IPS) general

Comments (2) on “Types of CSS (Cascading Style Sheet)”

  1. Pingback: An Introduction to Hypertext Markup Language (HTML): Benefits, Syntax, and Usage
  2. Pingback: Floyd Algorithm with examples - All you need to know in 2023

Comments are closed.

Categories

  • Automobile Engineering (29)
    • Module 1 (10)
      • Clutch (2)
      • Propellar Shaft & Axle (2)
      • Transmission (6)
    • Module 2 (10)
      • Braking System (5)
      • Final Drive and Differential (2)
      • Steering System (3)
    • Module 3 (2)
      • Suspension System (1)
      • Wheels & Tyres (1)
    • Module 4 (6)
      • Automotive Electrical System (6)
  • general (137)
  • Manufacturing Engineering/Production Process (11)
  • News (1)
  • Renewable sources of Energy (34)
    • Energy from Biomass (7)
    • Geothermal Energy (6)
    • Solar Energy (1)
    • Wind Energy (3)
  • Thermodynamics (6)

    Recent Posts

    • Thyristor in power electronics March 25, 2023
    • ibps (Institute of Banking Personnel Selection) March 25, 2023
    • Layers of atmosphere March 25, 2023
    • 1 million in lakhs March 24, 2023
    • Who discovered proton March 24, 2023
    • SIM full form March 24, 2023
    • Assam capital March 24, 2023
    • Income tax inspector March 24, 2023
    • Isomers of pentane March 24, 2023
    • Classification of computer March 22, 2023
    • IAS full form March 22, 2023
    • VISA full form March 21, 2023
    • trysem full form March 21, 2023
    • Savinay Avagya Andolan March 21, 2023
    • Marcos commando March 21, 2023
    • Hokera wetland March 21, 2023
    • Nose Shapes: Exploring the Fascinating World March 21, 2023
    • Indian football players March 19, 2023
    • Nivedita Menon March 19, 2023
    • The Fastest Century in T20: A Record That Continues to Impress March 19, 2023
    • Lachit Borphukan March 18, 2023
    • XNXP personality traits March 18, 2023
    • how many countries in the world? March 18, 2023
    • gk questions March 18, 2023
    • Vera Gedroits March 17, 2023
    • H3N2 virus – Detailed important information March 14, 2023
    • Nut vs bolt March 12, 2023
    • Specific gravity of water March 12, 2023
    • Vernier caliper March 3, 2023
    • Lami’s theorem March 1, 2023
    • lad meaning in Hindi March 1, 2023
    • Byopia/biopia March 1, 2023
    • Top 10 Udemy Courses March 1, 2023
    • Mass of electron February 28, 2023
    • Hcl Molar Mass February 17, 2023
    • Vikram University February 17, 2023
    • District education office February 17, 2023
    • Agriculture officer February 17, 2023
    • Loco Pilot February 16, 2023
    • Google bard AI February 8, 2023
    • Remote procedure call [RPC] February 8, 2023
    • Raj Rishi Bhartrihari Matsya University February 8, 2023
    • CCC full form: Course on computer concepts February 8, 2023
    •  Maharaja Krishnakumar Sinhji Bhavnagar University February 8, 2023
    • Scholarship 2.0 February 8, 2023
    • Amyloidosis: Causes, Risk Factors, diagnosis & treatment February 5, 2023
    • Type 1 and Type 2 Superconductors February 4, 2023
    • N phenylethanamide February 4, 2023
    • Two nation theory February 4, 2023
    • Kranz Anatomy February 4, 2023
    • Megasporogenesis February 4, 2023
    • NADPH full form February 4, 2023
    • Unit of hall coefficient February 4, 2023
    • Fixed beam February 4, 2023
    • History of Pharmacognosy February 4, 2023
    • Unit of Strain February 4, 2023
    • Sarasvati Shishu Vidya mandir February 2, 2023
    • Tally full form February 2, 2023
    • IDR full form February 2, 2023
    • SSC CHSL full form February 1, 2023
    • Leave letter for school
      Leave letter for school general
    • SSC CGL full form
      CGL full form general
    • alternator
      Alternator in Automobile Engineering Automobile Engineering
    • Law of Conservation of Energy
      The Law of Conservation of Energy: Everything You Need to Know Thermodynamics
    • ISBM College of Engineering Pune
      ISBM College of Engineering Pune general
    • VSEPR theory.
      VSEPR theory general
    • master cylinder in hydraulic braking system
      MASTER CYLINDER in Automobile Engineering Automobile Engineering
    • BSF Head Constable Ministerial Exam Syllabus
      BSF Head Constable Ministerial Exam Syllabus general

    Privacy Policy

    Cookie Policy

    About us

    Contact us

    Copyright © 2023 EngineeringHulk.

    Powered by PressBook News WordPress theme

    WhatsApp me