Skip to content
CodeHasBug
  • Home
  • Tutorial
    • HTML
    • CSS
    • Javascript
    • jquery
    • PHP
    • MySql
    • wordpress
  • Technology
    • Windows
    • Android
  • Social Media
    • WhatsApp
    • Facebook
    • Instagram

CSS

The abbreviation of Cascading Style Sheets is CSS. It is mainly used to design HTML elements.

How to style HTML elements?

We can style HTML elements in three ways i.e

  1. By using an external stylesheet.
  2. Use an internal stylesheet in the head section.
  3. Or we can use inline CSS.

The best way to use CSS by using an external stylesheet. In our CSS tutorial, we can use a different type of problem-solving by using the above ways.

External stylesheet:

We have to use .css as an external stylesheet extension. After that, it has to include in the document section like below-

<link href="your-css-filename.css" rel="stylesheet">

Internal stylesheet:

We can use an internal stylesheet in the section of a document or we can also write it inside the tag. We have to write all of our CSS code inside the style tag.

<style>..</style>

 

tag. For example-

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fff;
}
p {
color: red;
}
</style>
</head>
<body>
<style>
h1 {
color: blue;
}
</style>
<h1>This is a heading with blue color.</h1>

<p>This is a paragraph with red color.</p>

</body>
</html>

Inline CSS:

We can also use the CSS code inside an element. For example

<p style="color: green;">This is a paragraph with red color.</p>

But this is not recommended as we have to use this in each element to style it. So we can use internal or external method. It is very helpful whenever we have to change a style of an element dynamically.

What is the difference between initial and inherit in CSS

April 6, 2022April 6, 2022 by Ashis Biswas

We know there are two terms i.e. initial and inherit in CSS. But many of us don’t know how to use it properly in CSS. …

Read more

Different ways to use a Circle in CSS

Different ways to use a Circle in CSS

April 6, 2022April 6, 2022 by Ashis Biswas

If you’re looking for a new and different design element to spice up your website, then you might want to consider using CSS Circle. CSS …

Read more

How to Align Multiple Images Horizontally in HTML

How to Align Multiple Images Horizontally in HTML

April 6, 2022April 6, 2022 by Ashis Biswas

If you are looking for a way to align multiple images horizontally in HTML, then this is the post for you. It will teach you …

Read more

Create 3 Types of Horizontal and Vertical News Ticker Only With HTML & CSS

Create 3 Types of Horizontal and Vertical News Ticker Only With HTML & CSS

April 5, 2022April 5, 2022 by Ashis Biswas

A news ticker is a bar that displays the latest news and events. In terms of its placement, it can be either Horizontal or Vertical. …

Read more

correct CSS syntax for making all the p elements bold

What is the correct CSS syntax for making all the <p> elements bold?

April 3, 2022April 3, 2022 by Ashis Biswas

There are multiple ways we can change <p> elements bold. For example by using inline CSS like  <p style="font-weight:bold">. But if we want to make …

Read more

Which CSS property changes the font color of an element to blue?

March 31, 2022March 31, 2022 by Ashis Biswas

Many years ago, if we want to change an element font color, we used <font> tag with its attribute i.e. color. But in HTML5, the …

Read more

Post navigation
Older posts
Newer posts
← Previous Page1 Page2 Page3 Next →

Enjoying the articles? I would appreciate a coffee to help me keep writing and coding!

Trending Now

  • PHP replace space with dash
  • jQuery disable button
  • CSS make text unselectable
  • Prevent copying website content
  • PHP post array data
  • PHP foreach break

Recent Posts

  • How to create Back To Top Button in jQuery
  • Why JavaScript error “is not a function” occurs
  • What is the best way to validate an email address in JavaScript?
  • How to create API Key Generator
  • Check if a string contains a specific word in PHP?

Recent Comments

  • Noradavis on How to create a spacebar counter
  • Michelle stuart on How to display images from a folder in PHP
  • John on How to add watermark various way in HTML and CSS
  • Ashis Biswas on How to display images from a folder in PHP
  • Elber Galarga on How to Disable Or Enable Copy and Paste on Website

Categories

  • Android
  • Android Apps
  • CSS
  • Featured
  • HTML
  • Instagram
  • Javascript
  • jquery
  • PHP
  • Technology
  • Tutorial
  • Web Design
  • WhatsApp
  • Windows
  • wordpress

  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • DMCA policy
© 2019 - 2022 CodeHasBug. All rights reserved. | Sitemap | DMCA.com Protection Status | Ad Partner Ezoic
  • Home
  • Tutorial
    • HTML
    • CSS
    • Javascript
    • jquery
    • PHP
    • MySql
    • wordpress
  • Technology
    • Windows
    • Android
  • Social Media
    • WhatsApp
    • Facebook
    • Instagram