Scribd
Upload
11 views8 pages

ASP.NET CSS Basics for Beginners

The document is an ASP.NET tutorial focused on CSS, covering three types of style sheets: inline, internal, and external. It explains how to apply styles to HTML elements using various methods and provides code examples for each type. Additionally, it introduces dynamic HTML pages that integrate HTML, JavaScript, and CSS for interactive web experiences.

Uploaded by

ankitshaw052003.work
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views8 pages

ASP.NET CSS Basics for Beginners

The document is an ASP.NET tutorial focused on CSS, covering three types of style sheets: inline, internal, and external. It explains how to apply styles to HTML elements using various methods and provides code examples for each type. Additionally, it introduces dynamic HTML pages that integrate HTML, JavaScript, and CSS for interactive web experiences.

Uploaded by

ankitshaw052003.work
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

[Link] Tutorial By Coder Baba [Link].

com/coderbaba

[Link] Tutorial-2022

Crash Course for Beginners (Complete Course)


Become ZERO to HERO in [Link]
Day 8 Agenda: Class #08

Topics (What’s in it for you)

Introduction to CSS

✓ What is CSS

✓ Inline Style Sheets


✓ Internal Style Sheets
✓ External Style Sheets

Full Video Tutorial: Watch Here

1
[Link] Tutorial By Coder Baba [Link]/coderbaba

Cascading Style Sheets (CSS): These are used for describing how Html Elements must be presented on the
browser, so by using CSS we can give a consistent look for all pages in a Web Site. We can define CSS for Html
Elements in 3 different ways:
1. Inline Style Sheets
2. Internal Style Sheets
3. External Style Sheets

Inline Style Sheet: in this case we define style for an Html Element by using its style attribute i.e. every Html
Element has this style attribute to define style for that element.

[Link]

<!DOCTYPE html>
<html>
<head> <title>In-Line Style Sheets</title> </head>
<body>
<h1 style="text-align:center;text-decoration:underline;color:red;background-
color:yellow;text-decoration-color:blue"> Coder Baba </h1>
<p style="text-align:justify;text-indent:50px;font-size:larger;color:green;">We are
pioneers in IT Training since last 1 years and till now we have trained more than
100 people in various <p>
<p style="text-align:justify;text-indent:50px;font-size:larger;color:green;">We are into
recruitments also since last 1 years and placed more than 30 people into big MNC's like
TCS, Tech Mahindra, Google, Microsoft, contact our placement wing Coder Baba.</p>
<h1 style="text-align:center;text-decoration:underline;color:red;background-
color:yellow;text-decoration-color:blue"> Coder Baba Excellence In IT Training</h1>
</body>
</html>
Syntax of using Style attribute:
style="name 1:value 1;name 2:value 2;......;name n:value n"
: => Assignment Operator
; => Separator
Note: Inline style sheets are easy and simple to use but the drawback is, as we are applying style to an element by
using it's style attribute, the style we define to an element will be specific to that element only but can't be used
on other elements of the same type also and this is the reason why we have defined style for 2 <h1> elements and
2 <p> elements separately even if the style is same.
Internal Style Sheets: To overcome the problem's with In-Line Style Sheets we use Internal Style Sheets and in this
case we define style for Html Elements in the <head> section of a Web Page by using the <style> tag so that the
style gets applied to all instances of that Html Element for which the style is defined.

2
[Link] Tutorial By Coder Baba [Link]/coderbaba

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Internal Style Sheets</title>
<style>
h1 { text-align:center;text-decoration:underline;color:red;background-color:yellow;
text-decoration-color:blue }
p { text-indent:50px;color:green;font-size:larger;text-align:justify }
</style>
</head>
<body>
<h1> Coder Baba </h1>
<p>We are pioneers in IT Training since last 1.5 years and till now we have trained
more than 1000 people in various domains like .Net, Java, PHP, Python, Hadoop, etc.</p>
<p>We are into recruitments also since last 1 years and placed more than 1000 people
into big MNC's like TCS, Tech Mahindra, Google, Microsoft, etc </p>
<h1>Excellence In IT Training</h1> </body>
</html>
Note: In the above case we defined style for <h1> and <p> Elements in the <head> section of our Web Page so that
they get applied to all the <h1> and <p> Elements used under the page.
While defining style for any particular html element, it is possible to define multiple styles for that
element by giving a name to element's style, but in this case we need to apply that style explicitly to that elements
by using class attribute.

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Internal Style Sheets</title>
<style>
[Link] { text-align:center;text-decoration:underline;color:red;background-
color:yellow;text-decoration-color:blue }
[Link] { text-align:right;color:aqua;background-color:grey; }
p.style1 { text-align:justify;text-indent:50px;color:green; }
p.style2 { text-align:justify;text-indent:50px;font-size:larger;color:tomato; }
</style>
</head>
<body>
<h1 class="header"> Coder Baba </h1>
<p class="style1">We are pioneers in IT Training since last 1.5 years and till now we have trained more than
1000 poeple in various domains like .Net, Java, PHP, Python, Hadoop, etc.</p>
<p class="style2">We are into recruitments also since last 1 years and placed more than 221 people into big
MNC's like TCS, Tech Mahindra, Google, Microsoft, etc. For more information on placements, contact our
placement cell.<p>
<h1 class="footer">Excellence In IT Training</h1>

3
[Link] Tutorial By Coder Baba [Link]/coderbaba

</body>
</html>
In the above code we have defined 2 styles for <h1> element only and then we applied them explicitly to
each <h1> element by using class attribute, but in this case those 2 styles can be applied only on <h1> but not on
any other element. To overcome the above problem we can define generic named styles and apply them to any
element by using the class attribute only.

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Internal Style Sheets</title>
<style>
.header { text-align:center;text-decoration:underline;color:red;background-
color:yellow }
.subheading { text-decoration:underline;color:brown;text-decoration-color:lime }
.footer { text-align:right;color:aqua;background-color:grey; }
</style>
</head>
<body>
<h1 class="header">Hello World</h1>
<h2 class="header">Hello World</h2>
<h3 class="subheading">Hello World</h3>
<h4 class="subheading">Hello World</h4>
<h5 class="footer">Hello World</h5>
<h6 class="footer">Hello World</h6>
</body>
</html>
In the above code we have defined 3 generic styles i.e. "header", "footer" & "subheading", and then
applied the them to required header elements. We can also define style for multiple Html Elements at the same
time by listing those elements in a comma separated list.

[Link]

<!DOCTYPE html>
<html>
<head>
<title>In-Line Style Sheets</title>
<style>
h1, h2 {
text-align: center;
color: red;
background-color: yellow
}

h3, h4 {
text-align: right;
color: blue;
background-color: grey

4
[Link] Tutorial By Coder Baba [Link]/coderbaba

h5, h6 {
text-align: left;
color: green;
background-color: lightgrey;
text-decoration: underline
}
</style>
</head>
<body>
<h1> Coder Baba </h1>
<h2> Coder Baba </h2>
<h3> Coder Baba </h3>
<h4> Coder Baba </h4>
<h5> Coder Baba </h5>
<h6> Coder Baba </h6>
</body>
</html>

External Style Sheets: The drawback with in-line styling is we need to define style for each and every element
separately, and the drawback with internal styling is we need to define styles in each and every page which has 2
problems:
1. Even though we want to use the same style for similar elements in different web pages, still we need to
write the code for multiple times which doesn't provide re-usability.
2. Increases the size of web page and also clients can view our code in their browsers by using “View Page
Source” option.

We can overcome the above problems by using “External Style Sheets” i.e. in this case we write styles for
html elements under a separate file which is saved with “.css” extension and then we can link that “.css” file with
the required Web Page as following: <link rel="stylesheet" href="name of .css file" />
To test external style sheets do the following:

Step 1: Write the below code in notepad and save it with the name “[Link]”.

fieldset {
background-color:lightgrey;font-size:30px;color:blue;width:60%;border:dotted green 5px
}
h1 {
background-color: yellow; color: red; text-align: center;border-style: double; border-
width: thick;
}
.header {
text-align:center;background-color:lightgrey;color:blue
}
.footer {
text-align:right;background-color:lightgrey;color:green
}
[Link] {
background-color:tan;color:green;text-decoration:underline
}
h4, h5, h6 {
background-color: tan; color: blue; text-align: center;border-style: dashed; border-
color: white;

5
[Link] Tutorial By Coder Baba [Link]/coderbaba

}
[Link] {
text-align: justify; text-indent: 50px;
}
[Link] {
color: green; text-transform: capitalize; border-style: groove;border-top-width: 5px;
border-right-width: 5px;border-bottom-width: 5px; border-left-width: 5px;
}
Step 2: Now write the below code in notepad and save it as “[Link]”.

<!DOCTYPE html>
<html>
<head>
<title>External Style Sheets</title>
<link rel="StyleSheet" href="[Link]" />
</head>
<body>
<h1> Coder Baba </h1>
<h2 class="header">Building Students IT Carrier</h2>
<p class="normal">
Coder Baba is an entrepreneur armed with a noble vision to make a difference
in the career
aspirations of the students.
</p>
<h3 class="subheading">Our Mission</h3>
<p class="special">
To create and provide innovative, quality educational environments and
opportunities via
affordability fostering the society to grow, thrive, and prosper.
</p>
<fieldset>
<legend>Contact Us</legend>
Phone No: 1122 3344 <br />
What's App: 9988776655 <br />
Email: support@ [Link] <br />
Website: [Link] <br />
</fieldset>
<h2 class="footer">Excellence In IT Training</h2>
</body>
</html>

Dynamic Html Page: It's a combination of Html, Java Script and CSS.

6
[Link] Tutorial By Coder Baba [Link]/coderbaba

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Web Page</title>
<script>
function ChangeBlue() {
var element = [Link]("head")
[Link] = "Excellence In IT Training";
[Link] = "blue";
[Link] = "grey";
}
function ChangeRed() {
var element = [Link]("head")
[Link] = "Coder Baba";
[Link] = "red";
[Link] = "yellowgreen";
}
</script>
<style>
h1 {
text-align: center;
background-color: yellowgreen;
color: red
}
</style>
</head>
<body>
<h1 id="head" onmouseover="ChangeBlue()" onmouseout="ChangeRed()">
Coder Baba
</h1>
</body>
</html>

7
[Link] Tutorial By Coder Baba [Link]/coderbaba

Common questions

Powered by AI

Inline CSS is applied directly within an HTML element using the style attribute. It is simple and straightforward but lacks reusability across different HTML elements. Internal CSS is defined within the head section of an HTML document using the style tag, which allows for styles to be reused inside the same page but not across different pages. This can result in increased page size and duplication of code across multiple pages, which affects maintenance and efficiency. External CSS is stored in separate CSS files linked to HTML documents, promoting code reusability across multiple pages, reducing the page size, and hiding CSS code from users viewing with 'View page source.' External stylesheets solve the efficiency issues present in inline and internal styles by promoting reusability and maintainability .

Using class attributes in CSS allows designers to apply multiple styles defined within a stylesheet to different HTML elements. This enhances flexibility and reusability because a single class can be applied to various HTML tags, allowing for consistent styling without repeating style definitions. By defining generic named styles within a CSS document and using class attributes in HTML elements, developers can ensure uniform styling across multiple elements and pages, which promotes maintainability and reduces redundancy .

Developers face limitations with inline styles due to their lack of reusability and increased redundancy. Each element must have its style defined individually, leading to increased page size and maintenance complexity. Inline styles are difficult to manage and adapt for consistency across a site. These issues can be mitigated by using internal or external stylesheets, centralizing style definitions, and enabling reusable, maintainable styles. Applying CSS classes instead of inline styles allows styling styles to be reused across similar elements, addressing the static nature of inline styles .

Cascading rules in CSS determine which style is applied when there are multiple declarations for the same element. The cascade follows an order of precedence: inline styles have the highest priority, followed by internal styles, and lastly external styles. Within a stylesheet, specificity rules—calculate based on the element, class, and ID selectors—further influence style application. More specific selectors take precedence over less specific ones. This cascading model, influenced by source location and specificity, allows web designers to precisely control the application of styles while ensuring a structured fallback system .

External stylesheets are beneficial in large-scale web development because they enhance maintainability and efficiency. A single external CSS file can be linked to multiple webpages, ensuring styles are uniformly applied across all resources, which reduces redundancy and duplication of code. This leads to smaller webpage sizes and faster load times, as the same styles are reused instead of being redefined for every page. Additionally, external stylesheets keep the HTML clean and separate content from presentation, enhancing readability and allowing for easier updates .

Separating content and style enhances usability and maintainability by creating a cleaner, more organized code base. Content is managed within HTML files, while styles are defined in CSS files. This separation allows developers to make style changes without altering the content structure, facilitating easier maintenance and updates of appearance without modifying the underlying content structure. It also improves usability by enabling web designers to adjust user interfaces according to accessibility needs or different devices without rewriting the entire HTML. This division promotes a modular approach to web development, where content and style can evolve independently, allowing for cross-team collaboration .

Specificity in CSS refers to the hierarchy of rules that the browser follows to determine which styles should be applied to an HTML element when there are conflicting styles. Specificity is calculated based on the source and type of selectors used: IDs have the highest specificity, followed by classes, and then element selectors with the lowest. Inline styles have the highest priority over all types of selectors. This system enables designers to target elements precisely, overriding more general styles when needed, and controlling the element's appearance effectively across different contexts .

Internal stylesheets can be advantageous in scenarios where a web developer needs to quickly apply styles specific to a single webpage without worrying about external file management. This is particularly useful during development stages or in small websites where scope and reusability are limited. Internal stylesheets also allow for easy testing and fine-tuning of styles within the HTML document itself, making it unnecessary to load another file when only page-specific customizations are required .

Using generic styles in CSS promotes scalability by allowing a single style definition to be applied to multiple HTML elements, regardless of their type. This approach significantly reduces code duplication and simplifies the process of updating styles site-wide. Generic styles enable a consistent look and feel across different elements and pages, which is essential for maintaining design coherence in large web applications. This practice allows for easier thematic changes and supports responsive design adjustments without deeply altering the underlying HTML structure .

CSS is crucial in defining the visual presentation of an HTML element and plays an important role in creating dynamic HTML pages. In a dynamic setup, JavaScript can manipulate CSS by changing styles in response to user interactions such as mouse events. CSS provides the styling properties, while JavaScript is used to dynamically change these properties, such as color and background color, based on specific triggers. This interaction forms the basis of dynamic pages, allowing for interactive, user-responsive designs without requiring a page reload .

You might also like