Scribd
Upload
4 views

Css

The document discusses cascading style sheets (CSS) which allows the separation of document structure and presentation. CSS works by applying styles to HTML elements based on selectors. Styles can be defined internally, externally, or inline. Common CSS selectors include type, ID, class, attribute, and universal selectors. CSS rules are applied based on specificity with inline styles overriding internal styles and internal overriding external styles.

Uploaded by

Vishal Bhargava
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

Css

The document discusses cascading style sheets (CSS) which allows the separation of document structure and presentation. CSS works by applying styles to HTML elements based on selectors. Styles can be defined internally, externally, or inline. Common CSS selectors include type, ID, class, attribute, and universal selectors. CSS rules are applied based on specificity with inline styles overriding internal styles and internal overriding external styles.

Uploaded by

Vishal Bhargava
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

,9CSS:cascading style sheets:what is cascading??

In general, it refers to any process or phenomenon where something flows or falls


in a series of steps or layers,
In CS it is,When multiple CSS rules apply to an element, the browser will decide
which rule to follow based on a set of rules called the "cascade"

Advantages of CSS
1.CSS saves time – You can write CSS once and then reuse same sheet in multiple
HTML pages

2.Pages load faster – If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply to all the
occurrences of that tag. So less code means faster download times.

3.Easy maintenance – To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically

4.Superior styles to HTML – CSS has a much wider array of attributes than HTML so
you can give far better look to your HTML page in comparison of HTML attributes.

5.Multiple Device Compatibility – Style sheets allow content to be optimized for


more than one type of device. By using the same HTML document, different versions
of a website can be presented for handheld devices such as PDAs and cell phones or
for printing

6.Global web standards – Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML
pages to make them compatible to future browsers

You can use CSS in three ways in your HTML document:

1. External Style Sheet – Define style sheet rules in a separate .css file and then
include that file in your HTML document using HTML <link> tag.

2. Internal Style Sheet – Define style sheet rules in header section of the HTML
document using <style> tag.

3. Inline Style Sheet – Define style sheet rules directly along with the HTML
elements
using style attribute. Let’s see all the three cases one by one with the help of
suitable
examples

SELECTORS IN CSS
1:TYPE SELECTOR
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
<style>

p{
text-align: center;
color: red;
}
</style>
===================================================================================
========
2:ID SELECTOR
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>

<style>
#para1{
text-align: center;
color: red;
}
</style>
===================================================================================
=========

3:CLASS SELECTOR

<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>

<style>
.center {
text-align: center;
color: red;
}
</style>

===================================================================================
========

4.TYPE SELCTOR WITH CLASS:

<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>

<style>
p.center {
text-align: center;
color: red;
}
</style>

===================================================================================
========
5.UNIVERSAL SELECTOR "*" or empty space

<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>

<style>
* {
text-align: center;
color: blue;
}
</style>

===================================================================================
========

6.GROUPING SELECTOR
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>

<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>

===================================================================================
========

7.ATTRIBUTE SELECTOR
synatx:
type[attribute='value'{
}

<body>
<form>
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">
</form>
</body>

<style>
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
</style>
===================================================================================
===================================
CSS OVERRIDING RULE

INLINE>>>INTERNAL>>>EXTERNAL

===================================================================================
===================================

COLOR CODES:
ways:2

way1:Hexadecimal notation
A hexadecimal is a 6 digit representation of a color. The first two digits(RR)
represent a
red value, the next two are represent a green value(GG), and the last are represent
the
blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop,
Jasc Paintshop Pro or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign #.

example:#000000(black),#FFFFFF(white)

SHORT HEX CODES:example: #6A7 becomes #66AA77

way2:CSS Colors - RGB Values

This color value is specified using the rgb( ) property. This property takes three
values,
one each for red, green, and blue. The value can be an integer between 0 and 255 or
a
percentage.
Note: All the browsers do not support rgb() property of color so it is recommended
not to
use it

Example:-
rgb(0,0,0) for black color
rgb(255,255,255) for white color

You might also like