The Ultimate Guide to CSS

In the ultimate guide to CSS tutorial, you will learn about the CSS and how CSS relates to HTML and the advantages and disadvantages of CSS.
Remember HTML (Hypertext Markup Language) used to web development language, HTML and CSS are co-related to each other.

What is CSS? How Does It Relate to HMTL (Hypertext Markup Language)?

CSS stands for Cascading style sheets is a simple design language that is used to making web pages presentable. means that with the CSS we make modify the look and feel part of a web page design.

you can control the style of the fonts, the color of the text, the spacing and margin between the paragraphs, background color, background-size, layout design, variations in display for all media screen devices size.

Hence, CSS provides powerful control over the presentation of HTML Documents. While HTML is used to structure a web document (which defining things like paragraph and heading, border, images and allows you to embed images, video, and other media), CSS comes through and specifies your document’s style—page colors, fonts, layouts are all determined with CSS.

Therefore, if we relate HTML and CSS then Suppose that if you think in a simple way HTML is old house design (technique) and CSS is modern house design Technique but both are related to each other but when you skip one of these two (HTML and CSS) you can not design the web pages.

Let’s see How Does CSS Work?

The Ultimate Guide to CSS brings style to your web pages by interacting with HTML (HyperText Markup Language) elements.

which HTML might look like this

<!-- Heading content. -->
<h2>This is Heading</h2>

1 2	<!-- Heading content. --> <h2>This is Heading</h2>

furthermore, if you wanted to make Heading appear Green, font-size bigger and bold to people viewing your web page through a web browser, you’d use CSS code that looks like this:

h2 {
color:green;
font-size: 36px;
font-weight: bold;
}

h2 {

color:green;

font-size: 36px;

font-weight: bold;

}

As a result, In this case, “h2” (the Heading)- it’s the part of CSS code specifying, this HTML element will affect the CSS styling selector is written with the left of the curly bracket.

Which information is between curly brackets these are called the declaration, and between the curly, the bracket contains properties and values that are applied to the selector.

Therefore, we can understand the easy properties are those things like color, font size, padding, border, and margins. we can set the values for those properties.

As a result, of the above example, we can understand the easy color, font-size, font-weight are properties and green, 36px, bold is the values for properties.

<!-- Paragraph content. -->
<p>This is paragraph of summary</p>

1 2	<!-- Paragraph content. --> <p>This is paragraph of summary</p>

also, If you wanted to make Paragraph appear font-color brown, font-size smaller and normal to people viewing your web page through a web browser, you’d use CSS code that looks like this:

p {
color:brown;
font-size: 14px;
font-weight: normal;
}

p {

color:brown;

font-size: 14px;

font-weight: normal;

}

therefore, In the above example, we can understand the easy color, font-size, font-weight are properties and brown, 14px, normal is the values for properties.

Let’s Understand the Internal, External or Inline CSS?

The Ultimate Guide to CSS there is three methods to add that CSS code or style Sheet to your HTML pages.
1- Internal or Embedded stylesheet or CSS code
2- External Stylesheet or CSS code
3- Inline Stylesheet or CSS code

Therefore, when we use the External Style Sheet or CSS code method then stylesheet is saved as .css files and this external stylesheet can be used to determine the appearance of a whole website through one file (external stylesheet like as newshtylesheet.css) rather than adding individual instances of CSS code to every HTML element which you want to adjust.

hence, in order to external stylesheet which you use, you need to add external stylesheet in your .html files need to include a header section.

How to add Internal CSS code in HTML File

In HTML Document the internal style sheet is used to adding a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.

<head>
   <title>Internal css</title>
   <style>
      selector{
      Property:value;
      }
   </style>
   </title>
</head>

<head>

<title>Internal css</title>

<style>

selector{

Property:value;

}

</style>

</title>

</head>

consequently, let’s see the Example of Internal CSS Code

<head>
   <title>Internal CSS</title>
   <style>
      body{
      background-color:#9F6;
      }
      h1{
      color:#C39;
      text-align:left;
      text-transform:capitalize;
      text-decoration:underline;
      }
      P{
      font-size:20px;
      font-family:Verdana, Geneva, sans-serif;
      background-color:#FFF;
      color:#963;
      }
     
   </style>
</head>
<body>
 <h1>Example for Internal CSS</h1>
 <p>Cascading Style Sheet is a style language that defines layout of HTML 
 documents, CSS properties such as background, border, font, float, display,
 margin, opacity, padding, text-align, vertical-align, position etc.</p> 
</body>
</html>

<head>

<title>Internal CSS</title>

<style>

body{

background-color:#9F6;

}

h1{

color:#C39;

text-align:left;

text-transform:capitalize;

text-decoration:underline;

}

font-size:20px;

font-family:Verdana, Geneva, sans-serif;

background-color:#FFF;

color:#963;

}

</style>

</head>

<body>

<h1>Example for Internal CSS</h1>

<p>Cascading Style Sheet is a style language that defines layout of HTML

documents, CSS properties such as background, border, font, float, display,

margin, opacity, padding, text-align, vertical-align, position etc.</p>

</body>

</html>

How to add External stylesheet or CSS code in HTML File

1:- first create the stylesheet

first of all type CSS code into a plain text file (notepad, sublime text editor, etc.), and save the file with a .css extension (for example, newstyles.css).

also, Here’s an example of CSS code.

body {
    background-color: lightgrey;
    color: black;
    font-size: 14px;
     }
h1 {
    color: coral;
   }
#introduction {
    font-size: 14px;
   }
.text {
    color: orange;
   }

body {

background-color: lightgrey;

color: black;

font-size: 14px;

}

h1 {

color: coral;

}

#introduction {

font-size: 14px;

}

.text {

color: orange;

}

2:- Link to the Style Sheet from the HTML Documents

<!-- add style shet-->
<link rel="stylesheet" href="newstyles.css">

1 2	<!-- add style shet--> <link rel="stylesheet" href="newstyles.css">

the basic example of a web page using this stylesheet(newstyles.css) might look something like this:

<!DOCTYPE html>
<html>
  <head>
      <title>External style sheet example</title>
      <link rel="stylesheet" href="newstyles.css">
  </head>
  <body>
    <h1>MY heading </h1>
    <p id="introduction">Lorem Ipsum is simply dummy text of the printing.</p>
    <p class="text">This has a style applied via a class.</p>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>External style sheet example</title>

</head>

<body>

<h1>MY heading </h1>

<p id="introduction">Lorem Ipsum is simply dummy text of the printing.</p>

<p class="text">This has a style applied via a class.</p>

</body>

</html>

How to add Inline CSS code in HTML File

In the code below, we’ve added CSS by using inline styles. see the below-given example

<h2 style="color: green; font-size: 18px">Inline stylesheet heading</h2>
<p style="color: #efefef">This text has been styled using inline style sheets.</p>

1 2	<h2 style="color: green; font-size: 18px">Inline stylesheet heading</h2> <p style="color: #efefef">This text has been styled using inline style sheets.</p>

The Ultimate Guide to CSS

What is CSS? How Does It Relate to HMTL (Hypertext Markup Language)?

Let’s see How Does CSS Work?

Let’s Understand the Internal, External or Inline CSS?

How to add Internal CSS code in HTML File

How to add External stylesheet or CSS code in HTML File

How to add Inline CSS code in HTML File

Related Posts

About Author

admin