Scribd
Upload
4 views

Css Codes

Uploaded by

mani tej
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

Css Codes

Uploaded by

mani tej
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

WHAT THE CASCADE IS

• The CSS specificity ‘engine’, or what


is commonly known as the
‘cascade’, is what determines which
CSS style declarations ‘win’, or in
other words, which style declarations
are more likely to get shown than
other style declarations within an
overall HTML page structure.
• As we can see in the drawing above,
it is the ‘inline’ style that holds the
most power and gets shown if
competing with the style declarations
at the other levels of the cascade.
• The above cascade example shows
us how the cascade decides what
style declarations are more
important at the high level
(outside of a CSS file).
<!DOCTYPE html>
<title>Example</title>
<style>
div#css-section {
border:1px dotted red;
padding: 20px;
}
</style>
<div id="css-section">
This lucky div has ID...
</div>
<div>
This poor div has no ID...
</div>
IDs vs Classes
• Given classes and IDs are very similar, you may be wondering which one to
use. This depends on the situation.

When to use classes


• You should use classes when your style needs to be applied multiple times
on the same page. For example, you might have many <h1> elements that
need the same style applied.

When to use IDs


• You should use IDs if only one element on the page should have the style
applied, and/or you need a unique identifier for that element.
<! CSS code on List elements> <ol style = "list-style-type:decimal;">
<html> CSS Codes
<li>Maths</li>
<head> <li>Social Science</li>
</head> <li>Physics</li>
<body> </ol>
<ul style = "list-style-type:circle;">
<li>Maths</li> <ol style = "list-style-type:lower-alpha;">
<li>Social Science</li> <li>Maths</li>
<li>Physics</li> <li>Social Science</li>
</ul> <li>Physics</li>
<ul style = "list-style-type:square;"> </ol>
<li>Maths</li>
<li>Social Science</li> <ol style = "list-style-type:lower-roman;">
<li>Physics</li> <li>Maths</li>
</ul> <li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
CSS Code Using Z-Index
CSS gives you opportunity to create layers of various <div style = "background-color:yellow;
divisions. The CSS layers refer to applying the z- width:300px;
index property to elements that overlap with each other. height:100px;
The z-index property is used along with position:relative;
the position property to create an effect of layers. You can top:-60px;
specify which element should come on top and which left:35px;
element should come at bottom. z-index:1;">
A z-index property can help you to create more complex </div>
webpage layouts. <div style = "background-color:green;
<html> width:300px;
<head> height:100px;
</head> position:relative;
<body> top:-220px;
<div style = "background-color:red; left:120px;
width:300px; z-index:3;">
height:100px; </div>
position:relative; </body>
top:10px; </html>
left:80px;
z-index:2">
</div>
CSS Borders Color Change

<html> <body>
<head> <p class = "example1">
<style type = "text/css"> This example is showing all borders in different
p.example1 { colors.
border:1px solid; </p>
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */ <p class = "example2">
border-left-color:#330000; /* Black */ This example is showing all borders in green
border-right-color:#0000CC; /* Blue */ color only.
} </p>
p.example2 { </body>
border:1px solid; </html>
border-color:#009900; /* Green */
}
</style>
</head>
Text Effects
<html> p{
<head> color: white;
<style> text-shadow: 1px 1px 2px black, 0 0 25px blue, 0
h1 { 0 5px darkblue;
text-shadow: 2px 2px; }
} </style>
h2 { </head>
text-shadow: 2px 2px red;
} <body>
h3 { <h1>CVR College of Engineering</h1>
text-shadow: 2px 2px 5px red; <h2>CVR College of Engineering</h2>
} <h3>CVR College of Engineering</h3>
h4 { <h4>CVR College of Engineering</h4>
color: white; <h5>CVR College of Engineering</h5>
text-shadow: 2px 2px 4px #000000; <h6>CVR College of Engineering</h6>
} <p>CVR College of Engineering</p>
h5 { </body>
text-shadow: 0 0 3px #FF0000; </html>
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Background Image and Color Change

• <html>
• <head>
• <style>
• body {
• background-image: url("sample.jpg");
• background-color: red;
• }
• </style>
• </head>
•
• <body>
• <h1>Hello World!</h1>
• </body>
• <html>
External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
mystyle.css
• body {
background-color:red;
}

h1 {
color:green;
margin-left: 20px;
}
Introduction to Bootstrap
• The CSS framework in front-end development is called
Bootstrap.

• It is free, open-source, and is mainly designed to develop


mobile applications in the front end.

• The CSS and JavaScript templates are used for typing, buttons,
navigation, and other interacting components.

• The framework is faster and popular now for developing


mobile websites. It is written in CSS, HTML, Less, Sass, and
JavaScript.

• However, the framework is actually heavy due to CSS and


What is Bootstrap?
• let’s first know what exactly are front-end frameworks.
• In a nutshell, it is an application interface that is also very
popularly called a website interface such that whatever the
end-user experiences and sees is allowed to be used inside
the application.
• It consists of an HTML code which is responsible for providing
a structure, Cascading style sheets that are used to visually
format the website, and JavaScript code which is used to allow
dynamic elements such as slideshows, expanding the menu,
calculators, etc
• The framework in itself is nothing but a platform, a
foundation, or a base upon which pre-built software solutions
are present, which is the web interface in our case.
• Bootstrap is currently the most popular front-end framework,
which the developers created at Twitter.

• The main purpose of this utility was to build a tool that helps
in the development of website-related applications fast, easy,
convenient and more responsive.

• It also made sure that the consistency of the code and the
code quality is also not compromised. It also became easier to
maintain a framework whose further development was very
easy.
• 1. CSS files: It consists of global settings and is used to
define, by making use of multiple complementary classes,
the look of the prominent HTML items such as lists, texts,
tables, form elements, and images.

• 2. JS files: These Js files consist of ready to use a plugin


for the most famous Jquery library and also allows for
enriching created interface along with dynamic elements
quicker than ever. The important ones among them are
models, carousel sliders, expandable lists, dynamic tabs,
tooltips, or accordions.

• Each component consists of the HTML structure, some form


of JavaScript code, and CSS declarations. They extend the
functionality of existing elements related to the interface,
including an autocomplete function for input fields.
What can you do with Bootstrap?

Some common uses of bootstrap are:


• Layout creation as its responsive CSS adjusts to tablets,
phones, and desktops, with modern first styles primarily being
part of this framework.
• The support community is very huge so chatting among a
league of developers at IRC, Blog, and Expo to having a look
at other people’s findings are some of the activities that can
be done.
• It is also compatible with maximum modern browsers such as
Firefox, Chrome, Internet Explorer, Opera, and Safari.
First Bootstrap File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Article</title>
<meta name="viewport"content="width=device-width,initial-scale=1">
<link rel="stylesheet"type="text/css"href="~/Bootstrap-Files/css/bootstrap.min.css">
</head>
<body>
<h1>Welcome to Bootstrap Article</h1>
<script src="~/Bootstrap-Files/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td> </tr>
</tbody> </ table> </div> </body> </html>

You might also like