Mastering Web Design: A Comprehensive Guide to Cascading Style Sheets and Interface Design
Explore the principles of effective web design with a focus on Cascading Style Sheets (CSS) and typography. This guide covers essential topics such as the advantages of CSS, including separation of content and design, efficient document control, and pixel-level typography management. Additionally, learn about the implementation of CSS in HTML files, selector types, and styling properties. Gain insights into optimizing your web pages for diverse browsers and tailoring complexity to your audience’s technical skills. Perfect for web designers seeking to enhance their skills.
Mastering Web Design: A Comprehensive Guide to Cascading Style Sheets and Interface Design
E N D
Presentation Transcript
Web Site Design Lee Honeycutt English 313 March 8, 2001 with C a s cading Style Sheets
Process Interface Design Site Design Page Design Typography Editorial Style Graphics Multimedia Design Principles http://info.med.yale.edu/caim/manual/contents.html
Typography In present HTML: • Alignment (limited) • Line Length (invisible tables) • Upper vs. Lower Case (by hand) • White Space (blank GIFs)
Cascading Style Sheets • Advantages: • Separation of content from design • Efficient control over large document sets • Pixel-level control over typography • Netscape & Internet Explorer incompatibilites • Standard in next few years
HTML Files How CSS Works Web Pages CSSheet
How CSS Works • Similar to “Master Document” in print programs • Various type attributes included in single CSS file • CSS file controls type choices for all documents in a site • Changes in type cascade to all HTML documents
CSS Link Link inserted in header of all HTML files: <link href= "master.css" rel="styleSheet” type="text/css">
CSS Content Contents of master.css file: Selector {Property: Value} declaration tag-selector {property1:value1;property2:value1 value2;…} h1 {color: green; font: Arial, Helvetica, sans-serif}
CSS Content Content of master.css file: h1 { color: maroon; font-weight: bold; font-size: large; font-family: FontName, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; text-align: left; word-spacing: 12px; letter-spacing: 8px; list-style-type: square } h2 { color: black; font: italic small-caps medium FontName, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; text-indent: 20px; list-style-type: square }
Four Selectors • Tag selectors - correspond to HTML tags, such as <H1> and <p> • Classes - independent of HTML code; applied locally to unlimited select blocks of text • IDs - used on a limited basis to modify existing HTML elements. Carry higher weight in “cascade.” • Pseudo classes and pseudo elements
CSS Properties • Fonts • Text • Color and Background • Boxes • Lists • Classifications
Implementation Advice • Start small, making only simple style sheets • View style in different browsers to see results • Let audience’s technical abilities determine complexity of styles • Find a good CSS editor, but learn to tweak code yourself.
