CSS allows you to define styles for web pages. CSS stands for Cascading Style Sheets.
It can be used to style text, change colors, font size, etc., as well as create layout – for example, create columns, sidebars, navigation menus, etc.
- CSS uses rules to style elements.
- A rule is a group of style declarations.
- An example rule could define all paragraphs to be red and large.
- The style declarations have the following syntax:
property: value;Copy - Each declaration specifies a property of the element(s) we are targeting, then a value that we’d like to give the property.
How to Add CSS in HTML?
You can add CSS to a web page using either one or all of the following options. Now, let’s explore these three methods in detail.
How to Use Inline Styles in HTML for Quick Styling Changes
With inline CSS, HTML designers can define styling information within the HTML element’s tag using the “style” attribute. Inline styles are a quick and easy way to add styling to HTML elements. Inline styles allow you to apply a unique style to one element at a time, without having to create an external style sheet. This can be useful for making quick changes or testing out different styling options.
<p style="color: red; font-size: 20px;">This paragraph will appear in red and have a font size of 20px.</p>
In this example, we have used three CSS declarations (color, font-size) within our inline style attribute.
Code:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">I am a Blue H1 heading</h1>
<h1 style="color:blue;">I am a Blue H6 heading</h1>
<p style="color:blue;">I am a Blue Paragraph</p>
</body>
</html>How to Use Internal CSS Styles in HTML for Quick Styling Changes
In Internal CSS, HTML designers can define styling information within the <style> </style> tags in the <head> </head> section of the HTML page with the help of class and id references.
Code:
<!DOCTYPE html>
<html>
<head>
.bluecolor {
color : blue ;
}
</head>
<body>
<h1 class = " bluecolor "> I am a Blue H1 heading </h1>
<h1 class = " bluecolor "> I am a Blue H6 heading </h1>
<p class = " bluecolor "> I am a Blue Paragraph </p>
</body>
</html>
How to Use External CSS Styles in HTML for Quick Styling Changes
As the name suggests, External CSS can be applied to a webpage by defining all the CSS information in an external CSS file which is saved by the extension .css and can be imported with the <link></link> tag in the HTML file where the styling needs to be applied.
Code:
.bluecolor{
color:blue;
}Now we will add the below content in the HTML file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyles.css">
</head>
<body>
<h1 class = " bluecolor "> I am a Blue H1 heading </h1>
<h1 class = " bluecolor "> I am a Blue H6 heading </h1>
<p class = " bluecolor "> I am a Blue Paragraph </p>
</body>
</html>The above code will produce the following output in the browser:
How to Embed a CSS File in Your HTML Document
In order to embed a CSS file in an HTML document, the following steps should be taken:
1. Create a new .css file and save it in the same directory as your HTML document.
2. Add the necessary styling rules to the .css file.
3. In your HTML document, add a element inside of the element that points to your .css file:
4. Refresh your browser window and you should see that the styling rules from your .css file have been applied to your HTML document.
What is the Difference Between Internal and External CSS?
Internal CSS is a style sheet that is written within the HTML document, while external CSS is a style sheet that is written in an external file and linked to the HTML document
Other benefits from linking a CSS file to an HTML document are:
- Consistent design. Maintains formatting and design consistency throughout the website. A single adjustment on CSS rules can be applied universally to multiple areas of a website.
- Faster loading time. It only requires a single CSS file to style all HTML files. With fewer strings of code, a website can load faster. The site will also cache the CSS file for your visitors’ next visit.
- Improve SEO. Storing CSS styles in another file makes the HTML file more concise and organized. As a result, the website will have a cleaner and more lightweight code, which results in better crawlability by search engines.
Conclusion
Embedding CSS rules to HTML elements can be time-consuming and energy-wasting. Luckily, external style sheets make the process more efficient.
Lecture 3
How to Create a Simple Image Gallery Using HTML, and CSS In Urdu
Showing off a collection of images on your website? Learn how to do so with a basic image gallery that uses a minimum of code
Lecture 4
In today’s digital age, effective communication is key to building strong connections with your website visitors. One of the most essential tools for facilitating this interaction is a contact form. By incorporating a contact form into your website, you provide a convenient and secure way for users to reach out to you. In this short article, we will guide you through the process of creating a contact form using HTML, empowering you to enhance user engagement and streamline communication.
Contact form In HTML:
To begin, open your preferred text editor and create a new HTML file. Start by setting up the basic structure of your webpage using HTML tags. Within the body section, we will build the contact form that will capture user input.
Form Elements:
To create a functional contact form, we need to include a few essential form elements. First, add a `<form>` tag to encapsulate the form content. Within the form, include an `<input>` element for the user’s name, email address, and message. Use the `type` attribute to specify the input type, such as “text” for name and email, and “textarea” for the message. Additionally, assign unique `id` attributes to each input field for easy identification.
Validation and Submission:
To ensure the accuracy of user input, we can implement simple validation using HTML attributes. For example, the `required` attribute can be added to the name and email fields to make them mandatory. Additionally, the `pattern` attribute can be used to enforce specific input formats, such as a valid email address.
To enable form submission, include a `<button>` element within the form and set its `type` attribute to “submit”. This button will trigger the form submission when clicked.
Lecture 5
different types of Selectors in CSS
CSS selectors are used to select specific HTML elements and apply styles to them. There are several types of selectors in CSS, each with its own unique way of targeting elements. In this blog, we’ll explore the different types of selectors in CSS and how they work.
1. Element Selector
The element selector targets all instances of a specific HTML element. For example, the following CSS rule targets all paragraphs in an HTML document:
p {
color: red;
}In the vast world of web development, understanding the element selector is like having a key that unlocks endless possibilities. If you’re a content creator looking to enhance the visual appeal and functionality of your website or application, mastering the element selector is an essential skill. In this comprehensive tutorial, we will guide you through the ins and outs of the element selector, providing you with the knowledge to take your web development skills to new heights.
One of the key aspects of the element selector is its ability to target specific elements based on their tag names, classes, or IDs. We’ll explore each of these techniques in detail, allowing you to select and manipulate elements with precision. Whether you want to style a specific paragraph, apply changes to a particular button, or target a unique element on your webpage, you’ll have the knowledge to do so effectively.
2. Class Selector
The class selector targets HTML elements with a specific class attribute. Classes are used to group elements with similar styles. For example, the following CSS rule targets all elements with the “button” class:
Lecture 6
Lecture 7
Lecture 8
Lecture 9
[…] Previous: CSS Free Course In Pakistan […]