HTML Styles - CSS

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are fundamental technologies used to create and design web pages. They work together to structure and style the content of a website.

What Is Css

CSS, or Cascading Style Sheets, is a style sheet language used for describing the presentation and layout of HTML (Hypertext Markup Language) documents.

Using Css

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file

Example

           
<h1 style="color: green;">A Green Heading</h1>
<p style="color: black;">A red paragraph.</p>

You can click on above box to edit the code and run again.

Output

A Blue Heading

A red paragraph

Internal Css

Internal CSS refers to the practice of including the CSS code directly within the HTML document, typically within the <style> tags in the document's <head> section. Instead of creating a separate external CSS file, you embed the styles directly into the HTML file. This allows you to define and apply styles specific to that particular HTML document.

Example

              
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
    
<style>
        /* Internal CSS code goes here */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }

        h1 {
            color: #333;
            text-align: center;
        }

        p {
            color: #666;
            line-height: 1.5;
        }
<style> 
</head>
<body>
<h1>Welcome to Internal CSS</h1>
<p>This is an example of using internal CSS to style HTML content.</p>
</body>
</html>

You can click on above box to edit the code and run again.

Output

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the section of each HTML page:

Example

             
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Internal CSS Example</title>
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This is an example of using external CSS to style HTML content</p>
</body>
</html>

You can click on above box to edit the code and run again.

Output

CSS Colors, Fonts and Sizes

In CSS (Cascading Style Sheets), colors, fonts, and sizes are essential aspects of styling web content. Let's delve into each of these:

CSS Colors:

The CSS color property defines the text color to be used.

Keyword

Example

              
 <html>
<head>
<style>
.heading {
  color: blue;
  font-family: poppins;
  font-size: 300%;

}
.paga {
  color: red;
  font-family: arial;
  font-size: 160%;
}
</style>
</head>
<body>

<h1 id="heading">This is a CodeLines</h1>
<p id="paga">My frist paragraph.</p>

</body>
</html>

You can click on above box to edit the code and run again.

Output

This is a CodeLines

My first paragraph

Hexadecimal:

Example

              
h1 {
color: #336699;
background-color: #f0f0f0;
    }

You can click on above box to edit the code and run again.

Output

RGB (Red, Green, Blue):

Example

 
            
p{
color: rgb(255, 0, 128);
background-color: rgb(200, 220, 240);
}

You can click on above box to edit the code and run again.

Output

RGBA (RGB with Alpha/Transparency):

Example

        
             
     div{ 
background-color: rgba(100, 100, 150, 0.5);
    }

You can click on above box to edit the code and run again.

Output

CSS Fonts:

The CSS font-family property defines the font to be used.

Font Family:

Example

      
        
     body {
    font-family: 'Arial', sans-serif;
    }

You can click on above box to edit the code and run again.

Output

Font Size:

Example

           
     h2 {
    font-size: 18px; 

    }

You can click on above box to edit the code and run again.

Output

Font Weight:

Example

             
     strong {
    font-wieght: bold; 

    }

You can click on above box to edit the code and run again.

Output

Font Style:

Example

             
     em {
    font-style: italic; 
    }

< You can click on above box to edit the code and run again.

Output

CSS Sizes:

In CSS, the term "size" can refer to various properties that control the dimensions of elements on a webpage. Here are some CSS properties related to size:

Width and Height:

Example

             
     img {
    width: 100px;
    height: 80px;
    }

You can click on above box to edit the code and run again.

Output

Padding and Margin:

Example

              
     p {
    padding: 15px;
    margin: 10px;
    }

You can click on above box to edit the code and run again.

Output

Border:

Example

{ border: 2px solid #333; }
You can click on above box to edit the code and run again.

Output

Box Model:

Example

article { width: 200px; padding: 15px; margin: 10px; border: 2px solid #333; }
You can click on above box to edit the code and run again.

Output