CSS and Different Way to Bring CSS into The HTML File:
(1)Introduction to CSS:
website is one of the most important aspects of your brand's online presence. web design must be right. the website should be designed keeping in mind the users and should ensure that it provides a good user experience. css helps web developers to style the website so that the users can have a great user experience.
What is CSS?
CSS stands for Cascading Style Sheets.
it's used to create good-looking websites by describing how the HTML elements are displayed on the screen. it also controls the layout of the website.
Why CSS?
CSS is a core technology in web development.
CSS specifies the preparation of HTML documents.
This includes colors, backgrounds, fonts, spacing, animations, etc.
it works on all devices: desktop, tablet, mobile, etc.
CSS is lightweight and relatively easy to learn.
CSS along with HTML is an essential skill for web developers.
What can CSS do?
you can add new looks to your old HTML documents.
you can completely change the look of your website with only a few changes in CSS code.
Advantages of having CSS in our projects:
- CSS saves time
pages load faster
Easy maintenance
More advanced styles than HTML
Cross-Device Compatability
Global Web Standards
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS</title> </head> <body style="background-color: blue;"> <p style="color:rgb(226, 26, 90)">hello world</p> </body> </html>Different ways to bring CSS into projects :
we can add CSS to our projects in the following ways:
1.Inline styling
inline styling is a technique in HTML that allows you to apply style directly to HTML element using the style attribute. it is called "inline" because the style is applied directly to the element, in the same line of HTML code.
inline styles have the highest specificity, meaning that they will override any other styles that are applied to the same element.
it is also possible to use JavaScript to modify the style attribute of an element and change its styles dynamically.
2.Internal styling
Internal styling refers to the practice of using a style element within the head of an HTML document to define styles for the elements on the page. the style element should contain a list of CSS rules that specify the styles for the elements on the page.
to use internal styling, you should place the style element within the head of the HTML document, and include your CSS rules within the style element. you can then apply the styles to the elements on the page using CSS selectors.
3.External Styling
External styling refers to the practice of linking to an external css file from an HTML document using the link element. The link element should be placed within the head of the HTML document, and it shoul have a rel attribute with a value of "stylesheet" to indicate that it is linking to a style sheet.
To use external styling, you should create a CSS file and define your styles in that file. you can then link to the CSS file from your HTML document using the link element.
Different Way to Bring CSS into The HTML File:
Inline CSS
By using the inline CSS approach, CSS can be applied to a single element.
Another way to include style sheets in an HTML document is through inline CSS.
This strategy reduces same of the benefits of style sheets, so it is suggested that you use them sparingly.
Utilize the style attribute on the appropriate tag if you wish to use Inline CSS.
Advantages of Inline CSS:
Inline takes precedence over all other styles. Any styles defined in the internal and external style sheets are overridden by inline styles.
you can quickly and easily insert CSS rules into HTML, page, which is useful for testing or previewing changes and performing quick fixes on your website.
there is no need to create an additional file.
Disadvantages of Inline CSS:
Within inline CSS, quotations are not permitted. The browser will perceive the use of quote marks as the end of your style value.
● These styles can't be applied elsewhere.
● Because they are not saved in a single location, these styles are difficult to update.
● Pseudo-codes and pseudo-classes cannot be styled with inline CSS.
● Inline CSS does not provide browser cache advantages.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Sheet</title>
</head>
<body>
<!-- <p class="hello">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt, animi.</p> -->
<p style="color: aqua; font: size 25px; border: 3px solid brown">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt, animi.</p></body>
<p style="color: aqua; font: size 25px; border: 3px solid brown">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, quia?</p></html>
Internal CSS
● The internal CSS is used to add a unique style for a single document. ● It is defined in section of the HTML page inside the
Advantages of Internal CSS:
● IDs and classes can be used in internal style sheets. ● You do not need to upload numerous files. ● They might take precedence over outside style sheets.
Disadvantages of Internal CSS:
● They are useful for only the page they are specified on. ● Internal style sheets increase page load times.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal css</title>
<style>
.heading{
font-size: 25px;
color: rgb(167, 49, 49);
border: 5px solid red;
}
.pra{
color: rgb(56, 22, 135);
background-color: aqua;
border:5px solid red ;
}
</style>
</head>
<body>
<!-- internal css -->
<h1 class="heading">pw skills</h1>
<p class="pra">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sequi.</p>
<p class="pra">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, nemo.</p>
<p class="heading">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, temporibus?</p>
<h1 class="heading">Lorem, ipsum dolor.</h1>
</body>
</html>
External CSS:
List of concepts :
External CSS
Advantages and disadvantages of External CSS
Example
External CSS
● When you need to make changes to several pages, you often use the external style sheet. ● It is perfect in this situation because it enables you to alter just one file to alter the appearance of the complete website. ● It uses the tag on every page and the tag should be put inside the head section.
Advantages of External CSS:
● The style of several documents can be controlled from site by using them. ● Multiple HTML elements can have many documents, where classes can be created. ● To group styles in complex situations, selector and grouping methods are used.
Disadvantages of External CSS:
● Extra download is needed to import documents having style information. ● To render the document, the external style sheet should be loaded. ● Not practical for small style definitions.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Pw skills.css">
<title>External CSS</title>
</head>
<body>
<h1 class="heading">Pw skills</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, accusantium.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit, asperiores.</p>
<h2 class="heading">Footer of Pw skills</h2>
</body>
</html>