CSS Introduction

By: Swati Sharma Introduction to CSS Unit-5 Web Technology

What is CSS By: Swati Sharma  Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.  CSS was first developed in 1997

Advantages of Style Sheets By: Swati Sharma  Saves time  Easy to change  Keep consistency  Give you more control over layout  Use styles with JavaScript => DHTML  Make it easy to create a common format for all the Web pages

Applying a single style sheet to multiple documents By: Swati Sharma

Basic Structure of a Style By: Swati Sharma  Each definition contains:  A property  A colon  A value  A semicolon to separate two or more values  Can include one or more values  h1 {font-size:12pt; color:red}

Style Precedence By: Swati Sharma  External style sheet  Embedded styles  Inline styles

Three Style Types By: Swati Sharma Inline styles Add styles to each tag within the HTML file Use it when you need to format just a single section in a web page Example <h1 style=“color:red; font-family: sans-sarif”>Swati</h1>

Three Style Types By: Swati Sharma Embedded or internal styles A style is applied to the entire HTML file Use it when you need to modify all instances of particular element in a web page Example <style type=“text/css”> h1 {color:red; font-family:sans-serif} </style>

Creating an Embedded Style By: Swati Sharma <head> <title>Embedded Example</title> <style> (default is “text/css”) Style declarations </style> </head>  A style declaration:  Selector {attribute1:value1; attribute2:value2; …}  Selector = an element in a document (e.g., a header or paragraph)

An Example of an embedded style By: Swati Sharma <head> <title>Getting Started</title> <style type=“text/css”> h1 {font-family: sans-serif; color: organge} </style> </head>

Three Style Types By: Swati Sharma External style sheets An external style sheet is a text file containing the style definition (declaration) Use it when you need to control the style for an entire web site Example h1, h2, h3, h4, h5, h6 {color:red; font-family:sans-serif} Save this in a new document using a .css extension

Creating an External Style Sheet By: Swati Sharma  Open a new blank document in Notepad  Type style declarations  h1 {color:red; font-family:sans-serif;}  Do not include <style> tags  Save the document as filename.css

Linking to Style Sheets 1 By: Swati Sharma  Open an HTML file  Between <head> and </head> add  <link href=URL rel=“relation_type” type=“link_type”>  URL is the file.css  Relation_type=“stylesheet”  Link_type=“text/css”  Save this file and the .css file in the same web server directory

External style sheet example By: Swati Sharma <head> <title>Getting Started</title> <link href=“style.css” rel=“stylesheet” type=“text/css” /> </head> h1 {font-family: sans-serif; color: orange} b {color: blue} html file Text file of css named “stylesheet”

Style Sheet Strategies By: Swati Sharma  Wherever possible, place your styles in external style sheets  Take advantage of the power of CSS to have control over an entire Web site

Style Sheet Strategies By: Swati Sharma  At the top level of your web site: define a default global.css style sheet  Refine styles at sublevels with a section.css style sheet  Try to avoid using styles in tags

Using IDs and Classes By: Swati Sharma  Use an id to distinguish something, like a paragraph, from the others in a document.  For example, to identify a paragraph as “head”, use the code: <p id=“head”>… </p>

Working With Ids By: Swati Sharma  To create an ID for a specific tag, use the property:  <tag ID=id_name>  To apply a style to a specific ID, use:  #id_name {style attributes and values}

Classes By: Swati Sharma  HTML and XHTML require each id be unique– therefore an id value can only be used once in a document.  You can mark a group of elements with a common identifier using the class attribute. <element class=“class”> … </element>

Applying a style to a class By: Swati Sharma

Working With Classes By: Swati Sharma  To create a class, enter the following in the HTML tag:  <tag CLASS=class_name>  <h1 CLASS=FirstHeader>IU</h1>  class_name is a name to identify this class of tags  To apply a style to a class of tags, use:  tag.class_name {style attributes} or  .class_name {style attributes}

Working With Classes and Ids By: Swati Sharma  The difference between the Class property and the ID property is that the value of the ID property must be unique:  you can’t have more than one tag with the same ID value  You can apply the same Class value to multiple document tags

Working With DIV By: Swati Sharma  <DIV> tag is used for blocks of text, e.g., paragraphs, block quotes, headers, or lists  To create a container for block-level elements, use:  <DIV CLASS=class_name>  Block-level elements  </DIV>  Class_name is the name of the class  You can substitute the ID proper for the Class property (with ID, the syntax for CSS style, #id_name {style attributes and values}

Working With <DIV> By: Swati Sharma DIV.Slogan {font-weigh:bold} <DIV CLASS=Slogan>Our new Slogan is:<BR>”We teach CSS”</DIV> style HTML code Our new…: “We teach…Resulting text

Working With <span> By: Swati Sharma  With the <span> tag, you can use inline elements, e.g., <B>, <I>  To create a container for inline elements, use:  <span CLASS=class_name>  inline elements  </span>

CSS for Page Layout By: Swati Sharma  CSS manipulates the size and location of block-level elements  Block-level elements in HTML:  Heading tags, e.g., <H1>, <H2>  <p>  <blockquote> and <address> tags  List tags, e.g., <ul>, <ol>, <dl>  <div>  <body>  <hr>  <img>

CSS for Page Layout By: Swati Sharma  Parts of the block-level elements:  Margin  Border  Padding

CSS for Page Layout By: Swati Sharma I am teaching you CSS border margin padding

Controlling the Margins By: Swati Sharma  To define the margins of an element, use:  margin:value  where value = a length value (“px” is often used), a percentage (a margin proportional to the element’s width, or auto

Controlling the Margins By: Swati Sharma  To set margins on a side, use:  margin-top  margin-right  margin-bottom  margin-left  E.g., LI {margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:10px}

Setting the Padding Size By: Swati Sharma  To define padding, use:  padding: value  where value = a length value or a percentage (a padding proportional to the element’s width)

Setting the Padding Size By: Swati Sharma  To set margins on a side, use:  padding-top  padding-right  padding-bottom  padding-left

Formatting the Border By: Swati Sharma  Border can be set in three ways:  border-width  border-style  border-color

Formatting the Border By: Swati Sharma  To set the border, use:  border:width_value style color  To set borders on a side, use:  border-top  border-bottom  border-left  border-right

Formatting Width & Height of Block-Level Boxes By: Swati Sharma  To set the width of a block-level element, use:  width:value  height:value  where value can be a length value, a percentage, or auto  E.g., textarea {width:225px; height:100px}

Using the Float Attribute By: Swati Sharma  With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. float:margin  Where margin = right, left, none  To prevent an element from wrapping, use:  Clear:margin  Where margin=right, left, both, none  img { float:right; }

Turning off Float - Using Clear By: Swati Sharma Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed. .text_line { clear:both; }

Using the Float Attribute By: Swati Sharma float:right width:50px float:right width:50px clear:right

Formatting Hypertext Links By: Swati Sharma  To remove the style of underlining hypertext, use:  A {text-decoration:none}  4 types of hyperlinks can be modified:  A:visited {styles for previously visited links}  A:link {styles for links that have never visited}  A:active {styles for links that are currently being clicked}  A:hover {styles when the mouse cursor is hovering over the link}

Styling Background By: Swati Sharma CSS background properties are used to define the background effects of an element. background-color background-image background-repeat background-attachment background-position

Background Examples By: Swati Sharma p {background-color:#e0ffff;} body {background-image:url('paper.gif');} body { background-image:url('gradient2.png'); background-repeat:repeat-x; } body {background:#ffffff url('img_tree.png') no-repeat right top;}(Shorthand Property)

Styling Fonts By: Swati Sharma Font Font-size Font-family Font-style Normal Italic Font-weight

Font Style Example By: Swati Sharma p{ font-family:"Times New Roman", Times, serif; font-style:italic; font-size:40px; font-weight:Bold; }

Styling List By: Swati Sharma In HTML, there are two types of lists: unordered lists - the list items are marked with bullets <UL> ordered lists - the list items are marked with numbers or letters <OL>

List Properties By: Swati Sharma List-style List-style-image List-position List-style-type  Circle  Square  Upper-roman  Lower-roman  Upper-alpha  Lower-alpha

List Example By: Swati Sharma ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} ul { list-style-image: url('sqpurple.gif'); }

Styling Table By: Swati Sharma Table Borders table, th, td { border: 1px solid black; } Collapse Borders The border-collapse property sets whether the table borders are collapsed into a single border or separated: table { border-collapse:collapse; }

By: Swati Sharma Table Width and Height table { width:100%; } th { height:50px; } Table Text Alignment td { text-align:right; vertical-align:bottom; } Table Padding td { padding:15px; }

CSS Introduction

In this document