CSS Basics and Advanced Topics in Urdu - Download Free PDF Notes
CSS Tutorial in Urdu PDF Free Download
Are you looking for a comprehensive and easy-to-follow guide on how to learn CSS in Urdu? If yes, then you have come to the right place. In this article, I will teach you everything you need to know about CSS, from the basics to the advanced topics. You will learn how to use CSS to style your web pages, create beautiful layouts, and add animations. By the end of this article, you will be able to write your own CSS code confidently and professionally.
Css Tutorial In Urdu Pdf Free Download
But before we dive into the details, let me tell you what is CSS and why you should learn it.
What is CSS?
CSS stands for Cascading Style Sheets. It is a language that describes how HTML elements should look on the web page. CSS can control the appearance, layout, colors, fonts, backgrounds, borders, margins, padding, and many other aspects of the web design. With CSS, you can make your web pages more attractive, consistent, and responsive.
CSS has many benefits for web developers and designers. Some of them are:
CSS separates the presentation from the content. This means that you can change the style of your web page without affecting the HTML structure. This makes your code more organized, reusable, and easy to maintain.
CSS saves time and bandwidth. You can write one CSS file and link it to multiple HTML pages. This way, you don't have to repeat the same style rules for each page. This also reduces the amount of data that needs to be downloaded by the browser.
CSS enhances accessibility and usability. You can use CSS to create different styles for different devices, screen sizes, resolutions, and preferences. This makes your web pages more adaptable and user-friendly.
How to use CSS?
There are three ways to use CSS in your web pages:
Let's see what each of these methods means and how they work.
Inline CSS is when you use the style attribute inside an HTML element to apply a specific style rule. For example:
<p style="color:red">This is a paragraph with inline CSS.</p>
This method is useful when you want to style a single element or a small part of your web page. However, it has some drawbacks:
It makes your HTML code messy and hard to read.
It increases the size of your HTML file and slows down the loading time.
It creates inconsistency and duplication in your style rules.
It makes your style rules hard to update and maintain.
Internal CSS is when you use the <style> tag inside the <head> section of your HTML document to define a set of style rules. For example:
<head> <style> p color: blue; h1 font-size: 36px; </style> </head>
This method is useful when you want to style a single web page or a small website. However, it has some drawbacks:
It still mixes the presentation with the content.
It still increases the size of your HTML file and slows down the loading time.
It still creates inconsistency and duplication in your style rules if you have multiple web pages.
It still makes your style rules hard to update and maintain if you have multiple web pages.
External CSS is when you use a separate file with the .css extension to store your style rules and link it to your HTML document with the <link> tag. For example:
// In style.css file p color: green; h1 font-size: 48px;
// In index.html file <head> <link rel="stylesheet" href="style.css"> </head>
This method is the most recommended and widely used way to use CSS. It has many advantages:
It separates the presentation from the content completely.
It reduces the size of your HTML file and improves the loading time.
It creates consistency and efficiency in your style rules across multiple web pages.
It makes your style rules easy to update and maintain across multiple web pages.
How to write CSS code?
To write CSS code, you need to understand the basic syntax and structure of CSS. A CSS rule consists of two parts: a selector and a declaration block. A selector is a way to target an HTML element or a group of elements that you want to style. A declaration block is a set of one or more declarations that define how the selected element(s) should look. A declaration consists of a property and a value, separated by a colon (:). A property is a specific aspect of the element's appearance that you want to change, such as color, font-size, margin, etc. A value is the specific setting for that property, such as red, 24px, 10px, etc. You can use semicolons (;) to separate multiple declarations within a declaration block. You can use curly braces () to enclose a declaration block. For example:
p color: red; font-size: 24px; margin: 10px;
This CSS rule selects all <p> elements in the HTML document and applies three declarations to them: change their color to red, change their font size to 24 pixels, and add 10 pixels of margin around them.
To write good CSS code, you should follow some rules and best practices. Some of them are:
Use meaningful and consistent names for your selectors, properties, and values.
Use comments to explain your code and make it easier to understand.
Use indentation and spacing to make your code more readable and organized.
Use lowercase letters for your selectors, properties, and values.
Use quotation marks for values that contain spaces or special characters.
Use shorthand properties to combine multiple declarations into one.
Avoid using inline CSS and internal CSS as much as possible.
Avoid using !important modifier unless absolutely necessary.
Avoid using too many or too specific selectors that can affect the performance and maintainability of your code.
How to create CSS layouts?
and advanced concepts of CSS layout design. A CSS layout is a way to arrange HTML elements on the web page in a logical and aesthetic way. There are many techniques and tools that you can use to create CSS layouts, such as box model, display, position, flexbox, grid, etc. Let's see what each of these concepts means and how they work.
The box model is a fundamental concept of CSS layout design. It describes how every HTML element is represented as a rectangular box that has four layers: content, padding, border, and margin. The content layer is the actual content of the element, such as text or image. The padding layer is the space between the content and the border. The border layer is the line that surrounds the padding and the content. The margin layer is the space between the border and the other elements. You can use CSS properties to control the size and spacing of each layer of the box model. For example:
p width: 200px; height: 100px; padding: 20px; border: 5px solid black; margin: 10px;
This CSS rule sets the width and height of the content layer of all <p> elements to 200 pixels and 100 pixels respectively. It also adds 20 pixels of padding around the content, 5 pixels of solid black border around the padding, and 10 pixels of margin around the border.
The display property is a CSS property that determines how an HTML element is displayed on the web page. It can change the display mode of an element from block to inline or vice versa. A block-level element is an element that occupies the entire width of its parent element and creates a new line before and after itself. Examples of block-level elements are <div>, <p>, <h1>, etc. An inline-level element is an element that occupies only the space needed by its content and does not create a new line before and after itself. Examples of inline-level elements are <span>, <a>, <img>, etc. You can use the display property to change the display mode of an element from block to inline or vice versa. For example:
p display: inline;
This CSS rule changes the display mode of all <p> elements from block to inline. This means that they will not occupy the entire width of their parent element and will not create a new line before and after themselves.
The position property is a CSS property that determines how an HTML element is positioned on the web page. It can change the position of an element from static to relative, absolute, fixed, or sticky. A static position is the default position of an element that follows the normal flow of the document. A relative position is a position that is relative to its original position in the normal flow. You can use the top, right, bottom, and left properties to offset an element from its original position. An absolute position is a position that is relative to its nearest positioned ancestor element (an element that has a position other than static). You can use the top, right, bottom, and left properties to place an element anywhere within its ancestor element. A fixed position is a position that is fixed to the viewport (the visible area of the browser window). You can use the top, right, bottom, and left properties to place an element anywhere within the viewport. A sticky position is a position that is based on the user's scroll position. It behaves like a relative position until a certain scroll point is reached, then it behaves like a fixed position. You can use the top, right, bottom, and left properties to specify the scroll point where an element becomes sticky. For example:
div position: relative; top: 50px; left: 100px;
This CSS rule changes the position of all <div> elements from static to relative. It also moves them 50 pixels down and 100 pixels right from their original position in the normal flow.
Flexbox is a CSS layout module that allows you to create flexible and responsive layouts with ease. It is based on the concept of flex containers and flex items. A flex container is an element that has the display property set to flex or inline-flex. It can contain one or more flex items, which are the direct children of the flex container. A flex item is an element that can grow or shrink to fit the available space in the flex container. You can use various CSS properties to control the direction, alignment, order, size, and spacing of the flex items within the flex container. For example:
div display: flex; flex-direction: row; justify-content: space-between; align-items: center;
This CSS rule makes all <div> elements flex containers. It also sets the direction of the flex items to row (horizontal), the horizontal alignment of the flex items to space-between (equal spacing between them), and the vertical alignment of the flex items to center (centered along the cross axis).
How to add CSS animations?
CSS animations are a way to create dynamic effects on your web pages by changing the CSS properties of an element over time. You can use various CSS techniques and tools to create CSS animations, such as transitions, transforms, keyframes, etc. Let's see what each of these techniques and tools means and how they work.
Transitions are a way to create smooth changes between two or more CSS property values. You can use the transition property to specify which property or properties you want to animate, how long the animation should last, how fast the animation should change, and what kind of easing function you want to use. For example:
p color: blue; transition: color 2s ease-in-out; p:hover color: red;
This CSS rule makes all <p> elements change their color from blue to red when you hover over them. It also adds a transition effect that lasts for 2 seconds, changes at a constant speed, and has an ease-in-out easing function (starts and ends slowly and accelerates in the middle).
Transforms are a way to transform (modify) the shape, size, position, or orientation of an element. You can use the transform property to apply one or more transformation functions to an element, such as translate (move), scale (resize), rotate (spin), skew (tilt), etc. For example:
p transform: translate(100px, 50px) scale(2) rotate(45deg) skew(-10deg);
This CSS rule applies four transformation functions to all <p> elements: move them 100 pixels right and 50 pixels down, resize them by a factor of 2, spin them by 45 degrees clockwise, and tilt them by -10 degrees along the x-axis.
Keyframes are a way to define animation sequences by specifying the CSS property values at different points in time. You can use the @keyframes rule to create a custom animation name and a set of keyframes. Each keyframe consists of a percentage value that indicates the position in time and a declaration block that defines the CSS property values at that point. You can use the animation property to apply your custom animation name to an element and control other aspects of the animation, such as duration, timing function, iteration count, direction, etc. For example:
@keyframes bounce 0% transform: translateY(0); 50% transform: translateY(-100px); 100% transform: translateY(0); p animation: bounce 1s infinite alternate;
This CSS rule creates a custom animation name called bounce and defines three keyframes for it: at 0%, move all <p> elements to their original position; at 50%, move them 100 pixels up; at 100%, move them back to their original position. It also applies the bounce animation to all <p> elements and sets the duration to 1 second, the iteration count to infinite, and the direction to alternate (reverse every other iteration).
Here are some frequently asked questions about CSS:
What is the difference between CSS and HTML?
How can I link a CSS file to an HTML file?
How can I use CSS to change the font of an HTML element?
How can I use CSS to center an HTML element?
How can I use CSS to create a responsive web page?
Here are the answers:
CSS and HTML are two different languages that work together to create web pages. HTML is a markup language that defines the structure and content of a web page. CSS is a style sheet language that describes how HTML elements should look on the web page.
You can link a CSS file to an HTML file by using the <link> tag inside the <head> section of your HTML document. For example: <link rel="stylesheet" href="style.css">. This will link the style.css file to your HTML file.
You can use CSS to change the font of an HTML element by using the font-family property. For example: p font-family: Arial; . This will change the font of all <p> elements to Arial.
You can use CSS to center an HTML element by using the margin property. For example: p margin: 0 auto; . This will center all <p> elements horizontally by setting their left and right margins to auto.
You can use CSS to create a responsive web page by using media queries. Media queries are a way to apply different style rules based on the device, screen size, resolution, or preference of the user. For example: @media (max-width: 600px) p font-size: 18px; . This will change the font size of all <p> elements to 18 pixels when the screen width is less than or equal to 600 pixels.