HTML CSS

❮ Prev Next ❯

You should always remember that Web pages have two very distinct parts: content and presentation. Content is the information that you put on your Web page. This could be the block of text or the numbers and statistics that you have tabulated and computed.

Presentation, on the other hand, would include every element that would dictate how you present your content to your reader. This would include the layout, colors, fonts and even the formatting you use for each and every element in your Web page.

HTML takes care of how you structure content on your site, while CSS takes care of how you present your content.

Think of it as using a word processor to type a document. You first write your title, your headings, your paragraphs. You can use lists and tables to make your information even easier to read and understand. This is what HTML does.

After typing everything, you can then prettify or improve your document by assigning different properties to your headings, changing the font color for your title, changing your paragraph's font from Times New Roman to Verdana. This is what CSS does.

What is CSS?

The CSS (Cascading Style Sheets) is a language used to define the presentation of an HTML document. It separates the document's content from its presentation, allowing developers to style the page layout, fonts, colors, and other visual aspects of a website. CSS makes it easier to maintain and update the look and feel of a website without changing the underlying HTML code.

Rules of CSS:

The CSS has has formular that you have to follow while writting it, the formular are: 

<style>
  selctor{
    property :value;
    property :value;
  }
</style>

Using CSS:

There are three ways to use CSS in HTML:

  • Inline CSS, we can achieve this by using style attribute to apply it to the element
  • Internal CSS, we can achieve this by using <Style> element inside <head> tag
  • External CSS, we can achieve this by creating a new file with the extension of .css and use <link> tag to connect it with the HTML file.

Here are some examples of basic HTML Comment Tags:

Inline CSS:

You can define CSS styles directly on an HTML element using the "style" attribute. Here's an example:

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>Inline CSS</p>
        <p style="color: red;">This text will be red.</p>
        <p style="color: maroon;">This text will be maroon.</p>
        <p style="color: brown;">This text will be brown.</p>
      </body>
  </html>

Internal CSS:

You can define CSS styles in the <head> section of an HTML document using the <style> element. Here's an example:

internal style sheet, introduced by the <style> tag. This must be placed in the <head> section of your Web page. Use the following syntax: 

<!DOCTYPE HTML>
    <html>
      <head>
      <style>
      P{
        font-family :sans-serif;
        font-size :20px;
        color :blue;
      }
      </style>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>This text will be blue with size of 20.</p>
      </body>
  </html>

External CSS:

External CSS allows you to define CSS styles in a separate file and link it to an HTML document using the <link /> element. This method is useful when you want to apply the same styles to multiple pages. Here's an example:

You can use the following code to do this: 

<link rel="stylesheet" type="text/css"  href="/styles.css" />

Place this code in the <head> section of your page. Additionally, you can use the

Example 

<!DOCTYPE HTML>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" type="text/css"  href="/styles.css" />
      <title>Title of the Document</title>
    </head>
    <body>
      <h1>Welcome to my Coding Koleji</h1>
      <p>This text will be red and have a font size of 20 pixels.</p>
    </body>
</html>

In this example, we've linked the styles.css file to our HTML document using the <link> element with the "rel" attribute set to "stylesheet" and "type" attribute set to "text/css" and the "href" attribute set to the file path of the styles.css file. The HTML elements in our document will now be styled according to the CSS rules defined in the styles.css file.

here is an explanation of how to create a styles.css file and link it to an HTML document:

Step 1: Creating the styles.css file:

To create a styles.css file, you can use a text editor such as Notepad, Sublime, or VS Code. Simply create a new file and save it with the name styles.css (or any other name of your choice) and the file extension .css.

Step 2: Writing or past the below CSS rules in the styles.css file:

In the styles.css file, you can write CSS rules to style the HTML elements in your HTML document. Here's an example: 

<style>
  h1{
    font-size :20px;
    color :blue;
  }
  P{
    font-size :32px;
    color :green;
  }
</style>

In this example, we've defined CSS rules for the <h1> and <p> elements, setting their color and font size. You can add as many CSS rules as you need for your website.

Comment in CSS

Comments are not markup. It does, however, provide information about CSS that makes it easier to maintain. This is especially helpful when two or more developers are coding the same CSS file

Create a CSS comment by using the following syntax: 

*/This is a sample comment. You can put whatever you want here. /*

each CSS code you place in between this comment code will not effect your webpage or it will not be apply to the html file.

You have just learn a valuable topic eventhough you will learn alot on the CSS part, lets learn Links in the next chapter.

❮ Prev Next ❯