Understanding Style and CSS Basics for Effective Web Design
Explore the fundamentals of Style and CSS, including style rules, declarations, and applying styles to elements. Learn how to separate style from structure and create visually appealing web pages. Enhance your knowledge to elevate your web design skills.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Styles and CSS David Douglas Sam M. Walton College of Business, University of Arkansas Connecting scholarship and research with business practice 1
Style and CSS Basics Goal is to separate Style from Structure Style rules express the style characteristics of an element A set of style rules in an external document is a style sheet Example of Style Section (sets <p> elements in the document to 24 point blue) <head> <style> P {color: blue; font-size: 24pt;} </style> 2
Style and CSS Basics A style rule is composed of two parts Selector Declaration Declaration Selector h1 {color: red;} 3
Style and CSS Basics A declaration is composed of two parts Property Value Syntax is Property and colon, then value and semicolon to allow multiple declaration Value Property h1 {color: red;} 4
Style and CSS Basics Style rules can be applied to an element Style rules can be a section in a document Style rules can be in a document external to the Web pages to which it can be applied 5
Style and CSS Basics Style rules can be applied to an element similar to an element attribute Example <div style="font-family: 'Trebuchet MS'; Color: Navy; "> 6
Style and CSS Basics Example of a Style Section to be used for a Web page that sets h1 and h2 to a particular font and color of navy Type Selector <style> h1 , h2 { font-family: 'Trebuchet MS'; Color: Navy; } </style> 7
Style and CSS Basics Example of an external style sheet referred to as a cascading style sheet note that the content is the same as a Style Section but in a file with a .css extension <style> h1 , h2 { font-family: 'Trebuchet MS'; example.css Color: Navy; } </style> 8
Style and CSS Basics Referencing an external cascading style sheet <head> <title . <link href="example.css" rel="stylesheet" type="text/css" /> </head> 9
Style and CSS Basics Grouping Selectors h1 {color: red;} h2 {color: red;} can be grouped with elements separated by commas h1, h2 {color: red;} 10
Style and CSS Basics Combining Declarations p {color: blue;} p {font-size: 12pt;} can be expressed as follows p {color: blue; font-size: 12pt;} 11
Style and CSS Basics Using Descendant Selectors Selects only <b> elements that are within <p> elements p b {color: blue;} can be more than 2 selector elements ul li b {color: blue;} 12
Style and CSS Basics Using the Class Attribute Selector Flag Declaration Class Name Character Reference the class .quote {color: blue; margin: 30px;} <p class="quote"> This . Note that this allows any element to use the style whereas a general style for an element applies to every instance of the element 13
Style and CSS Basics Making Class Selectors More Specific h1.quote {color: blue; margin: 30px;} restricts the use of the quote to the <h1> element 14
Style and CSS Basics Using the id Attribute Selector Flag Declaration Class Name Character reference the element #preface {color: blue; margin: 30px;} <p id="preface"> This . Note that the id value uniquely identifies this one <p> element to which the rule applies 15
Style and CSS Basics CSS font measurement units Absolute Units Centimeter Inch Millimeter Pica Point Unit Abbrev cm in mm pc Pt Description Standard metric cm Standard US inch Standard metric mm Equal to 12 points 72 points / inch 16
Style and CSS Basics CSS font measurement units (cont) Relative Units Unit Abbrev em Description Em The width of a capital M in the current font usually the same as the font size The height of the letter x in the current font The size of a pixel on the current monitor Sets a font size relative to the base font size Ex ex Pixel px Percentage 150% 17
Style and CSS Basics Absolute Font Size Keywords xx-small x-small small medium large x-large xx-large Relative Font Size Keywords smaller larger 18
Style and CSS Basics Fonts Family arial, courier .. Shortcut property designation p {font: 12pt arial bold;} Text Spacing Properties text-align text-indent Text decoration properties none, underline, overline, line-through, blink {font-family: san-serif;} 19
Style and CSS Basics Fonts Vertical alignment {vertical-align: super;} baseline, sub, super, top, text-top, middle, bottom, text-bottom, percentage Transforming case {text-transformation: uppercase} capitalize, uppercase, lowercase, none 20
Style and CSS Basics Visual Formatting Model Block elements <body> ,<h1>, <div> <p> Allows specification of margin, border, and padding for all block-level elements Inline elements List-item 21
Style and CSS Basics Box specification example p {margin-left; 2 em; margin-right; 2 em; padding-left; 2 em; padding-right; 2 em; border-right; solid thin black; background: white} 23
Style and CSS Basics Special Box Properties width height float clear div {float: left; width: 200px;} 24
