Comprehensive Guide to Cascading Style Sheets (CSS) for Web Development
This guide covers the essentials of Cascading Style Sheets (CSS), a critical language for defining the style of web pages. Explore the different categories of styles, including layout and formatting properties, and understand how to apply styles in a cascading manner. Learn about inline styles, embedded styles in the head section, and external CSS files. We delve into various style properties such as fonts, colors, background, borders, margins, padding, and positioning. Enhance your web design skills by mastering CSS syntax and structure.
Comprehensive Guide to Cascading Style Sheets (CSS) for Web Development
E N D
Presentation Transcript
Outline • Cascading style sheets • Style sheet properties
Cascading style sheets • A language describing style constructs such as fonts, colors, and position • Two major categories of styles • Layout properties • Formatting properties • Styles are applied in a cascading manner (Tag level styles are the most specific) • Default styles of a browser • Styles specified in an external CSS file • Styles specified in the head section • Styles specified in the tag
Tag level styles • Most XHTML tags have a style attribute. • Syntax: • <tagname style=“styleproperty:value; styleproperty:value;”> • E.g., • <body style=“font-family:cursive; text-align:left”>The body text follows this style, unless overridden by a more specific style. </body> • <p style=“font-size:12pt; color:blue”>This paragraph has blue letters with 12pt font</p> • <td style=“font-size:1.5em; font-weight:bold”>
Document level styles • Specified in the head section between <style> and </style> tags • Can create classes of styles for any tag • E.g., <head> <style type=“text/css”> p {font-size:12pt;} p.c {color:blue; text-align:center;} p.l {color:red; text-align:left;} p.r {color:green; text-align:right;} </style> </head>
Document level styles • In the document body, use the tag with the style classes • E.g., <body> <p>This paragraph uses normal style text </p> <p class=“c”>This paragraph is centered and blue. </p> <p class=“l”>This paragraph is left justified and red. </p> <p class=“r”>This paragraph is right justified and green. </p> </body>
External style sheet • A set of styles can be created in a separate file with extension “css” • Link this external style sheet in your xhtml document • E.g., in a separate text file “mystyle.css” you have p {font-size:12pt; text-indent:5px; color:blue} p.b {font-size:10pt; font-weight:bold;} • In the xhtml document, you will have <head> <link rel=“stylesheet” type=“text/css” href=“mystyle.css” /> <head> <body> <p>This is a normal paragraph with 12pt and blue text. </p> <p class=“b”>This paragraph uses 10pt and bold text. </p> </body>
<div> and <span> • Useful tags for creating containers. Once you have a container, you can position it, you can apply style to it, make it visible/invisible, etc. • Container may contain paragraphs, text, xhtml tags, images, tables, etc.
Style properties: font • Sub-properties • font-family : serif, cursive, sans-serif, fantasy, times-roman, ‘arial black’ • font-size : 10pt, 150%, 1.5em, xx-large, larger • font-style : normal, italic, oblique • font-weight : normal, bold, bolder, lighter, 100, 200, …, 900 • You can also specify more than one font property in a single “font” style • E.g.: font: bold italic 14pt cursive • Text color can be specified by “color” style
Style properties: background • Sub-properties • background-color • background-image :url(“…”) • background-position :top, center, bottom, … • background-repeat :repeat-x, repeat-y, no-repeat • You can also specify more than one background properties in a single “background” style • E.g.: background: navy url(“me.gif”)
Style properties: borders • Sub-properties • border-width • border-style : solid, double, dashed, dotted, none • border-color • You can specify these border properties in a single “border style” • E.g., border: red 10px double • You can specify a specific border by using one of the following • border-left • border-right • border-top • border-bottom
Style properties: Margins • Sub-properties • margin-top • margin-right • margin-bottom • margin-left • margin • padding-top • padding-right • padding-bottom • padding-left • padding • Margin adds spacing around element, padding adds spacing inside element
Style properties: Text • Sub-properties • text-align :left, right, center, justify • text-decoration : underline, italic, line-through, none • text-indent • text-transform : none, capitalize, uppercase, lowercase • vertical-align : top, middle, bottom, sub, super
Style properties: position • Position can be: • Relative • Absolute • Can specify an offset from • Top • Bottom • Left • Right • In • px • % • em • Cm • E.g., <img src=“…” style=“position:absolute;top:100px; left:200px” />
Style properties: visibility, display • Visibility • Values: • Visible (default) • Hidden • E.g.: <div style=“visibility:hidden”> • Space is reserved for the item • Display • Values: • inline (default), block, list-item, table • None is like hidden visibility except it does not reserve space
Events • E.g., • onMouseOver • onClick • onMouseOut • <p style=“color:green” onMouseover=“style.color=‘red’”>This paragraph changes to red when moused over.</p> • <p style=“color:green” onClick=“style.visibility=‘hidden’”>Click to hide me</p>
