CSS

What is CSS?
The Cascading Style Sheets Specification (CSS) is a computer language that is
used to write formatting instructions (rules). These rules tell a web browser how webpage
content should ‘look’— in terms of:
 Layout:>
position, alignment, width, height, etc.
 Style:>
typeface, font-weight, color, border, etc.

CSS Selectors
There are two most important selector where selectors are patterns used to select
the element(s) you want to style
 Id selector:>
Selects all elements with class
example: class=“Info”
 Class Selector:>
Selects the element with id
example: id=“firstname”

Types of CSS Styles
Inline Style
Internal (embedded) style
External Style

Inline CSS Stylesheet
 Inline styles can not be reused in web page.
 Inline styles are placed directly inside the HTML element
in code.
 All the code for the Internal CSS stylesheet is contained
between the <head></head> section of your websites
code
Example:
<p style="color:red;font-size:18px">This is a paragraph!</p>

Internal CSS Stylesheet
 Internal Styles are placed inside the <head> section of a particular
web page.
 These styles can be used only for the web page in which they are
embedded.
 Advanced used of internal styles unless you need to override an
External Style.
Example:
<head>
<style type="text/css">
h1 {color:blue;}
h2 {color:red;}
</style>
</head>

External CSS Stylesheet
 An External style sheet is a separate page (file) which is
then linked to the web page. Therefore, the styles are
External to, or outside of, the Web Page
 The External style sheet is basically a text file that is
saved as .css file
Example:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

Responsive Design
 Responsive web design (RWD) is an approach to web design aimed
at crafting sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a wide
range of devices (from desktop computer monitors to mobile phones).
 Responsive design is an approach to web page creation that makes use
of flexible layouts, flexible images and cascading style sheet media
queries. The goal of responsive design is to build web pages that detect the
visitor’s screen size and orientation and change the layout according

Media Queries
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and
(orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and
(orientation : portrait) {
/* Styles */
}

/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width :
1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
/* Styles */
}

/* Large screens ----------- */
/* Styles */
}
/* iPhone 4 ----------- */
480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

How To Make Web Page Responsive
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

CSS

More Related Content

What's hot

Similar to CSS

CSS