CSS: An Easy Introduction to Beginners


What is CSS

CSS, or Cascading Style Sheets, is a language used to style the appearance of web pages. Imagine a web page without CSS – it would just be plain text. CSS is what makes websites look visually appealing by adding colors, layouts, fonts, and other design elements.


Here is the example. The area labeled "HTML ONLY" shows how your website will seem if you use simply HTML, while the portion labeled "HTML WITH CSS" shows how your website will appear if you use HTML along with CSS.


Cool right!

Syntax of CSS (CSS in External file or Internal)
Selector {
    Property1: Value
    Property2: Value
}

EX:
p {
    color: blue;
    font-size: 24px;
}
Syntax of CSS (Inline)
<span style="property1: value; property2: value;"></span>

EX:
<span style="color: red; font-size: 40px;"></span>
what is selectors?

CSS selectors allow you to target specific HTML elements. You can select elements by tag name (e.g., h1, p), class (e.g., .container, .button), ID (e.g., #header, #footer), or other attributes.


How we can call CSS from HTML File?
There are 3 ways to include css styling in html file:

1. Inline CSS (Bad Practice: unmaintainability, problems with readability, and reusability)

index.html
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>My First WebPage</title>
</head>
<body>
    <p style="font-size: 35px;"></p>
</body>
</html>
2. Internal CSS

index.html
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>My First WebPage</title>
<style> 
    .custom-font-size {
        font-size: 35px;
    }
</style>
</head>
<body>
    <p class="custom-font-size"></p>
</body>
</html>
3. External CSS (Best Practice)

index.html
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>My First WebPage</title>
<link href="./main.css" rel="stylesheet"></link>
</head>
<body>
    <p class="custom-font-size"></p>
</body>
</html>
main.css
.custom-font-size {
    font-size: 35px;
}

Comments

Post a Comment

Popular posts from this blog

Host Your Node.js App on AWS EC2 Instance for Free in 2024

Image
Contents Introduction Prerequisites Launch an EC2 Instance Prepare the EC2 Instance Connect to the EC2 Instance Install Dependencies and Start Your App in instance terminal Access Your App Run your server in auto mode using pm2 Conclusion 1. Introduction Are you a developer looking to host your Node.js app on a reliable and scalable platform? Amazon Web Services (AWS) offers a variety of services to meet your hosting needs, including EC2 instances. In this tutorial, we will guide you through the process of hosting your Node.js app on an AWS EC2 instance for free using the AWS Free Tier. 2. Prerequisites Before we begin, make sure you have the following prerequisites in place: An AWS account. If you don't have one, sign up for free at https://aws.amazon.com/. Basic knowledge of Node.js.  3. Launch an EC2 Instance 1.      Log in to the AWS Management Console. 2.      Navigate to the EC2 service. 3.      Click on "Launch Instance" to start the instance creation process . 4.
Read more

GitCommandsPro Your Guide to Essential Git Commands in 2024

Image
Table of Content 1 Check git version 2 Configuration Settings 3 Initializing a repository 4 Staging files 5 Viewing the status 6 Committing the staged files 7 Skipping the staging area 8. Removing files 9 Renaming or moving files 10 Viewing the staged/unstaged changes 11 Viewing the history 12 Viewing a commit 13 Unstaging files (undoing git add) 14 Discarding local changes 15 Restoring an earlier version of a file      1.     Check git version git --version 2.     Configuration Settings Levels of defining this settings are System level -  apply to All Users of computer. Global – all repositories of the current user. Local – the current repository. Or a repository in the current folder.           Name  git config --global user.name "YOUR_NAME"          Email git config --global user.email YOUR_MAIL@gmail.com          Default Editor (for setting vscode) git config --global core.editor "code --wait"           To edit all the global settings (will open the d
Read more

SOAP Explained: With Javascript

What is SOAP? SOAP is like a set of rules that helps different computer programs talk to each other. Imagine you have two friends who speak different languages. SOAP is like a universal translator that helps them understand each other. Now, when these programs talk, they use a special type of text called XML. It's like a format that's easy for both programs to read, like having a conversation in a language that both friends understand. So, SOAP is kind of like a language translator for computers, and XML is the language they use to communicate. This way, even if two programs are running on completely different systems, they can still understand each other and share information. SOAP Request A SOAP request consists of a SOAP envelope that contains the SOAP header and the SOAP body. Here's a basic example of what a simple XML request in SOAP might look. <?xml version="1.0" encoding="UTF-8"?> <soapenv:Envelope     xmlns:soapenv="http://schemas
Read more