Level no.19
CSS
Lecture no.1
Introduction to CSS
CSS stands for Cascading Style Sheet. It has no boiler plate. It is used for describing the layout of the web pages within Hyper Text Markup Language. It is specifically designed to control over visual styling and layout of HTML elements. It allows designers and web developers to define how element should be displayed including fonts, background color, border, text-color and much more. By using CSS, you can achieve consistent and attractive visual design across your website and make user-friendly websites.There are three types of CSS, which are:
- Inline CSS
- Internal CSS
- External CSS
Syntax:
CSS style syntax rule based on selector, deceleration and property.
For example:
selector{
property: value;
}
For instance:
p{
color: red;
font-size: 20px;
}
Here 'paragraph' is selector and within curly brackets there are two deceleration (color: red;
font-size: 20px;) . Each deceleration includes a property which is color and font-size and with values
red and 20px.
Why we Use CSS?
It is used for designing web pages like layout and variations. It enables the a clear presentation between structure (HTML) and presentation (CSS) in web pages. This separation makes it easier to define structure without altering the underlying content (HTML).
Lets study CSS types in detail one-by-one.
1.Inline CSS:
Inline CSS is practice of including CSS styles directly within an HTML element's "style" attribute. CSS is used to define the visual presentation and layout of HTML elements on a web page.The style specified within in the inline CSS will only effect that specific element. It is used for making quick styles and changes styles to an individual element in which inline CSS applied..
Syntax:
<p style=" "> </p>
Code:
<!DOCTYPE html>
<html>
<head>
<title> Inline CSS </title>
</head>
<body>
<p style=" background-color: green; color: black; font-size: 100px;"> This is inline CSS
</p>
</body>
</html>
Output:
2.Internal CSS:
It is refers to include CSS styles directly within the <style> element within the <head> tag of an HTML element. You can define styles for specific HTML elements within the same HTML files, rather than using external CSS files.It is useful for small projects and used to define styles for specific elements within the single HTML file. Internal CSS is also known as embedded CSS.
Syntax:
<style>
p{
background-color: black;
color: silver;
font-size: 50px;
}
</style>
Code:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS </title>
</head>
<body>
<p> This is internal CSS example
</p>
</body>
</html>
Output:
3.External CSS:
External CSS is refers of separating your CSS style to HTML content by placing them in separate external files.For saving external files we use .css extension and contain all styling tools for visual presentation and layout of web-pages. The advantages of external CSS is Re-usability and Scalability, you can use same CSS file across multiple HTML files and for larger projects external CSS is more manageable than using any other CSS.
Code:
(HTML file)
<!DOCTYPE html>
<html>
<head>
<title>External CSS </title>
<link rel="stylesheet" href=" lec2.css">
</head>
<body>
<p> This is external CSS example
</p>
</body>
</html>
(CSS file)
p{
background-color: red;
}
Output:
Summary:
Placing styles inline is great for quick testing
Real sites always use external CSS
ID Attribute in HTML
The use of id attribute is to uniquely specify id to an HTML document.The value we assign to id element is must be unique within the HTML document, no element should have the same id value.You can use id attribute in internal CSS styling and for other purpose you can uniquely identify elements.For other purpose means, if your using one tag one or more times than id attribute is useful.
Syntax:
< any tag id=" "> syntax <tag closed>
<p id=" a"> Id attribute </p> ( you can assign any value to id)
Code:
<!DOCTYPE html>
<html>
<head>
<title>Id Attribute </title>
<style>
#a{
background-color: salmon;
}
}
#b{
color: aqua;
background-color: black;
}
}
</head>
<body>
<p>
<h1 id=" a">Id Attribute </h1>
<h1 id=" q "> Id Code </h1>
</p>
</body>
</html>
Output:
If you are using more than one CSS types at a time, which CSS have higher precedence?
Inline CSS have higher precedence than internal and external CSS, and internal CSS have lower precedence than internal but higher precedence than external, and external CSS have lower precedence than inline and internal CSS.
If you are using more than one CSS types at a time, how to use one CSS?
We use !important keyword. when we are using more than one CSS and want to prioritize one.
Summary:
CSS is incredibly powerful technology.
Comments
Post a Comment