Css basics

Submitted To:
Md. Sabir Hossain
Lecturer, Department of CSE
Chittagong University of Engineering and Technology
Submitted By:
Mirza Asif Haider
ID No. 1308023 ,
Department of Electronics and Telecommunication
Engineering
Course No# 384
Course Title# Internet Programming
CHITTAGONG UNIVERSITY OF ENGINEERING AND
TECHNOLOGY

TOPICS:
 What is CSS
 CSS versions
 Difference between HTML, CSS and Javascript
 Advantages of CSS
 CSS Basic Syntax
 Applying CSS to an HTML Document
 Linking Style Sheets to HTML
 Css Lengths And Units
 ID selectors
 Class selectors
 Border, Margin, Padding
 CSS advanced selectors
 General Sibling Selectors
 Dynamic Pseudo Classes
 CSS Attribute selectors

Introduction to CSS
CSS stands for Cascading Style Sheets
A style language that defines layout of HTML documents
CSS is supported by all browsers today

CSS Versions
CSS-1
was officially released in
1996, and included
properties for adding font
properties such as typeface
and emphasis color of text,
backgrounds, and other
elements Text attributes
such as spacing between
words, letters, and lines of
text.
CSS-2
specification was
developed by the W3C and
published as a
recommendation in 1998.
Its most notably added
properties for positioning
that allowed CSS to be
used for page layout
CSS-3
drafts were published in
1999. CSS3 adds
presentation-style
properties, allowing you to
effectively build
presentations from Web
documents. CSS level 3 is
divided into several
separate documents called
modules
CSS4 there is no standard which named as CSS4.

Difference Between HTML, CSS & Javascript

it allows developers to separate content from its
presentation layer
the Style Sheet classes are not loaded from the server, each time
different pages of same website sharing the same CSS file
Accessibility of content will allow a large number
of users to locate you on the Internet.
Style Sheets can exactly positions your element
where ever you want in the web page
CSS enabled web pages can be easily printed.

CSS Basic Syntax
selector {property: value}
the HTML
element/tag
you wish to
define
the attribute
you wish to
change
the value of
the property

CSS Example Codes
body {color: black;}
p {text-align:center;color:red;}
p
{
text-align: center;
color: black;
font-family: arial ;
}
h1,h2,h3,h4,h5,h6 { color: green; }
p.right {text-align: right; }

Applying CSS to an HTML Document
Inline Styles – you only use a style to the single instance of
an HTML tag
Internal Style - you define internal styles in the head section
by using the <style> tag
External Style - you can change the look of an entire Web
site by changing one file

Linking Style Sheets to HTML
Styles can be linking to an HTML document using one of three
methods:
1. Inline Style
2. Embedded Style
3. External Style
How do you connect a CSS styling sheet to an HTML page ?

Inline Style
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;"> <p>This is a red
page</p>
</body>
</html>

Internal Style
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>

External Style
style.css
body
{
background-color: #FF0000;
}
HTML Document
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>

CSS Lengths and Units fall into three
broad categories:

Relative units
Relative units
CSS relative units are measured in
relation to other things such as
parent elements. There are three
types of relative units such as em , ex
and px .

em
It is a unit of measurement equal to the current font size.
The height of the em unit can be different in different parts of the
document.
When users can change the size of text in their browser, the em
unit can vary in relation to the size of the
text that the user has selected.
p { font-size: 0.8em; }
ex

px
px is the most commonly used unit of length in CSS. It
considered relative because it varies with display
resolution, particularly between low resolution screens and
high resolution print output.
p { font-size: 10px; }

Absolute units
Absolute units are
used far less than
relative units.
They have predefined
meanings or real world
equivalents.
Absolute units in CSS

Percentages
CSS percentages (%) are another way to specify relative
size that give a value in relation to another value. It is an
integer value, or a decimal number value, followed by a
percentage character.
The font-size: 100% will display your text at browsers
default font size settings.

If you want make your font size
smaller then you should
decrease the % value.

The role of a selector is to tell the browser to which style is applied
to a specific element in an HTML document. Selectors are patterns
used to select the HTML tags that you want to style. These patterns
may range from simple element names to rich contextual patterns.
ID selectors, Class selectors

ID selector
ID selectors in CSS allow you to target elements (Tags) by their ID
values. ID selectors are unique, so you can apply only to the content of
one element. To reference an ID, you precede the ID name with a hash
mark (#).

<html>
<head>
#headingcolor {color: #FF0066;} </style>
</head>
<body>
<h1 id="headingcolor">ID Selector</h1>
<h1>Without ID Selector</h1>
</body>
</html>

Class selector
The Class selector in CSS , which references the class attribute used
on HTML elements. The Class selector begins with a dot(.) and
followed by a class name which you choose.
Unlike the id attribute, multiple elements may share same class name, also an element may belong to
more than one class.

Class in multiple elements
.textcolor {color: #FF0066;}
<p class="textcolor">Paragraph in class selector</p>
<h1 class="textcolor">
Heading in Class Selector</h1>
In the above code multiple element shared same class
name (.textcolor).

Multiple Classes in the same Element
.textcolor1 {color: #00FF00;}
textcolor2 {color: #0000FF;}
<p class="textcolor1">Paragraph in class textcolor1</p>
<p class="textcolor2">Paragraph in class textcolor2</p>
In the above code same element implement different class name
(.textcolor1 and .textcolor2).

Classes limit to one type of Element
Using Class Selector, you can limit the scope of the style sheet (CSS) rule to
only that type of element.
In the above code, the selector matches any h1 elements that
have a class attribute containing the word "textcolor". If any
other element have the class name "textcolor" wont work.

<html>
<head>
h1.textcolor {color: #FF0066;}
.textcolor1 {color: #00FF00;}
.textcolor2 {color: #0000FF;} </style>
</head>
<body>
<h1 class="textcolor">Heading </h1>
<h2 class="textcolor">Wrong
implementation !! </h2>
<p class="textcolor1">Paragraph in class
textcolor1</p> <p
class="textcolor2">Paragraph in class
textcolor2</p>
<h1 class="textcolor2">Heading </h1>
</body>
</html>

CSS advanced selectors
CSS Combinators
CSS Combinators join several different selectors into new and more capable
of targeting a portion of the document.
There are 4 types of combinators

1. Descendant selector
Descendant selector in CSS which matches all child elements that are descendants of the parent
element. Descendant selector including elements that are not only direct descendants. These element
may be a child, grandchild, great grandchild, and so on.
p em { color: #FF0066; }
The above code tells the browser to select all em elements that are descendants of p elements to apply the rule.
The other em elements in the page will not be selected by this rule.
It is also possible to nest descendant selectors in several layers deep.
div p em { color: #FF0066; }

<html>
<head>
p em { color: #FF0066; }
</style>
</head>
<body>
<p>This paragraph include
<em>descendant</em> selector </p>
This line not include
<em>descendant</em> selector </body>
</html>

2. Child Selector (CSS Direct Child Selector)
A child selector is similar to a descendant selector, but it targets only the direct
children of a given element. That means it matches all elements that are the
immediate children of a specified element. The special character used in child
selector is the > (greater than) sign.
p > em { color: #FF0066; }
Read right to left, the selector p > em translates as, selects any em element that is an immediate child
of a p element.

<html>
<head>
div ol > li strong {color: #FF0066;}
</style>
</head>
<body>
<ol>
<li>The strong text here is <strong>not</strong>
change the color.</li>
</ol>
<div> <ol> <li>next is direct child ..
<ul> <li>The strong text here <strong>is
changed</strong> the color.</li>
</ul>
</li>
</ol>
</div>
</body>
</html>

3. Adjacent Sibling Selector (CSS Next Sibling Selector)
The Adjacent Sibling Selector selects an element`s next sibling, that is it allows
you to select an element that is directly after another specific element. The
special character used in Adjacent Sibling selector is the + (plus) character.
div + p {color: #FF0066;;}
Above CSS code states that all paragraph elements that are directly after a < div > is #FF0066
color

<html>
<head>
div + p {color: #FF0066;}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Next Paragraph</p>
<div> Div section </div>
<p> Paragraph after Div</p>
</body>
</html>

General Sibling Selectors
The general sibling selector in CSS is almost similar to the adjacent sibling selector. The
difference is that it select any element that follows another element , it does not need to be
the directly preceding element, can appear anywhere after it. The special character used in
Adjacent Sibling selector is the ~ (tilde) character
p ~ h1 {color: #FF0066;}
Above code states that all h1 elements that are anywhere after < p > is
#FF0066 color

<html>
<head>
p ~ h1 {color: red;}
</style>
</head>
<body>
<h1>Heading </h1>
<p>Paragraph after heading 1</p>
<h1>Heading 2</h1>
<p>Paragraph after heading 2</p>
<h1>Heading 2</h1>
</body>
</html>
From the above image, you can understand how the
General Sibling Selectors styles the HTML document. -

Dynamic Pseudo Classes
Pseudo Classes allow the designer the freedom to control how the element should appear
under different conditions. Using dynamic pseudo classes, it is possible to customize those
styles. Pseudo class selectors start with a colon and are usually added immediately after a
type selector with no additional whitespace.

<html>
<head>
a.linkColor:link { font-size: 12pt; text-decoration:
none; color:#084B8A; }
a.linkColor:visited { font-size: 12pt; text-decoration:
a.linkColor:active { font-size: 12pt; text-decoration:
a.linkColor:hover { font-size: 12pt; text-decoration:
underline; color:#FF8000; }
</style>
</head>
<body>
Pseudo-class Selectors <br>
<a href=“http://google.com" class="linkColor"
>Home</a> <br>
</body>
</html>
When mouse is on ‘Home’

<html>
<head>
<title>Pseudo-class Selectors</title>
p:first-line { text-decoration: underline; }
p:first-letter { font-size: 200%; font-weight: bold; }
p:before { content: "START :"; }
p:after { content: ": END"; }
</style>
</head>
<body>
<p> This paragraph displays Pseudo-element
Selectors <br>
They are :first-ine,:first-letter,:before and :after <br>
Hope you understand Pseudo-element from this
example
</p>
</body>
</html>

<html>
<head>
.textcolor { color: #FF0066; }
p[class] { font-size:20pt; }
</style>
</head>
<body>
<p> Simple attribute selector
sample</p>
<p class="textcolor"> This
paragraph has attribute
class</p>
<p> Next paragraph</p>
</body>
</html> In the above css code the attribute selector
find attribute name "class" exist in p element
and if exist it change the font size.

a[href="http://www.corelangs.com/default.
html"]
{ font-size:20pt; }
In the above code the style changes according to its attribute value. If any href
attribute with its value "http://www.corelangs.com/default.html" will change the
font size

<html>
<head>
a[href="http://www.corelangs.com/default.html"]
{ font-size:20pt; }
</style>
</head>
<body>
<a href="http://www.corelangs.com/about.html">About</a>
<br> <a
href="http://www.corelangs.com/default.html">Corelangs.Com</
a>
<br>
<a href="http://www.corelangs.com/sitemap.html">Sitemap</a>
</body>
</html>

<html>
<head>
.myredclass{ color: red; }
.blueclass{ color: blue; }
.green{ color: green; }
h1[class*="green"] { font-style: italic; }
</style>
</head>
<body>
<h1 class="myredclass">Red</h1>
<h1 class="blueclass" >Blue</h1> <h1
class="greenclass" >Green</h1>
</body>
</html>
OUTPUT:

<html>
<head>
.myredclass{ color: red; }
.blueclass{ color: blue; }
.green{ color: green; }
h1[class$="class"]
{ font-style: italic; }
</style>
</head>
<body>
<h1 class="myredclass">Red</h1>
<h1 class="blueclass" >Blue</h1>
<h1 class="green" >Green</h1>
</body>
</html>

 Selectors indicate where rules should apply
Selectors
Selector Type (example)
Universal (*) Wildcard applies to all element types in document
Type (body) Apply to specific elements
Class (.specialDates) Apply to elements with class attribute set to class name
ID (#myHomework) Apply to elements with ID attribute matching the name following
hash mark (#)
Descendent (body p) Apply to elements that belong to another element
Child (body > p) Apply to elements that are direct child of other element
Adjacent Sibling (p + ul) Matches an element that is at same level but after

Css basics

More Related Content

What's hot

Similar to Css basics

Recently uploaded

Css basics