CSS Notes

CSS3
Created by:- Mohan
CSS is a style sheet language used for describingthepresentation of web

pages.
CSS stands for Cascading Style Sheet. CSS allows you to specify various
style properties for a given HTML element such as colors, backgrounds,
fonts etc.
What is CSS?
CSS stands for Cascading Style Sheet.

CSS is a plain text file to store properties.
CSS describing look and formatting properties for how content should be display on
webpage.
CSS give you control to make global change and apply all webpage.
CSS use for how to display HTML elements look and formatting are set using CSS
properties. Using CSS properties you can change every single elements style can change
as you like. CSS Style sheet create and include with webpage is very easily. Using CSS
Style Sheet update webpage formatting and maintain consistency across multiple
webpages.
CSS properties define either individually or group of element and best way to done while
webpage is being created. Style Sheets like a 'blueprints' because its hold a group of style
related properties and values.
Advantage of CSS
Easy Manage : CSS with you can better manage whole webpage. CSS allow to manage
entire site elements looks and formatting in single style sheet file.
Global Change : CSS Style Sheet changes apply to global change for all webpage. When
Style Sheet appear with webpage it's known as Cascading Style Sheet.
Save time : When we create HTML document, we define separate set attributes value in
each element. but it is limited use. But, CSS give a lot of flexibility to set properties and
values either group of element or single element. So it's benifit to avoid same code write
again and again.
Easy Maintain/Update : CSS style sheet maintain easier and anytime you can edit
elements properties and values.
3 ways to write CSS: You can write CSS styles 3-way Inline element line (scope is only
that element), Internal style write in header section (scope is only that webpage), or
CSS3
Created by:- Mohan
External style sheets write in external .css extension files. External style sheets enable
you to change the elements and layout style of all the pages in a Web site, just by editing
one single file.
Page Load Faster: Webpage with stylesheets take a bit of second to load very fastly.
CSS Syntax
A CSS rule consists of a set of style rules that are interpreted by the
browser and then applied to the corresponding elements in the document.
Syntax
CSS rules have two main parts, a selector and one or more declarations:
Selectors are used to declare which of the markup elements a style applies to.
The declarations that appear in the block that follows the selector may be applied to all
elements of a specific type, or only those elements that match a certain attribute.
Each declaration consists of a property and a value. The property is the style attribute you
want to change; they could be color or border etc. Each property has a value, for example
color property can have value either blue or #0000FF etc.
h1 {color:blue; text-align:center;}
CSS3
Created by:- Mohan
Ex:- <!DOCTYPE html>

<html lang="en">
<head>
<title>Example of CSS syntax</title>
<style type="text/css">
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
In the example above h1 is a selector, color and text-align are properties and given blue
and center are the corresponding values of these properties.
NOTE: - A CSS declaration always ends with a semicolon ";", and the declaration
groups are always surrounded by the curly brackets "{}".
CSS Comments
Comments are usually added with the purpose of making the source code easier to
understand. It may help other developer (or you in the future when you edit the source code)
to understand what you were trying to do with the CSS. Comments are significant to
programmers but typically ignored by browsers.
A CSS comment begins with /*, and ends with */, See the example below:
<! DOCTYPE html>
<html lang="en">
<head>
CSS3
Created by:- Mohan
<title>Example of CSS comments</title>

/* This is a CSS comment */
/* Comments are not displayed,
by the browser */
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
CSS style 4 different way (Inline style, Internal style, external style sheet and @import),
you must have to knowledge in which situation which type is better fit for you. So lets
start, you can define and implement CSS style in following different ways.
1. Inline CSS style

2. Internal CSS Style
3. External Style Sheet
4. @import Style Sheet
Inline CSS Style

Inline CSS Style write in element line using style attribute. All most every html element
support style attribute.
Inline stylesheet priority high more than other three.
Inline CSS style consists set of rules in 4 part:
1. Selector (Element)
CSS3
Created by:- Mohan
2. Style (Attribute)
3. Property and
4. Value
How to write Inline CSS Style

Selector is normally HTML element that element you want to assign CSS style. And style
is attribute to assign CSS property and set suitable value.
<html>
<body>
<p style="color:purple;margin-left:20px">This is a paragraph line.</p>
<div style="color:purple;font-size:16px;background-color:#FF6633;">This is a paragraph
Second line.</div>
</body>
</html>
Internal CSS Style

Internal CSS Style includes within webpage using <style
type="text/css">.....</style> element and between this element CSS style properties are
listed. Internal CSS style normally written within <head>.....</head> element of the
webpage.
Internal CSS style consists set of rules in 3 part:
1. Selector (element, class, id)

2. Property and
3. Value
CSS3
Created by:- Mohan
How to write Internal CSS Style

Selector is normally HTML element that element you want to assign CSS style. All
elements within webpage that elements assign CSS properties and set suitable values.
<html>
<head>
p{
color:purple;
margin-left:20px;
}
div{
color:purple;
font-size:16px;
CSS3
Created by:- Mohan
background-color:#FF6633;
}
</style>
</head>
<body>
<p>This is a paragraph line.</p>
<div>This is a paragraph Second line.</div>
</body>
</html>
External Style Sheet

External Style Sheet define in separate .css extension file. and used to make global
change also manage all webpage from a single CSS document.
External style sheets give you control to change formatting and layout styles of every
single elements in webpages. And only those webpage who are linked with external CSS
document.
External style sheet consists set of rules in 4 part:
1. External Source link

2. Selector (element, class, id)
3. Property and
4. Value
How to write External Stylesheet

External stylesheet linked to a webpage.
Selector is normally HTML element (or class, id) to assign CSS properties and set
suitable values.
CSS3
Created by:- Mohan
/*CSS Style*/
p {
color:purple;
margin-left:20px;
}
div{
color:purple;
font-size:16px;
} /*save it another location as jnj_css.css*/
CSS3
Created by:- Mohan
<html>
<head>
<link rel="stylesheet" type="text/css" href="jnj_css.css" />
</head>
<body>
</body>
</html>
@import Style Sheet
@import CSS Style is another way to loading a CSS file.
@import CSS Style define within <style type="text/css">.....</style> element in

your <head>.....</head> of your webpage.
@import CSS style consists set of rules in 3 part:
1. @import (keyword)
2. url()
3. CSS file path
How to write @import CSS Style

@import url('styles.css');
/*CSS Style*/
p{
color:purple;
margin-left:20px;
div{
CSS3
Created by:- Mohan
color:purple;
font-size:16px;
} /* save as style.css */
<html>
<head>
<style>
@import url('style.css');
</style>
</head>
<body>
</body>
</html>
CSS Selectors
A CSS selector is a pattern to match the elements in an HTML document.
The associated style rules is applied to the elements that match the selector
pattern.
What is Selector
Selectors are one of the most important aspects of CSS as they are used to select elements
on a web page so that they can be styled. You can define selectors in various ways.
Universal Selector
The universal selector, written as * i.e. asterisk or star symbol, matches every single
element on the page. The universal selector may be omitted if other conditions exist on the
CSS3
Created by:- Mohan
target element. This selector is often used to remove the default margins and paddings from
the elements for quick testing purpose.
Ex: -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS universal selector</title>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is a paragraph. </p>
</body>
</html>
The style rules inside the * selector will be applied to every element in a document.
Note: It is not recommended to use the universal selector * in a production environment, since
this selector matches every element on a page that puts too much of unnecessary pressure on
the browsers.
Element Type Selector

An element type selector matches every instance of the element in the document tree with
the corresponding element type name
CSS3
Created by:- Mohan
The style rules inside the p selector will be applied on every <p> element in the document
and color it blue, regardless of their position in the document tree.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS element type selector</title>
h1 {
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Id Selectors
The id selector is used to define style rules for a single or unique element.
The id selector is defined with a hash sign (#) immediately followed by the id value.
CSS3
Created by:- Mohan
This style rule renders the text of an element in red, whose id attribute is set to error.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS id selector</title>
#error {
color: #ff0000;
}
</style>
</head>
<body>
<p id="error">This is a warning! </p>
</body>
</html>
Class Selectors
The class selectors can be used to select any HTML element that has a class attribute. All
the elements having that class will be formatted according to the defined rule.
The class selector is defined with a period sign (.) immediately followed by the class value.
CSS3
Created by:- Mohan
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS class selector</title>
. blue {
color: #0000ff;
}
</style>
</head>
<body>
<h1 class="blue">This is a heading</h1>
<p class="blue">This is a paragraph. </p>
<p>This is another paragraph. </p>
</body>
</html>
The above style rules renders the text in blue of every element in the document that
has class attribute set to blue.
You can make it a bit more particular. For example:

CSS3
Created by:- Mohan
The style rule inside the selector p.blue renders the text in blue of only
those <p> elements that has class attribute set to blue, and has no effect on other
paragraphs.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS class selector</title>
p.blue {
color: #0000ff;
</style>
</head>
<body>
<h1 class="blue">This is a heading</h1>
<p class="blue">This is a paragraph.</p>
</body>
</html>
Descendant Selectors
You can use these selectors when you need to select an element that is the descendant of
another element. For example, if you want to target only those anchors that are contained
within an unordered list, rather than targeting all anchor elements.
CSS3
Created by:- Mohan
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS Descendant Selectors</title>
h1 em {
color: green;
}
ul.menu {
padding: 0;
list-style: none;
}
ul.menu li{
display: inline;
}
ul.menu li a {
margin: 10px;
text-decoration: none;
}
</style>
</head>
<body>
<h1>This is a <em>heading</em></h1>
<ul class="menu">
CSS3
Created by:- Mohan
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
The style rules inside the selector ul.menu li a applied to only those <a> i.e. anchor
elements that contained inside an unordered list having the class .menu, and has no effect
on other links inside the document. Similarly, the style rules inside the h1 em selector
applied to only <em>elements that contained inside heading <h1>.
Child Selectors
A child selector can be used to select only those elements that are the direct children of some
element. A child selector is made up of two or more selectors separated by the greater than
symbol (i.e. >). You can use these selectors for example, to select the first level of list
elements inside a nested list that has more than one level.
The style rule inside the selector ul > li applied to only those <li> elements that are direct
children of the <ul> elements, and has no effect on other list elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS Child Selectors</title>
ul > li {
CSS3
Created by:- Mohan
list-style: square;
}
ul > li ol {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Services</a>
<ol>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
</ol>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
Adjacent Sibling Selectors
The adjacent sibling selectors can be used to select sibling elements. This selector has the
syntax like: E1 + E2, where E2 is the target of the selector.
The selector h1 + p in the example below will select the <p> elements only if both
the <h1> and<p> elements share the same parent in the document tree and <h1> is
CSS3
Created by:- Mohan
immediately precedes the <p> element. That means only those paragraphs that come
immediately after each <h1>heading will have the associated style rules.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS Adjacent Sibling Selectors</title>
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}
</style>
</head>
CSS3
Created by:- Mohan
<body>
<p>This is a paragraph. </p>
<ul class="task">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<p>This is one more paragraph. </p>
<p>This is also a paragraph. </p>
</body>
</html>
General Sibling Selectors

The general sibling selector is similar to the adjacent sibling selector (E1 + E2), but it's less
strict. A general sibling selector is made up of two simple selectors separated by the tilde ( )
character. It can be written like: E1 E2, where E2 is the target of the selector.
The selector h1 p in the example below will select all the <p> elements that preceded by
the <h1> element, where all the elements share the same parent in the document tree.
There are more selectors like attribute selectors, pseudo-classes, pseudo-elements(To learn
in Advanced CSS).
CSS3
Created by:- Mohan
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS General Sibling Selectors</title>
h1 ~ p {
color: blue;
font-size: 18px;
}
ul.task ~ p {
color: #f0f;
text-indent: 30px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ul class="task">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<p>This is one more paragraph.</p>
<p>This is also a paragraph.</p>
</body>
</html>
Grouping Selectors
CSS3
Created by:- Mohan
Often several selectors in a style sheet share the same style rules declarations. You can
group them into a comma-separated list to minimize the code in your style sheet. It also
prevents you from repeating the same style rules over and over again.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS Selectors without Grouping</title>
h1 {
font-size: 36px;
font-weight: normal;
}
h2 {
font-size: 28px;
}
h3 {
CSS3
Created by:- Mohan
font-size: 22px;
}
</style>
</head>
<body>
<h1>This is a heading of level 1</h1>
</body>
</html>
As you can see in the above example, the same style rule font-weight: normal; is
shared by the selectors h1, h2 and h3. So, it can be grouped in a comma-separated
list, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS Grouping Selectors</title>
h1, h2, h3 {
}
h1 {
font-size: 36px;
}
CSS3
Created by:- Mohan
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
</style>
</head>
<body>
</body>

CSS Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Notes

Uploaded by

Copyright:

Available Formats

CSS3

Created by:- Mohan

CSS is a style sheet language used for describingthepresentation of web

CSS stands for Cascading Style Sheet.

Ex:- <!DOCTYPE html>

<title>Example of CSS comments</title>

1. Inline CSS style

Inline CSS Style

Inline CSS style consists set of rules in 4 part:

How to write Inline CSS Style

Internal CSS Style

Internal CSS style consists set of rules in 3 part:

1. Selector (element, class, id)

How to write Internal CSS Style

External Style Sheet

External style sheet consists set of rules in 4 part:

1. External Source link

How to write External Stylesheet

<link rel="stylesheet" type="text/css" href="jnj_css.css" />

<p>This is a paragraph line.</p>

<div>This is a paragraph Second line.</div>

@import CSS Style define within <style type="text/css">.....</style> element in

@import CSS style consists set of rules in 3 part:

How to write @import CSS Style

<p>This is a paragraph line.</p>

<div>This is a paragraph Second line.</div>

Element Type Selector

You can make it a bit more particular. For example:

<title>Example of CSS class selector</title>

<h1 class="blue">This is a heading</h1>

<p class="blue">This is a paragraph.</p>

<p>This is another paragraph. </p>

Adjacent Sibling Selectors

General Sibling Selectors

You might also like