{"id":19,"date":"2024-10-18T03:05:15","date_gmt":"2024-10-18T03:05:15","guid":{"rendered":"https:\/\/techkubo.com\/css\/?p=19"},"modified":"2025-05-12T14:10:02","modified_gmt":"2025-05-12T14:10:02","slug":"css-introduction","status":"publish","type":"post","link":"https:\/\/techkubo.com\/css\/css-introduction\/","title":{"rendered":"CSS Introduction"},"content":{"rendered":"\n

What is CSS?<\/strong><\/h2>\n\n\n\n

CSS stands for Cascading Style Sheets<\/strong>. It’s a language used to style HTML elements, controlling things like the color, fonts, and layout of web pages. While HTML defines the structure and content, CSS focuses on how that content looks. CSS allows you to make a website visually appealing and easy to navigate, ensuring consistency across different pages.<\/p>\n\n\n\n

<\/p>\n\n\n\n

How to Add CSS to HTML<\/strong><\/h2>\n\n\n\n

There are three main ways to include CSS in your HTML:<\/p>\n\n\n\n

1. Inline CSS<\/strong><\/p>\n\n\n\n

This involves adding CSS directly to the HTML element using the style<\/code> attribute. This is useful for small, one-off style changes, but it’s not ideal for large websites.<\/p>\n\n\n\n

<p style="color: blue;">This text will be blue.<\/p><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
2. Internal CSS<\/strong><\/p>\n\n\n\n
Internal CSS is added inside the <style><\/code> tag in the <head><\/code> section of your HTML document. This method is great for styling a single page but becomes inefficient for websites with multiple pages.<\/p>\n\n\n\n
<head>\n  <style>\n    p {\n      color: red;\n    }\n  <\/style>\n<\/head>\n<body>\n  <p>This text will be red.<\/p>\n<\/body>\n<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
3. External CSS<\/strong><\/p>\n\n\n\n
This is the most common and efficient way to apply styles. You create a separate CSS file with a .css<\/code> extension and link it to your HTML file. This method is best for larger projects where you want the same styles to be applied across multiple pages.<\/p>\n\n\n\n
<head>\n  <link rel="stylesheet" href="styles.css">\n<\/head>\n<body>\n  <p>This text will be styled from an external CSS file.<\/p>\n<\/body><\/pre><\/div>\n\n\n\n
External CSS (styles.css):<\/strong><\/p>\n\n\n\n
p {\n  color: green;\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Example of CSS in HTML Code<\/strong><\/h2>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n  <style>\n    h1 {\n      color: navy;\n      font-size: 36px;\n    }\n\n    p {\n      color: darkgray;\n      font-family: Arial, sans-serif;\n      line-height: 1.6;\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <h1>Welcome to CSS<\/h1>\n  <p>This is a paragraph styled with CSS. Notice how the font, color, and size of both the heading and paragraph are controlled by CSS.<\/p>\n\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
CSS Labs<\/strong><\/h2>\n\n\n\n