CSS

www.SunilOS.com 1
www.sunilos.com
www.raystec.com
CSS

Cascading Style Sheets
CSS stands for Cascading Style Sheets.
CSS defines the look and feel of HTML
elements.
Styles were added to HTML 4.0.
External Style Sheets are stored in .css files.
It is a way to define themes of your HTML
Web Site.
2www.SunilOS.com 2

Apply Style
<p>This is a paragraph without style</p>
You can apply a CSS style to a HTML tag by
using “style” attribute. For example:
o <p style=“color : red;font-size:20px”>
 This is a paragraph with style
o </p>
3www.SunilOS.com 3

CSS Classes
Reusable styles are defined as classes in <style>
tag.
Defined classes can be applied to any HTML tag.
Usually classes are stored in a .css file that is
imported to HTML pages.
If you change property of class, it will change the
look and feel of its applied tags.
A class name is always prefixed by dot (.)
character.
4www.SunilOS.com 4

Simple error CSS Class
 Lets define a class named “error” that has font color red and font size
20. It is applied to a paragraph tag.
 <head>
o <style>
 .error{
• color : red;
• font-size : 20px;
 }
o </style>
 </head>
 <body>
o <p class=“error”>This is an error message</p>
 </body>

5www.SunilOS.com 5

More CSS classes
 .st-title {
 font-family: Verdana, Helvetica, Arial;
 font-size: 28px;
 font-weight: 600;
 color: #333333;
 }
 .st-subtitle {
 font-weight: 600;
 }
 .st-error-header {
 color: red;
 }
 CSS classes are defined to create a theme for your application.
6www.SunilOS.com 6

Change HTML tag default style
 You may change look and feel of a predefined HTML tag by
overriding its CSS style.
 <style>
o H1{
 color : red;
 font-size : 20px;
o }
 </style>
 …
 <H1>See here if your changes are applied</H1>
 <H1>See here if your changed are applied</H1>
7
www.SunilOS.com
7

Declaration of CSS
 CSS declaration consists of property & value pair.
 Properties are separated from their values by using colon
(:) character.
 Pairs are separated from each other by using semicolon (;).
o color : red;
o font-size : 20px;
 Pairs are enclosed by { } curly braces for a class.
o .st-error-header{
o color: red;
o font-size: 16px;
o }
8www.SunilOS.com 8

Selectors
Selectors are used to apply style to a
particular markup.
Selectors are normally the HTML element.
Selector never starts with a number.
Selector never contains space.
There are three types of Selectors:
o Tag Selector
o ID Selector
o Class Selector
9www.SunilOS.com 9

Selectors ( Cont.)
 Tag Selector
o p – paragraph
o h – heading
o a – hyperlink
 ID Selector
o #param
o #wrapper
 Class Selector
o .menu
o .title
o .subtitle
10www.SunilOS.com 10

1. Tag Selector
 Tag selector is used to redefine existing HTML tags.
 Selector is used when you want to change the formatting of
existing tags.
 Frequent redefined tags are H1, UL, P, A, etc.
 For example:
o H1{
 color: red;
 font-size: 20px;
o }
o th {
o text-align: center;
o }

2. ID Selector
 ID selector is used to specify a single, unique element.
 ID selector uses the id attribute of the HTML element .
 ID selector defines with “#”.
 Do not start an ID name with a number.
 <style>
 #param{
 test-align : center;
 font-size : 20px;
 }
 </style>
 <div id=“param”>……………</div>

3. Class Selector
 Class selector is used to specify a style for group of elements.
 Set a particular style for many HTML elements with the same class.
 Class selector defines with ”.”
 <style>
 .title{
 color : red ;
 font-size : 30px;
 }
 </style>
 <p class=“title”>……………</p>

Style Sheets
There are three ways to insert a style sheet
o Inline Style
o Internal Style Sheet
o External Style Sheet

Inline Style
CSS is applied in every HTML tag by Inline style.
For using Inline style, style attribute is used in
relevant tag.
Style attribute can contain any CSS property.
For example:
<p style="background: blue; color: white;">
o A new background and font color with inline CSS
</p>

Internal Style Sheet
Internal is the basic & easy way to insert
style in HTML.
In Internal style, <style></style> tag is added
in the <head></head> tag of HTML
document.
Internal Style Sheet should be used when a
single document has a unique style.

External Style Sheet
 External CSS is a file that contains only CSS code and is
saved with a ".css" file extension.
 This CSS file is then referenced in HTML using the <link>
tag instead of <style> tag.
 External style sheet is applied to many pages.
 External style sheet can change the entire look of website
by changing only one file.
 External style sheet keeps the design & content separate.
 We can reuse the CSS code.
17* www.SunilOS.com 17

External Style Sheet
<html>
o <head>
 <link rel="stylesheet" type="text/css" href=“sunrays.css" />
o </head>
<body>
o <h3> A White Header </h3>
o <p> See here the changes from external CSS file.</p>
</body>
</html>
* 18www.SunilOS.com 18

CSS3
 CSS3 is the latest standard of CSS.
 It contains the Old CSS Specification.
 It splits into Modules
o Selectors
o Box Model
o Background & Border
o Image Values & Replaced Content
o Text Effects
o 2D/3D Transformation
o Animations
o Multiple Column Layout
o User Interface

CSS3 Fonts
 CSS3 Fonts is advanced feature of CSS3.
 It is used to improve the web designing.
 We can create different type of font styles.

 .font4
 {
 font-family: 'Rochester', cursive;
 color: blue;
 line-height: 1.3em;
 }
 Output :

CSS3 Text Effects
 CSS3 text effect is used to extend the text feature for
viewing & layout purpose.
 Main properties of CSS3 are :
o Text-Shadow
o Word-Wrap
 Test Shadow is used to create the shadow around the text.
 We can also change the color of shadow.
 Word-Wrap is used to break the continued text in another
line.

CSS3 Text Effects
 <style>
 #text_shadow{
 text-shadow: 20px 20px 10px #009933;
 }
 #word_wrap{
 word-wrap:break-word;
 width:150px;
 border:1px solid #ff0000;
 }
 </style>
 <body>
 <div id="text_shadow"><h1>Text Shadow</h1></div>
 <div id="word_wrap">you can break the line
hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.</div>
 </body>
22* www.SunilOS.com 22

Background Model
 CSS3 allows you to add multiple background images.
 We use background image property for adding background
images.
 Background images are separated by commas( , ).
 #mycss{
• background-image : url(abc.gif), url(xyz.gif);
• background-position : right bottom, left top;
• background-repeat : no-repeat , repeat;
• }
 <body>
 <div id=“mycss”>……………</div>
 </body>

Background size
CSS3 allows you to re-use the background images
in different context.
We use background-size property for specify the
size of the background images.
Size can be specified in lengths, percentages or by
using two keywords :
o Contain : scales background image as large as possible.
o Cover : scales the background image so that the content
area is completely covered.

Border Images
CSS3 allows to add border image instead of
normal border.
We can add border image by using border-
image property.
The border-image property has three parts:
o Use as a border.
o Slice the image.
o Middle sections should be repeated or stretched.

CSS3 Colors
CSS supports color names, hexadecimal
and RGB colors.
In addition, CSS3 also introduces:
RGBA colors
HSL colors
HSLA colors
Opacity

CSS3 Text shadow
Text-shadow property applies shadow to
text.
You can specify the horizontal shadow and
the vertical shadow.
 h1 {
text-shadow: 2px 2px;
}

Multiple Shadows
To add more than one shadow to the text, you can
add a comma-separated(,) list of shadows.
 h1 {
text-shadow: 0 0 3px #FF0000,005px #0000FF;
}

CSS3 Transforms
CSS3 transforms allow you to translate,
rotate, scale, and skew elements.
It supports
o 2D Transformations
o 3D Transformations

2D Transformation
2D transformation has following methods.
o translate()
o rotate()
o scale()
o skewX()
o skewY()
o matrix()

translate() Method
 translate() method moves an element from its current position according
to the parameters given for the X-axis and the Y-axis.
 div {
 width: 300px;
 height: 100px;
 background-color: yellow;
 border: 1px solid black;
 transform: translate(50px,100px);
 }
www.SunilOS.com 31

rotate() Method
 The rotate() method rotates an element clockwise or counter-clockwise
according to a given degree.
 div{
 width: 300px;
 height: 100px;
 }
 #myCss{
 transform: rotate(20deg); /* Standard syntax */
 }
www.SunilOS.com 32

scale() Method
 scale() method increases or decreases the size of an element
according to the parameters given for the width and height.
 <style>
 div {
 margin: 150px;
 width: 200px;
 height: 100px;
 transform: scale(25,30);
 }
 </style>
www.SunilOS.com 33

skewX() Method
 The skewX() method skews an element along the X-axis by the given
angle
 <style>
 div {
 width: 300px;
 height: 100px;
 }
 #myDiv {
 transform: skewX(20deg);
 }
 </style>
www.SunilOS.com 34

skewY() method
 skewY() method skews an element along the Y-axis by the given
angle.
 <style>
 div {
 width: 300px;
 height: 100px;
 }
 #myCss{
 transform: skewY(20deg);
 }
 </style>
www.SunilOS.com 35

skew() method
 skew() method skews an element along the X and Y-axis by the given
angles.
 <style>
 div {
 width: 300px;
 height: 100px;
 }
 #myCss{
 transform: skew(20deg,10deg);
 }
 </style>
www.SunilOS.com 36

3D Transformation
Used to change the actual form of element.
By this we can change shape, sixe &
position of an element.
3D tansformation is used for the following
methods.
o rotateX() : rotate object towards X-axis.
o rotateY() : rotate object towards Y-axis.
www.SunilOS.com 37

Disclaimer
This is an educational presentation to enhance the
skill of computer science students.
This presentation is available for free to computer
science students.
Some internet images from different URLs are
used in this presentation to simplify technical
examples and correlate examples with the real
world.
We are grateful to owners of these URLs and
pictures.
www.SunilOS.com 38

Thank You!
www.SunilOS.com 39
www.SunilOS.com

CSS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (14)

Similaire à CSS

Similaire à CSS (20)

Plus de Sunil OS

Plus de Sunil OS (20)

Dernier

Dernier (20)

CSS