Post on 14-Jan-2016
Web Design with Cascading Style Sheet
Lan Vu
Overview•Introduction to CSS•Designing CSS•Using Visual Studio to create CSS•Using template for web design
Introduction to CSS
Why do we need CSS?•Our designing purpose:▫Create a theme for website▫To have a indentify look throughout our
website
Why do we need CSS?•How to do that ?▫Use a common layout for all pages▫Use color of texts, links, buttons and
graphics… reflecting that color theme for all page▫Use same font set for all page
Why do we need CSS?•What have we done until now? ▫Create a sample page with expected
format, layout.▫Create specific pages as a copy of this
sample page▫Modify design on each specific page.
Why do we need CSS?•What if we want ?
•Do the whole design process again with new theme•Or modify each existing pages to new design
Why do we need CSS?•If your website has 2-3 pages ▫No problem, I will re-design them.
•But if your website has 10, 20 … 100 pages▫Oh NO! I don’t have time to re-design all
pages
Why do we need CSS?•Using CSS helps you to save much time
on change format, style and theme of your website.•CSS even bring you more benefit in design.
What CSS is?
CSS = Cascading Style Sheets
What CSS is?•A style sheet is a set of rules to tell a
web browser how to present the web page content▫i.e. how to display HTML elements
CSS Benefits•Separate structure from appearance▫HTML establishes structure and content of a web page▫CSS controls appearance of the page
•Create consistent look-and-feel across multiple pages
•Ease of maintenance
•Reduce HTML file size
CSS structure•CSS is a set of rules•Sample of style sheet
body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black;}
h1 { font-size: 19px; border-bottom: 1px solid black}.shaded { background: #d0d0ff;}
Rules
Rule Structure•Have two parts▫Selector: tells a browser which HTML elements in a
page will be affected by the rule.▫Declaration: tells the browser which set of
properties to apply.•Sample Style sheet
Slide 17
body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px;}
Selector Declaration
Property
Value
Rule Structure
Slide 18
body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black; background: white; margin: 8px;}h1 { font-size: 19px; margin-top: 15px; margin-bottom: 5px; border-bottom: 1px solid black}.shaded { background: #d0d0ff;}
<body><h1>First Section Heading</h1><p>
Here is the first paragraph, containingtext that really doesn't have any useor meaning; it just prattles on and on,with no end whatsoever, no point tomake, really no purpose for existenceat all.
</p><div class="shaded">
<h1>Another Section Heading</h1><p>
Another paragraph.</p>
</div></body>
CSS: HTML:Applying CSS to HTML
Slide 19
<body><h1>First Section Heading</h1><p>
Here is the first paragraph, containingtext that really doesn't have any useor meaning; it just prattles on and on,with no end whatsoever, no point tomake, really no purpose for existenceat all.
</p><div class="shaded">
<h1>Another Section Heading</h1><p>
Another paragraph.</p>
</div></body>
HTML:
body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black; background: white; margin: 8px;}h1 { font-size: 19px; margin-top: 15px; margin-bottom: 5px; border-bottom: 1px solid black}.shaded { background: #d0d0ff;}
CSS:
Applying CSS to HTML
Applying CSS to HTML•Internal Style Sheets▫Inline Styles▫Embedded style sheets
•External style sheets
Slide 21
Adding Styles to HTML<head> ... <link rel="stylesheet" type="text/css" href="myStyles.css" /> <style type="text/css"> body { font-family: Tahoma, Arial, sans-serif; ... } </style></head><body> ... <div style=“padding:2px; ... "> ...</body>
External style sheets
Embedded style sheets
Inline Styles
Inline StyleAffects individual HTML tag
<html>...
<body>...<p style=“font-family: Arial, sans-
serif; ”>some text</p></body>
</html>
Embedded style sheets
Affects individual HTML document
<html><head>
... <style type=“text/css”>
p {font-family: Arial, sans-serif;} </style></head>
<body>...
<p>some text</p> </body></html>
External Style Sheets• Styles are defined in separate text file (.css)▫ styles.css, style1.css, style2.css
•HTML files (.html) have links to style sheet files (.css)▫Affect all HTML files that are linked to the style sheet
External Style Sheets•styles.css file
p {font-family: Arial, Sans-serif;}
•sample.html file<html>
<head>
...
<link href=“styles.css” rel=“stylesheet” type=“text/css” />
</head>
<body>
...
<p>some text</p>
</body>
</html>
Cascading Order• CSS uses an order of precedence to
determine which styles to apply when a selector is formatted in different sources
• The least important style formatting is the browser’s default style settings
• The cascading order of precedence for styles, starting with the least important to the most important, is as follows:1. Browser default2. External style sheets3. Internal style sheets4. Inline styles
Cascading Order
Designing CSS
Selector TypeElement Selectors
H1 {color: purple;}
H1, H2, P {color: purple;}
body { font-family: Tahoma, Arial, sans-serif;
color: black;background: white;margin: 8px;
}
Selector TypeContextual Selector:
Used when an HTML element can display more than one behaviour (e.g. hyperlinks)
• CSS:
a:link {color: #000}a:visited {color: #000}a:hover {color: #69f}a:active {color: #000}
• HTML
<a href=“nextpage.html”>Next page</a>
Selector TypeID Selector▫CSS…#red_heading {color: red}#summary {color: red}p#conclusion {color: blue}
▫HTML…<h1 id=“red_heading”>Headline</h1><p id=“summary”>Summary</p><p id=“conclusion”>Conclusion</p>…
Selector TypeClass Selectors▫ CSS:….blue {color: #082984}.red {color: #de2131}
▫ HTML…<h1 class=“red”>Headline</h1><p class=“red”>a summary</p><p class=“blue”>some text</p>…
The most frequently used HTML elements
CSS Properties•Font▫Font styles: font family▫Type: size, weight, or variant
•Text▫Define the layout of blocks of text▫Words and characters▫Spacing▫Alignment▫Transformation (forced uppercase or lowercase)▫Decoration (underline, overline, and blinking)
CSS Properties•Color and image▫Color and background formatting of text and images▫Define position of background image
•Border▫Define the style of borders for elements like tables,
images, documents▫Border properties include width, height, style, color,
margins, and padding.•Display▫Define styles for the structure of the doc.▫Placement of elements (block or inline)
CSS1 Text Properties
Setting Font Properties
Boxes Properties
CSS Properties•Visit here for full list of properties• http://msdn.microsoft.com/en-us/library/ms531205(VS.85).aspx
Create External Cascading Style Sheets with Visual Studio
Create CSS file1. Run VS : All program Visual Studio 2005 Visual
Studio 2005
2. Creating CSS file in VS: Choose menu File New File
Create CSS file3. In the New File box, choose General in Categories
and then choose Style Sheet in the right list . Finally, click Open button
Create CSS file4. After a new CSS file is created, you can start to add
rules to CSS file by typing CSS code in the editor or using design tools of Visual Studio.
Create CSS file5. Save your CSS file when you’ve done by selecting
File Save or Save As enter Filename in the Save box. And now, you have had an CSS to be used in all page of your website.
Add CSS rulesThere are two ways• Typing CSS code in the editor• Using design tools of Visual Studio.
Add CSS rules Using design tools for designing1. On the Styles menu, click Add Style Rule.
The Add Style Rule dialog box appears
Add CSS rules2. In the Add Style Rule dialog box, select one of the following
CSS selectors▫Element Defines a rule for an element by tag name. ▫Class name Defines a rule for a CSS class. ▫Element ID Defines a rule for an element with a specific ID.
Enter the element name/Class name/ Element ID and then click OK:
Add CSS rules3. Find the new style selector and then place the cursor between the braces ( { } ).4. On the Styles menu, click Build Style.5. In the Style Builder dialog box, define the style attributes that you want the
element to have, and then click OK.The Style Builder dialog box inserts CSS style attributes within the braces ( { } ) of the style selector.
Link Cascading Style Sheets to HTML page
After you have defined an external cascading style sheet (CSS) you can link the style sheet to individual HTML Web pages to apply the styles to the elements on the page. 1. Open the HTML page in Visual Studio2. Select Source view windows3. Add a link element inside the <head></head> tags on the
Web page.Example: <link href="MyStyles.css" rel="stylesheet" type="text/css" />MyStyles.css is the filename of CSS file you’ve created
NOTE: Remember to upload all CSS files that you linked to your web pages
Using template for web design
Web template
•Templates are sample web pages that are designed in a specific theme
▫ Just need to add content to template page▫ No design effort require
•Use available template for time saving in web design
Web template
•A template often include: One or few sample web pages (HTML, PHP, ASP…)
Cascading Style Sheets Files
Images used in template
•There are a lot templates available in Internet for free download or charged download
•A download template need to be customized for best fit your design requirement knowledge in HTML, CSS is useful.
Free Web templates
•http://www.freewebtemplates.com/templates/html
•http://www.freewebsitetemplates.com/
Practicing
Creating a template for your website
The template include▫A sample HTML file with specific layout for your website▫A CSS file with rules for design of sample file▫Images ( if needed )
Using this template to re-design your existing website
Examples
•CSS navigation menuhttp://
www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml