CSS means Cascading Style Sheets. It is used to style HTML documents.
|
|
- Magdalene Bennett
- 6 years ago
- Views:
Transcription
1 CSS CSS means Cascading Style Sheets. It is used to style HTML documents. Like we mentioned in the HTML tutorial, CSS can be embedded in the HTML document but it's better, easier and neater if you style in a separate document. The cool thing about it is that you can style a whole website with a single CSS document. The CSS document has to be linked to the HTML before it can work. Open a new document in your text editor Save the document as "website.css" (without the quotation marks) in the "website" folder we created in the HTML tutorial. You have to add the ".css" extension. Now we have to link the CSS file to the HTML document Open the two files we created in the HTML tutorial (index.html and about.html) in your text editor. * To open the HTML files in your text editor: Launch the text editor, click file, open, and in the open dialog box type the name of the file you want to open (in this case index.html), click open. Change the code of the head section (top of the page, before the <body> tag) of the "index.html" and "about.html" to look like this: <!DOCTYPE html PUBLIC "-////DTD XHTML 1.0 Transitional//EN" " <html> <head> <title>your Search Engine Guide</title> <link rel="stylesheet" type="text/css" href="/website.css" /> </head> <body>... Save the file. Open the "index.html" in your browser. Nothing changed right? Nothing is supposed to change. The extra line of code we just added is <link rel=... href="/website.css" />. website.css is the name of the CSS file we just created; so if you have a CSS file named john.css then the code will be: href="/john.css", every other code remains the same. There are other ways to link documents to HTML but they are advanced stuff. That's it, we just linked our CSS file to our two paged website. CSS Rule
2 A CSS rule consists of a selector and a declaration. The declaration can be more than one. For example: p color: red; font-size: 13px; *You can place all declarations on a single line but to make the document more readable place each declaration on a separate line. "P" above is the selector; it is the HTML document you want to style. The code below the "p" is a declaration group. A declaration group is usually surrounded by curly bracket. Above, we have two declarations i.e "color:red" and "font-size:13px". Each declaration consists of a property and a value. "Color" and "font-size" are properties; "red" and "13px" are values. A colon separates a property and a value. A declaration usually ends with a semicolon. Colors There are about 16 million colors you can use with CSS. A color can be added to a CSS with a name or a hex code, since there are only about 17 predefined color names in CSS, its best to use the hex code. You don't really need to know the history of the hex color code but there are some basic things you need to know. It is impossible for a human to know all the codes to all the colors but, the more you work with them the more they are stored in your brain's database. The hex code is prefixed by the harsh (#) character, it is usually six digits gotten from 0 to f. Let's see an example. Type the code below into your "website.css" document /*this is a comment*/
3 Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but, make sure each curly bracket is closed. Save the "website.css" file and refresh your browser. The color of all the headings should be blue; click the "about us" link, the headings should be blue too; if not, make sure your css is linked to the HTML files, go through the first steps of this tutorial again. There is a very easy way to get the hex code of any color you want; you can do this with any graphic software like Photoshop, Illustrator and others. All you have to do is select a color of your choice from the color picker then copy the hex color code (the software will generate the hex color code) to your CSS document. If you don't have any graphic software, not to worry, I've provided a color picker here for you; just click the color box below, select any color you like, click OK and copy the hex color code to your CSS document. #fff200 The id and class Selector CSS allows you to style different sections of your website differently. In the HTML tutorial, we specified some id and class (e.g. <div id="header">) which didn't make any difference to the look of the website; yeah it's going to make a difference here. Now I can style a section of the website with the name "header". The class selector uses the HTML class attribute, and is defined with a dot (.). The id selector uses the HTML id attribute, and is defined with a harsh character (#) Let's look at an example Change the code above to this: #header
4 color:#ff0000; Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed. This will make all the text within the opening <div> tag (i.e. <div id="header">) and the closing </div> tag to have a red color (apart from the links). All other text in the website will not be affected. Font Family The font family property defines the font style of the text in a website. I know you'll be tempted to download a very crazy or sexy font for your website but you shouldn't. A website opens in a viewer's computer with the font available in the viewer's computer, so if you download a very unique font available to very few of the world's population, then a large number of your viewers will see your website with another font and it usually isn't pretty. There are some safe fonts you can use for your website, by safe I mean font that is available to at least 90 percent of the world's population. Fonts like Arial, Verdana, Times New Roman, sansserif and Helvetica are considered safe fonts. You can list more than one font in a css, if the browser cannot find the first font; it checks your css list and use the next available font. *If a font name has more than one word, it should be placed in a quotation mark. For example "Times New Roman" Font Size Font size is the size of the text in a website. It could be in pixel, point, inches and so on, we are going to stick with pixel in this tutorial because I prefer it. The font size of a heading is supposed to be bigger than that of a paragraph, of course you can do it the other way round but please don't. It won't look good. Also you should not write a text that is supposed to be a heading as a paragraph with a big font size; headings should be headings and paragraphs should be paragraphs. Don't ask me why. Font Weight This is used to state whether the text is bold or not. In practice it is either bold or normal. Text Align
5 The text align property will align text in a page to left, right, center or justify. Let's put all the above headings in an example Add some extra code to the above code so it looks like this: #header color:#ff0000; font-weight:bold; body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px; #nav #footer Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed. Save and refresh. The body selector is used to style all the elements inside the <body> opening tag and the </body> closing tag.
6 We now have a font family, notice that the font in our website changed to Verdana, the font size also changed. We also aligned some text to the center and made all the text in the header section bold. Cute. Background Color Background color property specifies the background color of an element. Background Image The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. You can choose to repeat the image horizontally background-repeat: repeat-x; or vertically background-repeat: repeat-y;or no repeat at all background-repeat: no-repeat;. Change your code to this: body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px; background-color:#898989; #nav background-color:#000066; #footer background-
7 #all background-color:#ffffff; #header color:#ff0000; font-weight:bold; background- background-image:url(header.jpg); background-repeat:no-repeat; Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed. *Header.jpg is the name of the image I want to use, you can use any image you have, but for simplicity and uniformity sake, just save the image below in the website folder. *If you're using your own image Copy the image to the "website" folder. If you don't want to copy the image then you have to state the full url of the image, for example instead of "header.jpg" it should be "C:/Users/Desktop/folder/header.jpg". Width and Height The width and height properties are used to set the width and height of a content area. Setting the height of a content area can be tricky because, when you add content to that area, you have to adjust the height to fit the content, especially if you have a background color. It is better to use the "minimum height" property, but of course that has some challenges with some old browsers. Personally, I don't use the height property unless I absolutely have to. When the height of a content area is not stated, the browser calculates the height based on the content inside that content area, so it adjusts itself as you add new content. Works for me. Let's look at an example Adjust your code to this:
8 body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px; background-color:#898989; #nav background-color:#000066; #footer background- #all background-color:#ffffff; width:800px; #header color:#ff0000; font-weight:bold; background- background-image:url(header.jpg); background-repeat:no-repeat; Tips:*The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed.
9 Save the CSS file then refresh your browser. The id attribute named "all" covers all the elements in the body of the website, so by giving it a width of 800px, all the elements inside it will automatically adopts that width. You can specify another width for them. Margin and Padding Margin is a space outside an element while padding is a space inside an element. You can style the different sides of the element with margin-top, margin-bottom, margin-right, margin-left, padding-top, padding-bottom, padding-left, and padding-right properties. Example Change your code to this: body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px; background-color:#898989; #nav background-color:#000066; #footer background- margin-bottom:-10px; padding:1px;
10 #all background-color:#ffffff; width:800px; margin:0 auto; #header color:#ff0000; font-weight:bold; background- background-image:url(header.jpg); background-repeat:no-repeat; margin-top:-10px;.content Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed. Now the website looks really good. Let me explain some of the codes we have above. "Margin: 0 auto" is usually used to tell your browser to put your content in the middle of the browser window. It's possible to have a negative margin as you can see above; I used a negative margin to remove the little space on top of the header and below the footer. "padding:5px" and "margin:5px", is used when you want all four sides of the element to have the same amount of padding or margin, if you want different padding or margin size for different sides then you have to specify the side. Example: padding-left:2px. Borders To make a border around an element, you need a border style, this could be dashed, dotted, solid, others, properties like: "border-top-style:solid", "border-bottom-style: dotted" e.t.c can be used. You also need to set the width and the color of the border. You can specify different widths and colors for different sides using properties like: "border-right-width", "border-top-width", "border-bottom-color", "border-left-color", you know the rest. I'll give you an example on borders later in this tutorial. List
11 CSS allows you to style your list marker, the default is circle but you can make it square, upperroman, upper-alpha and so on, you can even use an image as a list marker. Example: ulliststyle-type:none; or ullist-style-type:square; or ullist-style-image:url (image.jpg); try those code to see the different results. Links Links are special in the sense that they can be styled differently depending on their state. There are four link states, they are: a:link - a normal, unvisited link a:visited - a visited link a:hover - a link when the mouse is on it a:active - a link the moment it is clicked There are some ordering rules when styling a link: a:link and a:visited must come before a:hover a:active must come after a:hover Text Decoration The text-decoration property is mostly used to remove or add underlines from and to links. It could be a:linktext-decoration:none or a:linktext-decoration:underline amongst others. This example covers the four above explanations: Adjust your code to this: body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px;
12 background-color:#898989; #nav background-color:#000066; #footer background- margin-bottom:-10px; padding:1px; #all background-color:#ffffff; width:800px; margin:0 auto; #header color:#ff0000; font-weight:bold; background- background-image:url(header.jpg); background-repeat:no-repeat; margin-top:-10px;.content ul list-style-type:square; a:link color:#ffffff; text-decoration:none; a:visited
13 color:#ffffff; text-decoration:none; padding:1opx; a:hover color:#ffffff; text-decoration:underline; background-color:#fbaf5d; a:active color:#000066; text-decoration:none; Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed. Nesting You can apply a style for a selector within a selector, let me explain. Take a look at this: #header pcolor:red This means that all the paragraphs inside the header will be colored red. If there is headings or images inside the header, they won't be colored red. Also any other paragraph outside the header won't be colored red. Let's add some well-deserved finishing touches to our website. Change your code to this:
14 body font-family: Verdana, Arial, Helvetica, "Times New Roman"; font-size: 14px; background-color:#898989; #nav background-color:#000066; #footer background- margin-bottom:-10px; padding:1px; color:#727272; font-size:12px; #all background-color:#ffffff; width:800px; margin:0 auto; #header color:#ff0000; font-weight:bold; background- background-image:url(header.jpg); background-repeat:no-repeat; margin-top:-10px;.content ul list-style-type:square; a:link
15 color:#ffffff; text-decoration:none; a:visited color:#ffffff; text-decoration:none; padding:1opx; a:hover color:#ffffff; text-decoration:underline; background-color:#0101ff; a:active color:#000066; text-decoration:none; #header p color:#ffffff; margin-top:-5px; padding-left:10px; img margin-left:30px; Tips: *The text in purple is the new addition to the previous code. document and refresh your browser so that you can see the effect of each code but make sure each curly bracket is closed.
CSS stands for Cascading Style Sheets Styles define how to display HTML elements
CSS stands for Cascading Style Sheets Styles define how to display HTML elements CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically
More information<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.
CSS Formatting Background When HTML became popular among users who were not scientists, the limited formatting offered by the built-in tags was not enough for users who wanted a more artistic layout. Netscape,
More informationCSS. M hiwa ahamad aziz Raparin univercity. 1 Web Design: Lecturer ( m hiwa ahmad aziz)
CSS M hiwa ahamad aziz www.raparinweb.fulba.com Raparin univercity 1 What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve
More informationCSS Cascading Style Sheets
CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with
More informationLab 4 CSS CISC1600, Spring 2012
Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive
More informationCSS مفاهیم ساختار و اصول استفاده و به کارگیری
CSS مفاهیم ساختار و اصول استفاده و به کارگیری Cascading Style Sheets A Cascading Style Sheet (CSS) describes the appearance of an HTML page in a separate document : مسایای استفاده از CSS It lets you separate
More informationReading 2.2 Cascading Style Sheets
Reading 2.2 Cascading Style Sheets By Multiple authors, see citation after each section What is Cascading Style Sheets (CSS)? Cascading Style Sheets (CSS) is a style sheet language used for describing
More informationParashar Technologies HTML Lecture Notes-4
CSS Links Links can be styled in different ways. HTML Lecture Notes-4 Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). a { color: #FF0000; In addition,
More informationHTML/XML. HTML Continued Introduction to CSS
HTML/XML HTML Continued Introduction to CSS Entities Special Characters Symbols such as +, -, %, and & are used frequently. Not all Web browsers display these symbols correctly. HTML uses a little computer
More informationAssignments (4) Assessment as per Schedule (2)
Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like
More informationSetting a Background Image
More CSS More CSS Features Let's take a look at some more features available to us via CSS, as well as some techniques to make our CSS declarations more precise and efficient: Setting images as the background
More informationThree Ways to Use CSS:
Introduction to CSS CSS Defined: Short for "Cascading Style Sheets". Determines how the elements in our XHTML documents are displayed and formatted. Designed to separate the content of a web page from
More informationINTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations
Hun Myoung Park (1/26/2019) Cascading Style Sheets: 1 INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations ADC5030401 (2 Credits) Introduction
More informationAGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?
More informationBIM222 Internet Programming
BIM222 Internet Programming Week 7 Cascading Style Sheets (CSS) Adding Style to your Pages Part II March 20, 2018 Review: What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements
More informationModule 2 (VII): CSS [Part 4]
INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (VII): CSS [Part 4] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals
More informationWanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.
Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.
More informationCISC1600-SummerII2012-Raphael-lec3 1
CISC 1600 Introduction to Multi-media Computing Agenda Email Address: Course Page: Class Hours: Summer Session II 2012 Instructor : J. Raphael raphael@sci.brooklyn.cuny.edu http://www.sci.brooklyn.cuny.edu/~raphael/cisc1600.html
More informationCSS. https://developer.mozilla.org/en-us/docs/web/css
CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties
More informationIntroduction to Web Programming and Design
Bridges To Computing General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. You are invited and encouraged to use this presentation to promote
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationUnit 10 - Client Side Customisation of Web Pages. Week 5 Lesson 1 CSS - Selectors
Unit 10 - Client Side Customisation of Web Pages Week 5 Lesson 1 CSS - Selectors Last Time CSS box model Concept of identity - id Objectives Selectors the short story (or maybe not) Web page make-over!
More informationUsing Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles
Using Dreamweaver CC 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format
More informationCSS Selectors. element selectors. .class selectors. #id selectors
CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors
More informationCascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Mendel Rosenblum 1 Driving problem behind CSS What font type and size does introduction generate? Answer: Some default from the browser (HTML tells what browser how)
More informationCreating and Building Websites
Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21 Week 6 Slide 1 of 28 Week 6 Agenda
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationGroupings and Selectors
Groupings and Selectors Steps to Success Using the headings.html web page you created in steps, we'll discuss the type selector and grouping. We'll look at how we can utilize grouping efficiently within
More informationCSS BASICS. selector { property: value; }
GETTING STARTED 1. Download the Juice-o-Rama 11-01 zip file from our course dropbox. 2. Move the file to the desktop. You have learned two ways to do this. 3. Unzip the file by double clicking it. You
More informationUsing Dreamweaver CS6
6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just
More informationIntroduction to Web Design CSS Reference
Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:
More informationIntroduction to Web Design CSS Reference
Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:
More informationGIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: CREATING AN HTML LIST Most horizontal or vertical navigation bars begin with a simple
More informationCreating a Job Aid using HTML and CSS
Creating a Job Aid using HTML and CSS In this tutorial we will apply what we have learned about HTML and CSS. We will create a web page containing a job aid about how to buy from a vending machine. Optionally,
More informationAppendix D CSS Properties and Values
HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by
More informationDAY 4. Coding External Style Sheets
DAY 4 Coding External Style Sheets LESSON LEARNING TARGETS I can code and apply an embedded style sheet to a Web page. I can code and apply an external style sheet to multiple Web pages. I can code and
More informationIntroduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100
Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!
More informationWeb Recruitment Module Customisation
Web Recruitment Module Customisation Introduction The People Inc. Web Recruitment add-on enables users to publish details of vacancies on their web site. This information is integrated seamlessly into
More information**Method 3** By attaching a style sheet to your web page, and then placing all your styles in that new style sheet.
CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look
More informationCOSC 2206 Internet Tools. CSS Cascading Style Sheets
COSC 2206 Internet Tools CSS Cascading Style Sheets 1 W3C CSS Reference The official reference is here www.w3.org/style/css/ 2 W3C CSS Validator You can upload a CSS file and the validator will check it
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationCSS: The Basics CISC 282 September 20, 2014
CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML
More informationWeb Design and Development Tutorial 03
Table of Contents Web Design & Development - Tutorial 03... 2 Using and Applying CSS to XHTML... 2 Conventions... 2 What you need for this tutorial... 2 Common Terminology... 3 Parent / Child Elements...
More informationIntroduction to Web Tech and Programming
Introduction to Web Tech and Programming Cascading Style Sheets Designed to facilitate separation of content and presentation from a document Allows easy modification of style for an entire page or an
More informationBefore you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website.
9 Now it s time to challenge the serious web developers among you. In this section we will create a website that will bring together skills learned in all of the previous exercises. In many sections, rather
More information<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***
Chapter 7 Using Advanced Cascading Style Sheets HTML is limited in its ability to define the appearance, or style, across one or mare Web pages. We use Cascading style sheets to accomplish this. Remember
More informationLBS Polytechnic. Hey! Make With The Style Sheet Already, Bub!
When you're all done, the format will look like this: Hey! Make With The Style Sheet Already, Bub! This
More informationUsing Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationCREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1
CREATING A WEBSITE USING CSS Mrs. Procopio CTEC6 MYP1 HTML VS. CSS HTML Hypertext Markup Language CSS Cascading Style Sheet HTML VS. CSS HTML is used to define the structure and content of a webpage. CSS
More informationCreating Layouts Using CSS. Lesson 9
Creating Layouts Using CSS Lesson 9 CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
More information5 Snowdonia. 94 Web Applications with C#.ASP
94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial
More informationADDING CSS TO YOUR HTML DOCUMENT. A FEW CSS VALUES (colour, size and the box model)
INTRO TO CSS RECAP HTML WHAT IS CSS ADDING CSS TO YOUR HTML DOCUMENT CSS IN THE DIRECTORY TREE CSS RULES A FEW CSS VALUES (colour, size and the box model) CSS SELECTORS SPECIFICITY WEEK 1 HTML In Week
More informationCSS worksheet. JMC 105 Drake University
CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever
More informationHTML and CSS a further introduction
HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few
More informationCS 350 Internet Applications I Name: Exam II (CSS) October 29, 2013
CS 350 Internet Applications I Name: Exam II (CSS) October 29, 2013 Part I. (50%) Multiple Guess Choice. 1. What does CSS stand for? a. Creative Style Sheets b. Computer Style Sheets c. Cascading Style
More informationIntermediate Web Publishing: Working with Styles
Intermediate Web Publishing: Working with Styles Jeff Pankin Information Services & Technology Contents Introduction... 2 In this class you will:... 2 Set the Preferences... 2 General... 2 Invisible Elements...
More informationCSS Styles Quick Reference Guide
Table 1: CSS Font and Text Properties Font & Text Properties Example(s) font-family Font or typeface font-family: Tahoma font-size Size of the font font-size: 12pt font-weight Normal or bold font-weight:
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationLab 1: Introducing HTML5 and CSS3
CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.
More informationStyles, Style Sheets, the Box Model and Liquid Layout
Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of
More informationCascading Style Sheets CSCI 311
Cascading Style Sheets CSCI 311 Learning Objectives Learn how to use CSS to style the page Learn to separate style from structure Styling with CSS Structure is separated from style in HTML5 CSS (Cascading
More informationCSS. Selectors & Measurments. Copyright DevelopIntelligence LLC
CSS Selectors & Measurments 1 Back to descendants remember walking down the document tree structure and see how parents and children interact not only is it important to know about inheritance walking
More informationCascading Style Sheets. Overview and Basic use of CSS
Cascading Style Sheets Overview and Basic use of CSS What are Style Sheets? A World Wide Web Consortium (W3C) defined standard A way for web page designers to separate the formatting of a document from
More informationReview Question 1. Which tag is used to create a link to another page? 1. <p> 2. <li> 3. <a> 4. <em>
Introduction to CSS Review Question 1 Which tag is used to create a link to another page? 1. 2. 3. 4. Review Question 1 Which tag is used to create a link to another page? 1. 2.
More informationFundamentals of Web Technologies. Agenda: HTML Links 5/22/2017. HTML Links - Hyperlinks HTML Lists
ITU 07204: Fundamentals of Web Technologies Lecture 6: HTML Links & Lists Dr. Lupiana, D FCIM, Institute of Finance Management Semester 2 Agenda: HTML Links - Hyperlinks HTML Lists 2 HTML Links A hyperlink
More informationCSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options):
CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look
More informationCMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB
CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 3 Cascading Style Sheets (CSS) Slides based on course material SFU Icons their respective owners 1 Learning Objectives In this unit you
More informationWelcome Please sit on alternating rows. powered by lucid & no.dots.nl/student
Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS
More informationUnveiling the Basics of CSS and how it relates to the DataFlex Web Framework
Unveiling the Basics of CSS and how it relates to the DataFlex Web Framework Presented by Roel Fermont 1 Today more than ever, Cascading Style Sheets (CSS) have a dominant place in online business. CSS
More informationUsing Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles
Using Dreamweaver 6 So far these exercises have deliberately avoided using HTML s formatting options such as the FONT tag. This is because the basic formatting available in HTML has been made largely redundant
More informationThe building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations).
WDI Fundamentals Unit 4 CSS Cheat Sheet Rule The building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations). Declaration A declaration is made
More informationUniversal CSS Navigation Menu: Advanced Styling Patrick Julicher Universal CSS Navigation Menu: Advanced Styling
Universal CSS Navigation Menu: Advanced Styling Page 1 of 15 Content 1. Introduction... 3 2. How to use... 3 2.1. Editing existing CSS Styles... 3 2.2. Creating new CSS Styles... 6 3. Explanation of styles...
More informationIntroduction to Cascading Style Sheet (CSS)
Introduction to Cascading Style Sheet (CSS) Digital Media Center 129 Herring Hall http://dmc.rice.edu/ dmc-info@rice.edu (713) 348-3635 Introduction to Cascading Style Sheets 1. Overview Cascading Style
More informationHTML and CSS: An Introduction
JMC 305 Roschke spring14 1. 2. 3. 4. 5. The Walter Cronkite School... HTML and CSS: An Introduction
More informationIntroduction to Cascading Style Sheets
Introduction to Cascading Style Sheets Welcome to the CSS workshop! Before you begin this workshop you should have some basic understanding of HTML and building web pages. What is CSS anyway and what will
More informationAdding CSS to your HTML
Adding CSS to your HTML Lecture 3 CGS 3066 Fall 2016 September 27, 2016 Making your document pretty CSS is used to add presentation to the HTML document. We have seen 3 ways of adding CSS. In this lecture,
More informationModule 2 (VI): CSS [Part 3]
INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (VI): CSS [Part 3] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationZen Garden. CSS Zen Garden
CSS Patrick Behr CSS HTML = content CSS = display It s important to keep them separated Less code in your HTML Easy maintenance Allows for different mediums Desktop Mobile Print Braille Zen Garden CSS
More informationLecture 10. CSS Properties. Mr. Mubashir Ali Lecturer (Dept. of Computer Science)
Lecture 10 CSS Properties Mr. Mubashir Ali Lecturer (Dept. of dr.mubashirali1@gmail.com 1 Summary of the previous lecture CSS basics CSS writing option CSS rules Id,s and Classes 2 Outline Font properties
More informationNetworks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS. 8 Oct 2015
Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS 8 Oct 2015 What is CSS? o CSS (Style Sheet) defines how HTML elements are formatted and displayed. o It helps you easily change an HTML
More informationActivity 4.1: Creating a new Cascading Style Sheet
UNIVERSITY OF BAHRAIN COLLEGE OF APPLIED STUDIES LAB 4 Understanding & Creating Cascading Style Sheets (CSS) Description: Cascading style sheets (CSS) are collections of formatting rules that control the
More informationBeginning HTML. A tag is a command written between angle brackets (the less than and greater than symbols). Ex. <html>
Beginning HTML HTML Hypertext Markup Language is the language of the Web. HTML files are text files that include tags that indicate the content and structure of a Web page. A Web browser reads the HTML
More informationCSS WHAT IS IT? HOW DOES IT WORK? (LOOK N GOOD)
CSS (LOOK N GOOD) CSS is short for Cascading Style Sheets. This is the stuff that allows you to add formatting and styling your web pages. WHAT IS IT? Let me show you HOW DOES IT WORK? If you have a headline
More information- The CSS1 specification was developed in CSSs provide the means to control and change presentation of HTML documents
3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS3 is on its way - CSSs provide the means to control and change presentation of HTML documents - CSS is not
More informationSession 4. Style Sheets (CSS) Reading & References. A reference containing tables of CSS properties
Session 4 Style Sheets (CSS) 1 Reading Reading & References en.wikipedia.org/wiki/css Style Sheet Tutorials www.htmldog.com/guides/cssbeginner/ A reference containing tables of CSS properties web.simmons.edu/~grabiner/comm244/weekthree/css-basic-properties.html
More informationChapter 5: The Box Model, Links, Lists and Tables
Chapter 5: The Box Model, Links, Lists and Tables Learning Outcomes: Be able to manipulate the appearance of HTML hyperlinks, lists and tables using CSS Identify the features of the CSS box model and how
More informationGIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.
GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question
More information3.1 Introduction. 3.2 Levels of Style Sheets. - The CSS1 specification was developed in There are three levels of style sheets
3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers
More information- The CSS1 specification was developed in CSS2 was released in CSS2.1 reflects browser implementations
3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers
More information7300 Warden Avenue, Suite 503 Markham, Ontario Canada L3R 9Z6. Phone: Toll Free: Fax:
HTML and CSS 7300 Warden Avenue, Suite 503 Markham, Ontario Canada L3R 9Z6 Phone: 905-479-3780 Toll Free: 877-479-3780 Fax: 905-479-1047 e-mail: info@andarsoftware.com Web: www.andarsoftware.com.com Copyright
More informationMicrosoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,
More informationWhat do we mean by layouts?
What do we mean by layouts? A layout is how you position the elements of your page You can have columns Move paragraphs and sections around And you can do this all without changing the content of your
More informationThe default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows:
CSS Tutorial Part 2: Lists: The default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows: ul { list-style-type: circle; or
More informationHTML & CSS Cheat Sheet
1 HTML & CSS Cheat Sheet Fall 2017 HTML & CSS Cheat Sheet from Typographic Web Design 3 by Laura Franz Web safe fonts vs web fonts You can expect these web safe fonts to work across most platforms and
More informationProject 1: Creating a Web Site from Scratch. Skills and Tools: Use Expression Web tools to create a Web site
E00EW3.qxp 4/14/2007 3:17 PM Page 1 Workshops w Introduction The Workshop is all about being creative and thinking outside of the box. These workshops will help your right-brain soar, while making your
More informationCSS: Formatting Text. CSS for text processing: font-family. Robert A. Fulkerson
CSS: Formatting Text Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for text processing: font-family
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 7 Dynamic HTML Dynamic HTML (DHTML) is a term that refers to website that use a combination of HTML, scripting such as JavaScript, CSS and the Document Object Model (DOM). HTML and
More informationPart 3: Images & form styling NOMZAMO S WEBSITE
Part 3: Images & form styling NOMZAMO S WEBSITE 1 OUR MISSION: In this lesson, we ll learn 3 new things 1. How to include the logo image 2.How to add background image 3.How to style the email input form
More information