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

Formatting MySQL Dates

Image
MySQL's DATE_FORMAT() function provides a wide range of format codes that you can use to represent date and time values in various formats.  It allows you to format a date or datetime value as a string using custom formatting. DATE_FORMAT(date, format) date: The date or datetime value you want to format. format: A string specifying the desired format for the output. This string can include special format codes that represent various components of the date and time (e.g., %Y for the year, %m for the month, %d for the day, %H for the hour, %i for the minute, %s for the second, etc.). SELECT DATE_FORMAT('2023-09-03', '%M %d, %Y'); // returns 'September 03, 2023'. Here is a list of commonly used format codes along with examples: %Y: Four-digit year (e.g., '2023'). %y: Two-digit year (e.g., '23' for 2023). %m: Month (01-12). %c: Month (1-12). %d: Day of the month (01-31). %e: Day of the month (1-31). %H: Hour (00-23). %h: Hour (01-12). %I: Hou
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

Mastering MySQL Timestamps

Image
Timestamps in MySQL are used to represent date and time values, and they can store information with various levels of precision. MySQL provides several data types for working with timestamps, including DATE, TIME, DATETIME, TIMESTAMP, and YEAR. Let's focus on the two most commonly used timestamp data types in MySQL : DATETIME and TIMESTAMP . These types store both date and time information, but they have some differences in behavior. 1. DATETIME: The DATETIME data type stores date and time values in the format 'YYYY-MM-DD HH:MM:SS'. It does not automatically convert stored values to the server's time zone. The values are stored as provided. You can specify a time zone when inserting data into a DATETIME column, but the time zone information is not used for calculations. Example: '2023-09-03 14:30:00' 2. TIMESTAMP: The TIMESTAMP data type also stores date and time values in the format 'YYYY-MM-DD HH:MM:SS'. Unlike DATETIME, TIMESTAMP values
Read more