Scribd
Upload
2 views

CSSNotes.html

CSS, or Cascading Style Sheets, is a markup language used to style and customize HTML elements on webpages. It allows for the creation of attractive and efficient web pages through inline, internal, and external styles. CSS syntax involves selectors, properties, and values, and can be applied using various methods to enhance the design of HTML documents.

Uploaded by

Amol Mahajan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

CSSNotes.html

CSS, or Cascading Style Sheets, is a markup language used to style and customize HTML elements on webpages. It allows for the creation of attractive and efficient web pages through inline, internal, and external styles. CSS syntax involves selectors, properties, and values, and can be applied using various methods to enhance the design of HTML documents.

Uploaded by

Amol Mahajan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

CSS

Introduction
 The full form of CSS is Cascading Style
Sheets.
In that,
Cascading:-Simple meaning of cascading
is the flow.The CSS Cascade is the
algorithm by which the browser decides
which CSS styles to apply to an element
Style:- for design and customize html
element.
Sheet:- The meaning of sheet is an
document which is used for designing
purpose.
What is CSS:-
 CSS is a markup language which is used
to create style and customize HTML
elements available in webpage.
CSS Use:-
 By Using CSS,We can create more
affecting , attractive and customized web
pages in less time code.

 For using CSS ,we must have editor like


“Macromedia Dreamweaver“ and browser
like “Mozila”.
 In CSS , For using comment ,we can use
/*----*/ single line and also multiple line.

CSS Syntax:-
Selector {
Properties: Values;
}
In above syntax ,
Selector:-Selectors are used to select the
content you want to style. CSS selectors select
HTML elements according to its id, class, type,
attribute etc.
Rules of selector :-
 Name must be start with characters.
 Space not allowed between two words.
 Starting with name and space and
numbers is not allowed.
{ }:-It is a code binder which is used to bind a
codeFor example:- binding properties and
values of css.

 Selector − A selector is an HTML tag at


which a style will be applied. This could
be any tag like <h1> or <table> etc.
 Property − A property is a type of
attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS
properties. They could be color, border
etc.
 Value − Values are assigned to
properties. For example, color property
can have value either red or #F1F1F1
etc.

Example − You can define a table border as


follows −
table{ border :1px solid #C00; }
 Define CSS in 3 ways LikeInline
CSS, Internal and External CSS
1. Inline CSS:-
 Inline CSS allows you to apply a unique
style to one HTML element at a time. You
assign CSS to a specific HTML tag by using
the style attribute with any CSS properties
defined within it.Inline CSS is not the best
way to add CSS to an HTML document if
you're working on a big project.
 In the following example, you can see
how to describe CSS style properties in
the same line of code with an HTML tag
<p>. We use a style attribute to assign CSS
styling properties – in this particular case,
color and a value (red) – to the HTML
element <p>.
 Example:-
<p style="color: blue;">This is a
paragraph.</p>

2. Internal Style Sheet


 You can apply internal style sheet for
the whole page. Do that by using the
<style> element. For it to work, you have
to put HTML tag into the <head> section
of a document. You can define the CSS
styling properties for as many HTML
elements as you wish between the
<style></style> tags.
 Once you open the following example,
you'll notice that the internal style sheet is
defined within the <style> tags. Also, it's put
inside the <head> section of an HTML
document.
 Example

h1 {
color: red;
margin-left: 20px;
}
External Style Sheet:-
 With an external style sheet, you can
change the look of an entire website
by changing just one file.
 The external style sheet is generally
used when you want to make changes
on multiple pages.
External Style Sheets are the separate .css
files that contain the CSS rules. These files
can be linked to any HTML documents using
<link> tag with rel attribute.
Syntax:
<head><linkrel=“stylesheet”type=”text/
css”href=“urlofcssfile”>
</head>
In order to create external css and link it to
HTML document, follow the following steps:
 First of all create a CSS file and define all
CSS rules for several HTML elements.
Let’s name this file as external.css.
p{
Color: orange; text-align: left; font-
size:10pt;
}
h1{
Color: orange; font-weight: bold;
}
 Now create HTML document and name
it as externaldemo.html.
<html>
<head>
<title> External Style Sheets Demo </title>
<linkrel="stylesheet"type="text/
css"href="external.css">
</head>
<body>
<h1> External Style Sheets</h1>
<p>External Style Sheets are the
separate .css files that contain the CSS
rules.</p>
</body>
</html>

You might also like