SlideShare a Scribd company logo
by  DHANESH.T.S CSS
What    is  Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.  PUNE  IT  LABS
Advantages of CSS Completely consistent with the look and feel of your pages  More control over the layout and design  Pages download faster, sometimes by as much as 50%  You have to type less code, and your pages are shorter and neater.  CSS properties can also be dynamically changed with a JavaScript. eg.  object .style.cssFloat="left"  PUNE  IT  LABS
. With a combination of positioning, floating, margins, padding and borders, you should be able to represent ANY web design and there is nothing that can be done in tables that can not be done with CSS. PUNE  IT  LABS

Recommended for you

css.ppt
css.pptcss.ppt
css.ppt

This document provides an introduction to Cascading Style Sheets (CSS) including its syntax, types, selectors and an example program. CSS allows styling web pages by separating design from content. CSS rules consist of selectors and declaration blocks with properties and values. There are three types of CSS styles: internal, inline, and external. Common selectors include element, ID, class, and grouping selectors. An example program demonstrates using CSS to style an HTML table with borders, padding, and rounded corners.

css.types of css
Id and class selector
Id and class selectorId and class selector
Id and class selector

ID selectors target individual elements by ID, preceded by #, and IDs must be unique. Class selectors target elements of the same class, preceded by a dot, and the same class can be applied to multiple elements. They were differentiated - IDs target unique elements while classes can target multiple. An example was given combining ID and class selectors in HTML and applying CSS styles.

Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS

CSS is used to style and lay out web pages. It allows separation of document content from page layout and design. CSS declarations are made up of selectors and properties. Selectors identify elements on the page and properties set specific styles for those elements, like color, font, size, and layout. CSS rules cascade based on specificity and source, with more specific and inline rules taking precedence over broader and external rules. Inheritance passes down text-based styles by default.

htmlbeginnercss
There are three parts to CSS The styles a blue headline eg: <font color=&quot;#0000ff&quot;><h4>a blue headline</h4></font>  a blue headline Their placement The fact that they can cascade. PUNE  IT  LABS
Where HTML has tags, CSS has 'selectors'.   A Cascading Style Sheets rule is made up of a selector and a declaration. H2 {color: blue;} selector {declaration;} The declaration is the part of the rule inside the curly braces. It specifies what a style effect will be. For example, &quot;color: blue&quot;. Eg:   body {       font-size: 12px;       color: navy;  }   PUNE  IT  LABS
A declaration has two parts separated by a colon: property and value. selector {property:value} More than one declaration may be placed inside the curly braces  A semi-colon must separate each declaration from the next. The ending declaration does not require a semi-colon  Eg.  selector {property:value; property:value;}   H2 {color:blue; font-family:Arial, sans-serif;} If you neglect to place a semi-colon between any two declarations your style sheet will totally fail.  H1 {font-family:Arial, Helvetica, sans-serif;} H2 {font-family:Arial, Helvetica, sans-serif;} H3 {font-family:Arial, Helvetica, sans-serif;}   H1, H2, H3 {font-family:Arial, Helvetica, sans-serif;} PUNE  IT  LABS
In-line Internal External Applying CSS PUNE  IT  LABS

Recommended for you

Css
CssCss
Css

This document provides an overview of Cascading Style Sheets (CSS) including: - CSS handles the look and feel of web pages by controlling colors, fonts, spacing, layouts, backgrounds and more. - CSS versions include CSS1 for basic formatting, CSS2 for media styles and positioning, and CSS3 for new features like colors and transforms. - There are three ways to apply stylesheets: inline with HTML tags, internally within <style> tags, and externally with <link> tags. - The Style Builder in Microsoft allows applying styles through a dialog box with options for fonts, backgrounds, text, positioning, and other properties. Basic CSS syntax uses selectors and properties to

cascading style sheetswebstyle builder
Basic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdfBasic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdf

This document provides an introduction to HTML and CSS. It defines HTML as a markup language used to structure web pages with tags, and CSS as a style sheet language used to describe how HTML elements are displayed. It lists common HTML elements like headings, paragraphs, and divs that can be block or inline, and describes how CSS can be applied internally, inline, or via external stylesheets to control things like colors, fonts, and layout. Key differences between HTML and CSS are also outlined, with HTML for structure and CSS for presentation.

CSS
CSSCSS
CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. CSS allows you to control the color, font, size, spacing, and other aspects of HTML elements. CSS properties like background, text, font, links, lists and box model can be used to format HTML elements. CSS rules have selectors that specify the element to which a declaration applies, and declarations that contain property-value pairs that define the presentation of the element.

<p style=&quot;color: red&quot;>Sample text</p>   In-line HTML should be a  presentation free  document, and so in-line styles should be avoided wherever possible. PUNE  IT  LABS
<html>    <head>    <title>CSS Example</title>    <style type=&quot;text/css&quot;>        p {          color: red;          }      a {              color: blue;          }     </style>     .......  Internal PUNE  IT  LABS
p {        color: red;   }   a {        color: blue;   }   <html>  <head>  <title>CSS Example</title>       <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;web.css&quot; />   ...  External PUNE  IT  LABS
Lengths and Percentages There are specific units for values used in CSS, but there are some general units that are used in a number of properties Such as-  em  (such as font-size: 2em) ex  (one ex is the x-height of a font (x-height is usually about half the font-size)   px  (such as font-size: 12px)  pixels  pt  (such as font-size: 12pt)  point (1 pt is the same as 1/72 inch)  pc  pica (1 pc is the same as 12 points)  %  (such as font-size: 80%)percentage Other units include  cm  (centimetres),  mm  (millimetres) and  in  (inches). When a value is  zero , you do not need to state a unit.  Eg: border : 0 PUNE  IT  LABS

Recommended for you

Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation

The document covers various topics related to CSS including CSS introduction, syntax, selectors, inclusion methods, setting backgrounds, fonts, manipulating text, and working with images. Key points include how CSS handles web page styling, the advantages of CSS, CSS versions, associating styles using embedded, inline, external and imported CSS, and properties for backgrounds, fonts, text formatting, and images.

presentationcsscss presentation
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS

This document provides an introduction to cascading style sheets (CSS) and covers several key concepts: CSS is used to style and lay out web pages and defines how HTML elements are displayed. Styles are normally saved in external CSS files so the appearance of an entire website can be changed by editing one file. A CSS rule has a selector that specifies which element the rule applies to and declarations that define properties for that element. Comments can be added to CSS code to explain it. Different selectors like ID, class, and inline styles allow targeting specific elements. The order of style precedence determines which styles get applied when multiple styles conflict. Background properties are used to define and customize element backgrounds.

csshtmlweb
Basic HTML
Basic HTMLBasic HTML
Basic HTML

The document provides information about HTML (Hypertext Markup Language): 1. HTML is the standard markup language used to create web pages and defines the structure and layout of a web page. 2. HTML uses tags to annotate text with semantic information like headings, paragraphs, links, quotes, etc. and the tags are enclosed in angle brackets. 3. Basic HTML tags include <html>, <head>, <title>, <body>, <h1>-<h6> for headings, <p> for paragraphs, <a> for links, <img> for images, and <br> for line breaks.

htmlsayan deyuniversity of calcutta
Different foms: Name of Colour RGB HEX code CSS brings 16 million  colours to Web Page. There are 17 valid predefined colour names.  They are  -  aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. PUNE  IT  LABS
red rgb(255,0,0) rgb(100%,0%,0%) #ff0000 #f00 transparent  is also a valid value. The three values in the rbg value are from 0 to 255. Hexadecimal  is a  base-16  number system. hexadecimal has 16 digits, from 0 to f. The hex number is prefixed with a hash character ( # ) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.).  PUNE  IT  LABS
None  : The element will not be displayed. p {display : none} Block  : The element will be displayed as a block-level element, with a line break before and after the element. p {display : block} Inline  : The element will be displayed as an inline element, with no line break before or after the element. p {display : inline} PUNE  IT  LABS
Other display types ol ul PUNE  IT  LABS

Recommended for you

Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial

The document provides an overview of basic CSS (Cascading Style Sheets) concepts including what CSS is, why it is used, CSS syntax, selectors like element, class, ID and pseudo selectors, and common CSS properties for styling elements like color, background, fonts, text, lists, and borders. CSS is used to control the presentation and layout of HTML documents and is linked to HTML pages through <link> or <style> tags in the <head> section.

csstutorial
CSS
CSSCSS
CSS

CSS (Cascading Style Sheets) allows styling and layout of HTML documents by separating the presentation from the content, making it possible to change the look of an entire website by editing one CSS file. CSS uses selectors to apply specific styles to HTML elements via declarations that set properties like color, font, size and more. Styles are defined in CSS files and can be applied to HTML documents via internal, external, and inline styling methods.

css idcsslists
Css font properties
Css font propertiesCss font properties
Css font properties

This document discusses CSS font properties and how to style text using CSS. It defines font-family, font-size, font-style, font-variant, and font-weight properties and provides examples of how to set each one. It also includes a quiz asking the reader to write CSS code to set various font properties individually and together in one declaration.

Static Relative Absolute Fixed PUNE  IT  LABS
Static: The value static is the default value for elements and renders the position in the normal order of things as they appear in the html Relative: It is much like static, but the element can be offset from its original position with the properties  top ,  right ,  bottom  and  left  . Absolute: The absolute element can be placed anywhere on the page using  top ,  right ,  bottom  and  left  . Fixed: It behaves like absolute, but fixed elements should stay exactly where they are on the screen even when the page is scrolled.  PUNE  IT  LABS
Floating an element will shift it to the right or left of a line, with surrounding content flowing around it. Floating is normally used to position smaller elements within a page  Eg: img   {   float: left   }  PUNE  IT  LABS
Clear: The CSS clear property is used to for control flow when using the float property. Using CSS clear, you can specify whether to keep one or both sides of an element &quot;clear&quot; (i.e. no elements can appear on the side that is clear).  none - floating elements can appear on either side  left - floating elements can not appear on the left (i.e. keep the left side &quot;clear&quot;)  right - floating elements can not appear on the right (i.e. keep the right side &quot;clear&quot;)  both - floating elements can not appear on the left or right (i.e. keep both sides &quot;clear&quot;)  inherit  PUNE  IT  LABS

Recommended for you

Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets

The document discusses an agenda for a class on CSS (Cascading Style Sheets). The agenda includes learning what CSS is and its importance, understanding CSS grammar and syntax, linking a CSS file to HTML, creating a designer's toolbox, designing a basic webpage with CSS, and commenting in CSS. It also provides examples of CSS code, instructions on adding CSS to HTML pages, and homework of creating a basic webpage and CSS file.

Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation

HTML is used to create web documents and consists of text and markup tags to define structure, appearance, and hyperlinks. There are two types of tags: container tags define sections of text using start and end tags, and empty tags represent single occurrences like line breaks. CSS is used to style HTML documents and consists of rules with selectors and declarations specifying properties and values to control styling. PHP is a widely used server-side scripting language with roots in C and C++ that is commonly used with MySQL, a popular open-source database, to create dynamic web applications.

Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS

The document provides an overview of HTML and CSS, covering topics such as the structure of an HTML document, HTML tags, CSS, and how to create a basic webpage. It discusses what HTML and CSS are, why they are needed, popular HTML tags, and gives examples of adding CSS to an HTML document. It also provides a hands-on tutorial showing how to build a simple website covering HTML basics and using CSS for styling.

web designsyed samipresentation
Font-family The font you specify must be on the user's computer, so there is little point in using obscure fonts. The most commonly used are arial, verdana and times new roman), but you can specify more than one font, separated by  commas . If the name of the font is more than one word it should be  put in quotation marks (“------“) Font-size The size of the font. Be careful with this - text such as headings should not just be a paragraph in a large font; you should still use headings ( h1 ,  h2  etc.) PUNE  IT  LABS
Font-weight This states whether the text is bold or not.  Commonly used are  font-weight: bold or font-weight: normal. In theory it can also be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900 Font-style font-style:  italic  or font-style: normal . Text-decoration This states whether the text is underlined or not.  text-decoration: overline text-decoration: line-through , strike-through,  text-decoration: underline (  should only be used for links ) This property is usually used to decorate links, such as specifying no underline with  text-decoration: none. PUNE  IT  LABS
text-transform This will change the case of the text. text-transform: capitalize   text-transform: uppercase   text-transform: lowercase   text-transform: none Text spacing letter-spacing  and  word-spacing   line-height   text-align text-indent Eg.   p {       letter-spacing: 2px;        word-spacing: 3px;        line-height: 4px;        text-align: center;   }  PUNE  IT  LABS
Margins and Padding Margins  and  Padding  are the two most commonly used properties for spacing-out elements. A margin is the space  outside  of the element, whereas padding is the space  inside  the element. Eg: h2 {      font-size: 10px;      background-color: #1F488D;      margin: 10px;      padding: 5px;  }  PUNE  IT  LABS

Recommended for you

Javascript
JavascriptJavascript
Javascript

JavaScript is a client-side scripting language that can be inserted into HTML pages to make them interactive. It allows dynamic validation of forms, changing HTML element properties like visibility, and reacting to user events like clicks or form submissions. The Document Object Model (DOM) represents an HTML or XML document as a tree structure, allowing JavaScript to programmatically access and modify the content, structure, and styling of the document. Common built-in JavaScript objects include String, Date, Array, Math, and Boolean, which provide properties and methods for manipulating text, dates, lists of values, numbers, and true/false values.

Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS

The document provides an agenda for a workshop on HTML, CSS, and putting them together. It covers HTML topics like semantic tags, comments, and best practices. It then discusses CSS topics such as IDs vs classes, floats, shorthand, and putting HTML and CSS together with project structure and layouts. The workshop aims to give an introduction to HTML, CSS, and how to structure websites using these languages.

layoutcsshtml5
CSS
CSSCSS
CSS

CSS (Cascading Style Sheets) is a language used to describe the presentation of HTML documents, including how elements are displayed on screen, paper, or in other media. It allows separation of document content from document presentation and styling. CSS properties specify features like text styling, backgrounds, borders, positioning, and layout. CSS can be applied to HTML documents as well as XML documents like SVG and XUL.

Padding padding can have:  #sample  { padding: 10px; } #sample  { padding: 10px 5px } #sample  { padding: 10px 5px 2px } #sample  { padding: 10px 5px 2px 5px } one value, such as 10px, to specify equal padding on every side  two values, such as 10px 5px, to specify top/bottom (first value) and right/left (second value) padding  three values, such as 10px 5px 2px, to specify top (first value), right/left (second value) and bottom (third value) padding  four values, such as 10px 5px 2px 1px to specify top, right, bottom and left padding respectively  PUNE  IT  LABS
Borders  can be applied to most HTML elements within the body. border-style The values can be  solid ,  dotted ,  dashed ,  double ,  groove ,  ridge ,  inset  and  outset . border-width   border-top-width ,  border-right-widht ,  border-bottom-width  and  border-left-width border-color   Add the following code to the CSS file: Eg.   h2 {     border-style: dashed;       border-width: 3px;     border-left-width: 10px;      border-right-width: 10px;       border-color: red;  }  PUNE  IT  LABS
PUNE  IT  LABS by- DHANESH.T.S

More Related Content

What's hot

Css selectors
Css selectorsCss selectors
Css selectors
Parth Trivedi
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
WordPress Memphis
 
Css
CssCss
css.ppt
css.pptcss.ppt
css.ppt
bhasula
 
Id and class selector
Id and class selectorId and class selector
Id and class selector
MyCredentials YourReference
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Amit Tyagi
 
Css
CssCss
Basic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdfBasic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdf
Kalyani Government Engineering College
 
CSS
CSSCSS
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
Salman Memon
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Folasade Adedeji
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
Sayan De
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
tutorialsruby
 
CSS
CSSCSS
Css font properties
Css font propertiesCss font properties
Css font properties
Jesus Obenita Jr.
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
St. Petersburg College
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
umesh patil
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
Syed Sami
 
Javascript
JavascriptJavascript
Javascript
mussawir20
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 

What's hot (20)

Css selectors
Css selectorsCss selectors
Css selectors
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Css
CssCss
Css
 
css.ppt
css.pptcss.ppt
css.ppt
 
Id and class selector
Id and class selectorId and class selector
Id and class selector
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css
CssCss
Css
 
Basic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdfBasic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdf
 
CSS
CSSCSS
CSS
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
 
CSS
CSSCSS
CSS
 
Css font properties
Css font propertiesCss font properties
Css font properties
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
Javascript
JavascriptJavascript
Javascript
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 

Similar to CSS for Beginners

CSS
CSSCSS
CSS
ARJUN
 
Css
CssCss
CSS ppt
CSS pptCSS ppt
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
sanjay2211
 
CSS
CSSCSS
CSS
bjornh
 
Cascading Style Sheet presentation .pptx
Cascading Style Sheet presentation .pptxCascading Style Sheet presentation .pptx
Cascading Style Sheet presentation .pptx
ShyamKumarSahu2
 
CSS For Online Journalism
CSS For Online JournalismCSS For Online Journalism
CSS For Online Journalism
amherstwire
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
Rex Wang
 
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdfcascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
hinalsomani93
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
Bulldogs83
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
Bulldogs83
 
L4 Fashioning Text Styles and Colors
L4   Fashioning Text Styles and ColorsL4   Fashioning Text Styles and Colors
L4 Fashioning Text Styles and Colors
mykella
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
syedfaisal759877
 
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common Errors
Hock Leng PUAH
 
CSS
CSSCSS
Css.prabu
Css.prabuCss.prabu
Css.prabu
Prabu Cse
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
EPAM Systems
 
Css
CssCss
Css
CssCss
Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3
Gheyath M. Othman
 

Similar to CSS for Beginners (20)

CSS
CSSCSS
CSS
 
Css
CssCss
Css
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
 
CSS
CSSCSS
CSS
 
Cascading Style Sheet presentation .pptx
Cascading Style Sheet presentation .pptxCascading Style Sheet presentation .pptx
Cascading Style Sheet presentation .pptx
 
CSS For Online Journalism
CSS For Online JournalismCSS For Online Journalism
CSS For Online Journalism
 
CSS3 notes
CSS3 notesCSS3 notes
CSS3 notes
 
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdfcascading stylesheet_cssppt-100604051600-phpapp02.pdf
cascading stylesheet_cssppt-100604051600-phpapp02.pdf
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
L4 Fashioning Text Styles and Colors
L4   Fashioning Text Styles and ColorsL4   Fashioning Text Styles and Colors
L4 Fashioning Text Styles and Colors
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
 
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common Errors
 
CSS
CSSCSS
CSS
 
Css.prabu
Css.prabuCss.prabu
Css.prabu
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3
 

More from Amit Kumar Singh

Improving Core Web Vitals for WordPress
Improving Core Web Vitals for WordPressImproving Core Web Vitals for WordPress
Improving Core Web Vitals for WordPress
Amit Kumar Singh
 
Getting started with WordPress Development
Getting started with WordPress DevelopmentGetting started with WordPress Development
Getting started with WordPress Development
Amit Kumar Singh
 
Alternate Development Techniques on WordPress
Alternate Development Techniques on WordPressAlternate Development Techniques on WordPress
Alternate Development Techniques on WordPress
Amit Kumar Singh
 
Building Minimal Viable Product (MVP) with WordPress
Building Minimal Viable Product (MVP) with WordPressBuilding Minimal Viable Product (MVP) with WordPress
Building Minimal Viable Product (MVP) with WordPress
Amit Kumar Singh
 
Rapid Prototyping With WordPress
Rapid Prototyping With WordPressRapid Prototyping With WordPress
Rapid Prototyping With WordPress
Amit Kumar Singh
 
Stop Coding; Start Assembling Your Websites
Stop Coding; Start Assembling Your WebsitesStop Coding; Start Assembling Your Websites
Stop Coding; Start Assembling Your Websites
Amit Kumar Singh
 
WordPress as Rapid Prototyping Tool
WordPress as Rapid Prototyping ToolWordPress as Rapid Prototyping Tool
WordPress as Rapid Prototyping Tool
Amit Kumar Singh
 
WordPress Use Cases
WordPress Use CasesWordPress Use Cases
WordPress Use Cases
Amit Kumar Singh
 
Leveraging your business with WordPress
Leveraging your business with WordPressLeveraging your business with WordPress
Leveraging your business with WordPress
Amit Kumar Singh
 
Maharashtra at a glance
Maharashtra at a glanceMaharashtra at a glance
Maharashtra at a glance
Amit Kumar Singh
 
Custom Post Type and Taxonomies in WordPress 3.x
Custom Post Type and Taxonomies in WordPress 3.xCustom Post Type and Taxonomies in WordPress 3.x
Custom Post Type and Taxonomies in WordPress 3.x
Amit Kumar Singh
 
WPoid : You Blog, We Take Care Of The Rest
WPoid : You Blog, We Take Care Of The RestWPoid : You Blog, We Take Care Of The Rest
WPoid : You Blog, We Take Care Of The Rest
Amit Kumar Singh
 
Joomla Day India 2009 Business Logic With The Mvc
Joomla Day India 2009   Business Logic With The MvcJoomla Day India 2009   Business Logic With The Mvc
Joomla Day India 2009 Business Logic With The Mvc
Amit Kumar Singh
 
Joomla Request To Response
Joomla Request To ResponseJoomla Request To Response
Joomla Request To Response
Amit Kumar Singh
 
Introduction to web services and how to in php
Introduction to web services and how to in phpIntroduction to web services and how to in php
Introduction to web services and how to in php
Amit Kumar Singh
 
Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5
Amit Kumar Singh
 
Php Security
Php SecurityPhp Security
Php Security
Amit Kumar Singh
 
Open Social Phpcamp
Open Social PhpcampOpen Social Phpcamp
Open Social Phpcamp
Amit Kumar Singh
 
Overview Of Drupal
Overview Of DrupalOverview Of Drupal
Overview Of Drupal
Amit Kumar Singh
 
PHP tips by a MYSQL DBA
PHP tips by a MYSQL DBAPHP tips by a MYSQL DBA
PHP tips by a MYSQL DBA
Amit Kumar Singh
 

More from Amit Kumar Singh (20)

Improving Core Web Vitals for WordPress
Improving Core Web Vitals for WordPressImproving Core Web Vitals for WordPress
Improving Core Web Vitals for WordPress
 
Getting started with WordPress Development
Getting started with WordPress DevelopmentGetting started with WordPress Development
Getting started with WordPress Development
 
Alternate Development Techniques on WordPress
Alternate Development Techniques on WordPressAlternate Development Techniques on WordPress
Alternate Development Techniques on WordPress
 
Building Minimal Viable Product (MVP) with WordPress
Building Minimal Viable Product (MVP) with WordPressBuilding Minimal Viable Product (MVP) with WordPress
Building Minimal Viable Product (MVP) with WordPress
 
Rapid Prototyping With WordPress
Rapid Prototyping With WordPressRapid Prototyping With WordPress
Rapid Prototyping With WordPress
 
Stop Coding; Start Assembling Your Websites
Stop Coding; Start Assembling Your WebsitesStop Coding; Start Assembling Your Websites
Stop Coding; Start Assembling Your Websites
 
WordPress as Rapid Prototyping Tool
WordPress as Rapid Prototyping ToolWordPress as Rapid Prototyping Tool
WordPress as Rapid Prototyping Tool
 
WordPress Use Cases
WordPress Use CasesWordPress Use Cases
WordPress Use Cases
 
Leveraging your business with WordPress
Leveraging your business with WordPressLeveraging your business with WordPress
Leveraging your business with WordPress
 
Maharashtra at a glance
Maharashtra at a glanceMaharashtra at a glance
Maharashtra at a glance
 
Custom Post Type and Taxonomies in WordPress 3.x
Custom Post Type and Taxonomies in WordPress 3.xCustom Post Type and Taxonomies in WordPress 3.x
Custom Post Type and Taxonomies in WordPress 3.x
 
WPoid : You Blog, We Take Care Of The Rest
WPoid : You Blog, We Take Care Of The RestWPoid : You Blog, We Take Care Of The Rest
WPoid : You Blog, We Take Care Of The Rest
 
Joomla Day India 2009 Business Logic With The Mvc
Joomla Day India 2009   Business Logic With The MvcJoomla Day India 2009   Business Logic With The Mvc
Joomla Day India 2009 Business Logic With The Mvc
 
Joomla Request To Response
Joomla Request To ResponseJoomla Request To Response
Joomla Request To Response
 
Introduction to web services and how to in php
Introduction to web services and how to in phpIntroduction to web services and how to in php
Introduction to web services and how to in php
 
Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5Getting Started With Php Frameworks @BCP5
Getting Started With Php Frameworks @BCP5
 
Php Security
Php SecurityPhp Security
Php Security
 
Open Social Phpcamp
Open Social PhpcampOpen Social Phpcamp
Open Social Phpcamp
 
Overview Of Drupal
Overview Of DrupalOverview Of Drupal
Overview Of Drupal
 
PHP tips by a MYSQL DBA
PHP tips by a MYSQL DBAPHP tips by a MYSQL DBA
PHP tips by a MYSQL DBA
 

Recently uploaded

Business model Lean format - sample Feb23.pdf
Business model Lean format - sample Feb23.pdfBusiness model Lean format - sample Feb23.pdf
Business model Lean format - sample Feb23.pdf
Thales Jacobi
 
Entrepreneurial mindset: An Introduction to Entrepreneurship
Entrepreneurial mindset: An Introduction to EntrepreneurshipEntrepreneurial mindset: An Introduction to Entrepreneurship
Entrepreneurial mindset: An Introduction to Entrepreneurship
Sanjay Joshi
 
Travel Tech Pitch Deck | ByeByeCity,com - Short Breaks Discovery & Booking Pl...
Travel Tech Pitch Deck | ByeByeCity,com - Short Breaks Discovery & Booking Pl...Travel Tech Pitch Deck | ByeByeCity,com - Short Breaks Discovery & Booking Pl...
Travel Tech Pitch Deck | ByeByeCity,com - Short Breaks Discovery & Booking Pl...
Rajesh Math
 
حبوب سايتوتك للبيع في الامارات اشراف دكتورة 00966583759617
حبوب سايتوتك للبيع في الامارات اشراف دكتورة 00966583759617حبوب سايتوتك للبيع في الامارات اشراف دكتورة 00966583759617
حبوب سايتوتك للبيع في الامارات اشراف دكتورة 00966583759617
حبوب الاجهاض سايتوتك للبيع في الامارات cytotec واتس 00966583759617
 
Globalization strategy for Meesho with respect to Shopee
Globalization strategy for Meesho with respect to ShopeeGlobalization strategy for Meesho with respect to Shopee
Globalization strategy for Meesho with respect to Shopee
AsmitaSinghaRoy1
 
ConvertKit: Best Email Marketing Tool for 2024
ConvertKit: Best Email Marketing Tool for 2024ConvertKit: Best Email Marketing Tool for 2024
ConvertKit: Best Email Marketing Tool for 2024
Rakesh Jalan
 
Christmas Decorations_ A Guide to Small Christmas Trees, Candle Centerpieces,...
Christmas Decorations_ A Guide to Small Christmas Trees, Candle Centerpieces,...Christmas Decorations_ A Guide to Small Christmas Trees, Candle Centerpieces,...
Christmas Decorations_ A Guide to Small Christmas Trees, Candle Centerpieces,...
Lynch Creek Farm
 
PETAVIT MICHAEL TAY.pdfAAAAAAAAAAAAAAAAAAAA
PETAVIT MICHAEL TAY.pdfAAAAAAAAAAAAAAAAAAAAPETAVIT MICHAEL TAY.pdfAAAAAAAAAAAAAAAAAAAA
PETAVIT MICHAEL TAY.pdfAAAAAAAAAAAAAAAAAAAA
lawrenceads01
 
Navigating Change Strategies for Effective Transition and Operational Plannin...
Navigating Change Strategies for Effective Transition and Operational Plannin...Navigating Change Strategies for Effective Transition and Operational Plannin...
Navigating Change Strategies for Effective Transition and Operational Plannin...
Brian Frerichs
 
Expert International Executive Recruiters for Global Expansion
Expert International Executive Recruiters for Global ExpansionExpert International Executive Recruiters for Global Expansion
Expert International Executive Recruiters for Global Expansion
Alliance Recruitment Agency - Staffing Agency In California, Esplanade Avenue, Pacifica, CA, USA
 
PROVIDING THE WORLD WITH EFFECTIVE & EFFICIENT LIGHTING SOLUTIONS SINCE 1976
PROVIDING THE WORLD WITH EFFECTIVE & EFFICIENT LIGHTING SOLUTIONS SINCE 1976PROVIDING THE WORLD WITH EFFECTIVE & EFFICIENT LIGHTING SOLUTIONS SINCE 1976
PROVIDING THE WORLD WITH EFFECTIVE & EFFICIENT LIGHTING SOLUTIONS SINCE 1976
PYROTECH GROUP
 
Satta matka guessing Kalyan result sattamatka
Satta matka guessing Kalyan result sattamatkaSatta matka guessing Kalyan result sattamatka
Satta matka guessing Kalyan result sattamatka
➑➌➋➑➒➎➑➑➊➍
 
JD Euroway Report 2024 : Shocking Revelations
JD Euroway Report 2024 : Shocking RevelationsJD Euroway Report 2024 : Shocking Revelations
JD Euroway Report 2024 : Shocking Revelations
JD Euroway
 
Research Methodology, Objectives, Types and Significance of Research
Research Methodology, Objectives, Types and Significance of ResearchResearch Methodology, Objectives, Types and Significance of Research
Research Methodology, Objectives, Types and Significance of Research
indumathi967565
 
Commercial Roofing Contractors Chennai.pptx
Commercial Roofing Contractors Chennai.pptxCommercial Roofing Contractors Chennai.pptx
Commercial Roofing Contractors Chennai.pptx
Roofing Contractor
 
Discover who your target audience is and reach them
Discover who your target audience is and reach themDiscover who your target audience is and reach them
Discover who your target audience is and reach them
Quibble
 
ADANI WILMAR PREDICTS GROWTH IN ITS SALES VOLUME THIS FISCAL YEAr.pptx
ADANI WILMAR PREDICTS GROWTH IN ITS SALES VOLUME THIS FISCAL YEAr.pptxADANI WILMAR PREDICTS GROWTH IN ITS SALES VOLUME THIS FISCAL YEAr.pptx
ADANI WILMAR PREDICTS GROWTH IN ITS SALES VOLUME THIS FISCAL YEAr.pptx
Adani case
 
TPH Global Solutions Overview: Successful Strategies for Selling to Mass Merc...
TPH Global Solutions Overview: Successful Strategies for Selling to Mass Merc...TPH Global Solutions Overview: Successful Strategies for Selling to Mass Merc...
TPH Global Solutions Overview: Successful Strategies for Selling to Mass Merc...
David Schmidt
 
The AI-Powered Side Hustle Transforming Lives: A Dad's Journey to Financial S...
The AI-Powered Side Hustle Transforming Lives: A Dad's Journey to Financial S...The AI-Powered Side Hustle Transforming Lives: A Dad's Journey to Financial S...
The AI-Powered Side Hustle Transforming Lives: A Dad's Journey to Financial S...
SOFTTECHHUB
 
Staffan Canback - The 18 Rays of Project Management
Staffan Canback - The 18 Rays of Project ManagementStaffan Canback - The 18 Rays of Project Management
Staffan Canback - The 18 Rays of Project Management
Tellusant, Inc.
 

Recently uploaded (20)

Business model Lean format - sample Feb23.pdf
Business model Lean format - sample Feb23.pdfBusiness model Lean format - sample Feb23.pdf
Business model Lean format - sample Feb23.pdf
 
Entrepreneurial mindset: An Introduction to Entrepreneurship
Entrepreneurial mindset: An Introduction to EntrepreneurshipEntrepreneurial mindset: An Introduction to Entrepreneurship
Entrepreneurial mindset: An Introduction to Entrepreneurship
 
Travel Tech Pitch Deck | ByeByeCity,com - Short Breaks Discovery & Booking Pl...
Travel Tech Pitch Deck | ByeByeCity,com - Short Breaks Discovery & Booking Pl...Travel Tech Pitch Deck | ByeByeCity,com - Short Breaks Discovery & Booking Pl...
Travel Tech Pitch Deck | ByeByeCity,com - Short Breaks Discovery & Booking Pl...
 
حبوب سايتوتك للبيع في الامارات اشراف دكتورة 00966583759617
حبوب سايتوتك للبيع في الامارات اشراف دكتورة 00966583759617حبوب سايتوتك للبيع في الامارات اشراف دكتورة 00966583759617
حبوب سايتوتك للبيع في الامارات اشراف دكتورة 00966583759617
 
Globalization strategy for Meesho with respect to Shopee
Globalization strategy for Meesho with respect to ShopeeGlobalization strategy for Meesho with respect to Shopee
Globalization strategy for Meesho with respect to Shopee
 
ConvertKit: Best Email Marketing Tool for 2024
ConvertKit: Best Email Marketing Tool for 2024ConvertKit: Best Email Marketing Tool for 2024
ConvertKit: Best Email Marketing Tool for 2024
 
Christmas Decorations_ A Guide to Small Christmas Trees, Candle Centerpieces,...
Christmas Decorations_ A Guide to Small Christmas Trees, Candle Centerpieces,...Christmas Decorations_ A Guide to Small Christmas Trees, Candle Centerpieces,...
Christmas Decorations_ A Guide to Small Christmas Trees, Candle Centerpieces,...
 
PETAVIT MICHAEL TAY.pdfAAAAAAAAAAAAAAAAAAAA
PETAVIT MICHAEL TAY.pdfAAAAAAAAAAAAAAAAAAAAPETAVIT MICHAEL TAY.pdfAAAAAAAAAAAAAAAAAAAA
PETAVIT MICHAEL TAY.pdfAAAAAAAAAAAAAAAAAAAA
 
Navigating Change Strategies for Effective Transition and Operational Plannin...
Navigating Change Strategies for Effective Transition and Operational Plannin...Navigating Change Strategies for Effective Transition and Operational Plannin...
Navigating Change Strategies for Effective Transition and Operational Plannin...
 
Expert International Executive Recruiters for Global Expansion
Expert International Executive Recruiters for Global ExpansionExpert International Executive Recruiters for Global Expansion
Expert International Executive Recruiters for Global Expansion
 
PROVIDING THE WORLD WITH EFFECTIVE & EFFICIENT LIGHTING SOLUTIONS SINCE 1976
PROVIDING THE WORLD WITH EFFECTIVE & EFFICIENT LIGHTING SOLUTIONS SINCE 1976PROVIDING THE WORLD WITH EFFECTIVE & EFFICIENT LIGHTING SOLUTIONS SINCE 1976
PROVIDING THE WORLD WITH EFFECTIVE & EFFICIENT LIGHTING SOLUTIONS SINCE 1976
 
Satta matka guessing Kalyan result sattamatka
Satta matka guessing Kalyan result sattamatkaSatta matka guessing Kalyan result sattamatka
Satta matka guessing Kalyan result sattamatka
 
JD Euroway Report 2024 : Shocking Revelations
JD Euroway Report 2024 : Shocking RevelationsJD Euroway Report 2024 : Shocking Revelations
JD Euroway Report 2024 : Shocking Revelations
 
Research Methodology, Objectives, Types and Significance of Research
Research Methodology, Objectives, Types and Significance of ResearchResearch Methodology, Objectives, Types and Significance of Research
Research Methodology, Objectives, Types and Significance of Research
 
Commercial Roofing Contractors Chennai.pptx
Commercial Roofing Contractors Chennai.pptxCommercial Roofing Contractors Chennai.pptx
Commercial Roofing Contractors Chennai.pptx
 
Discover who your target audience is and reach them
Discover who your target audience is and reach themDiscover who your target audience is and reach them
Discover who your target audience is and reach them
 
ADANI WILMAR PREDICTS GROWTH IN ITS SALES VOLUME THIS FISCAL YEAr.pptx
ADANI WILMAR PREDICTS GROWTH IN ITS SALES VOLUME THIS FISCAL YEAr.pptxADANI WILMAR PREDICTS GROWTH IN ITS SALES VOLUME THIS FISCAL YEAr.pptx
ADANI WILMAR PREDICTS GROWTH IN ITS SALES VOLUME THIS FISCAL YEAr.pptx
 
TPH Global Solutions Overview: Successful Strategies for Selling to Mass Merc...
TPH Global Solutions Overview: Successful Strategies for Selling to Mass Merc...TPH Global Solutions Overview: Successful Strategies for Selling to Mass Merc...
TPH Global Solutions Overview: Successful Strategies for Selling to Mass Merc...
 
The AI-Powered Side Hustle Transforming Lives: A Dad's Journey to Financial S...
The AI-Powered Side Hustle Transforming Lives: A Dad's Journey to Financial S...The AI-Powered Side Hustle Transforming Lives: A Dad's Journey to Financial S...
The AI-Powered Side Hustle Transforming Lives: A Dad's Journey to Financial S...
 
Staffan Canback - The 18 Rays of Project Management
Staffan Canback - The 18 Rays of Project ManagementStaffan Canback - The 18 Rays of Project Management
Staffan Canback - The 18 Rays of Project Management
 

CSS for Beginners

  • 2. What is Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. PUNE IT LABS
  • 3. Advantages of CSS Completely consistent with the look and feel of your pages More control over the layout and design Pages download faster, sometimes by as much as 50% You have to type less code, and your pages are shorter and neater. CSS properties can also be dynamically changed with a JavaScript. eg. object .style.cssFloat=&quot;left&quot; PUNE IT LABS
  • 4. . With a combination of positioning, floating, margins, padding and borders, you should be able to represent ANY web design and there is nothing that can be done in tables that can not be done with CSS. PUNE IT LABS
  • 5. There are three parts to CSS The styles a blue headline eg: <font color=&quot;#0000ff&quot;><h4>a blue headline</h4></font> a blue headline Their placement The fact that they can cascade. PUNE IT LABS
  • 6. Where HTML has tags, CSS has 'selectors'. A Cascading Style Sheets rule is made up of a selector and a declaration. H2 {color: blue;} selector {declaration;} The declaration is the part of the rule inside the curly braces. It specifies what a style effect will be. For example, &quot;color: blue&quot;. Eg: body {      font-size: 12px;      color: navy; } PUNE IT LABS
  • 7. A declaration has two parts separated by a colon: property and value. selector {property:value} More than one declaration may be placed inside the curly braces A semi-colon must separate each declaration from the next. The ending declaration does not require a semi-colon Eg. selector {property:value; property:value;} H2 {color:blue; font-family:Arial, sans-serif;} If you neglect to place a semi-colon between any two declarations your style sheet will totally fail. H1 {font-family:Arial, Helvetica, sans-serif;} H2 {font-family:Arial, Helvetica, sans-serif;} H3 {font-family:Arial, Helvetica, sans-serif;} H1, H2, H3 {font-family:Arial, Helvetica, sans-serif;} PUNE IT LABS
  • 8. In-line Internal External Applying CSS PUNE IT LABS
  • 9. <p style=&quot;color: red&quot;>Sample text</p> In-line HTML should be a presentation free document, and so in-line styles should be avoided wherever possible. PUNE IT LABS
  • 10. <html> <head> <title>CSS Example</title> <style type=&quot;text/css&quot;>     p {       color: red;       }   a {           color: blue;       } </style> ....... Internal PUNE IT LABS
  • 11. p {      color: red; } a {      color: blue; } <html> <head> <title>CSS Example</title>      <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;web.css&quot; /> ... External PUNE IT LABS
  • 12. Lengths and Percentages There are specific units for values used in CSS, but there are some general units that are used in a number of properties Such as- em (such as font-size: 2em) ex (one ex is the x-height of a font (x-height is usually about half the font-size) px (such as font-size: 12px) pixels pt (such as font-size: 12pt) point (1 pt is the same as 1/72 inch) pc pica (1 pc is the same as 12 points) % (such as font-size: 80%)percentage Other units include cm (centimetres), mm (millimetres) and in (inches). When a value is zero , you do not need to state a unit. Eg: border : 0 PUNE IT LABS
  • 13. Different foms: Name of Colour RGB HEX code CSS brings 16 million colours to Web Page. There are 17 valid predefined colour names. They are - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. PUNE IT LABS
  • 14. red rgb(255,0,0) rgb(100%,0%,0%) #ff0000 #f00 transparent is also a valid value. The three values in the rbg value are from 0 to 255. Hexadecimal is a base-16 number system. hexadecimal has 16 digits, from 0 to f. The hex number is prefixed with a hash character ( # ) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.). PUNE IT LABS
  • 15. None : The element will not be displayed. p {display : none} Block : The element will be displayed as a block-level element, with a line break before and after the element. p {display : block} Inline : The element will be displayed as an inline element, with no line break before or after the element. p {display : inline} PUNE IT LABS
  • 16. Other display types ol ul PUNE IT LABS
  • 17. Static Relative Absolute Fixed PUNE IT LABS
  • 18. Static: The value static is the default value for elements and renders the position in the normal order of things as they appear in the html Relative: It is much like static, but the element can be offset from its original position with the properties top , right , bottom and left . Absolute: The absolute element can be placed anywhere on the page using top , right , bottom and left . Fixed: It behaves like absolute, but fixed elements should stay exactly where they are on the screen even when the page is scrolled. PUNE IT LABS
  • 19. Floating an element will shift it to the right or left of a line, with surrounding content flowing around it. Floating is normally used to position smaller elements within a page Eg: img { float: left } PUNE IT LABS
  • 20. Clear: The CSS clear property is used to for control flow when using the float property. Using CSS clear, you can specify whether to keep one or both sides of an element &quot;clear&quot; (i.e. no elements can appear on the side that is clear). none - floating elements can appear on either side left - floating elements can not appear on the left (i.e. keep the left side &quot;clear&quot;) right - floating elements can not appear on the right (i.e. keep the right side &quot;clear&quot;) both - floating elements can not appear on the left or right (i.e. keep both sides &quot;clear&quot;) inherit PUNE IT LABS
  • 21. Font-family The font you specify must be on the user's computer, so there is little point in using obscure fonts. The most commonly used are arial, verdana and times new roman), but you can specify more than one font, separated by commas . If the name of the font is more than one word it should be put in quotation marks (“------“) Font-size The size of the font. Be careful with this - text such as headings should not just be a paragraph in a large font; you should still use headings ( h1 , h2 etc.) PUNE IT LABS
  • 22. Font-weight This states whether the text is bold or not. Commonly used are font-weight: bold or font-weight: normal. In theory it can also be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900 Font-style font-style: italic or font-style: normal . Text-decoration This states whether the text is underlined or not. text-decoration: overline text-decoration: line-through , strike-through, text-decoration: underline ( should only be used for links ) This property is usually used to decorate links, such as specifying no underline with text-decoration: none. PUNE IT LABS
  • 23. text-transform This will change the case of the text. text-transform: capitalize text-transform: uppercase text-transform: lowercase text-transform: none Text spacing letter-spacing and word-spacing line-height text-align text-indent Eg. p {      letter-spacing: 2px;      word-spacing: 3px;      line-height: 4px;      text-align: center; } PUNE IT LABS
  • 24. Margins and Padding Margins and Padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element. Eg: h2 {     font-size: 10px;     background-color: #1F488D;     margin: 10px;     padding: 5px; } PUNE IT LABS
  • 25. Padding padding can have: #sample { padding: 10px; } #sample { padding: 10px 5px } #sample { padding: 10px 5px 2px } #sample { padding: 10px 5px 2px 5px } one value, such as 10px, to specify equal padding on every side two values, such as 10px 5px, to specify top/bottom (first value) and right/left (second value) padding three values, such as 10px 5px 2px, to specify top (first value), right/left (second value) and bottom (third value) padding four values, such as 10px 5px 2px 1px to specify top, right, bottom and left padding respectively PUNE IT LABS
  • 26. Borders can be applied to most HTML elements within the body. border-style The values can be solid , dotted , dashed , double , groove , ridge , inset and outset . border-width border-top-width , border-right-widht , border-bottom-width and border-left-width border-color Add the following code to the CSS file: Eg. h2 {    border-style: dashed;      border-width: 3px;    border-left-width: 10px;     border-right-width: 10px;      border-color: red; } PUNE IT LABS
  • 27. PUNE IT LABS by- DHANESH.T.S