Skip to content
beginners
  • Home
  • Tutorial
  • Web Development
Introduction
Editor
Elements
Attributes
CSS
Heading Tag
Paragraph Tag
Anchor Tag
Text Formatting
HTML Blockquote
Image Tag
Table Tag
List Tag
HTML Form
Commaet Tag
Class And ID
Responsive

CSS

  • January 16, 2022August 6, 2022
  • by root

CSS

CSS stands for Cascading Style Sheet. We use CSS to design the web pages. CSS controls the UI (User Interface) of a web page. Using CSS, you can set your paragraph font-size big or small, add color for paragraph text, set the position (Left, Right, Center), you can add top and bottom space in the paragraph, you can add background-color, etc.

Syntax:

you can change the font-color of two paragraphs by CSS.

<p style="background-color:yellow;">

This is a yellow paragraph 

</p>

<p style="background-color:red;">

  This is a red paragraph.

</p>


Output:

This image has an empty alt attribute; its file name is Screenshot-2021-11-05-170409.png

Add CSS in HTML

CSS can be added in HTML by three types:

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS:

CSS can be added inline to your HTML element. Add style attribute inside the HTML element and write CSS properties inside the quotes (“color: red; font-size: 30px;”) called Inline CSS.

In the given syntax, paragraph has inline CSS.

Synatx:

<html>

<head>

<title>Page Title</title>

</head>

<body>

     <p style="background-color:red; color:yellow; font-size:20px;">

       This is a paragraph.

     </p>

</body>

</html>

Internal CSS:

Add style for single webpage on the same HTML file using tag <style>. This tag would be add in the <head> section on the same HTML page where you are writing your HTML.

In the given syntax, you can see the internal CSS using <style> tag.

Syntax:

<html>

<head>

<title>Page Title</title>

<style>

p {
background-color:red;
}

</style>


</head>

<body>

<p>

This is a paragraph.

</p>

</body>

</html>



External CSS:

When you have multiple HTML pages for your website, you will need a separate file named style.css where your all CSS would written for your all webpages. The external stylesheet would be added via link element on each HTML file inside the <head> element.

In the given syntax, you can see the a <link…> tag, where I linked my external style.css file using href attribute.

Syntax:

<html>

<head>

<title>Page Title</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<p>

This is a paragraph.

</p>

</body>

</html>




Hello
Theme by Colorlib Powered by WordPress
  • Disclaimer