Doman’s Sections Information in this presentation includes text and images from
Add an image Add style to each of the following elements: Background The heading elements The text in the paragraphs One or all of your links Each list Each table Float some element to the right side of the page
Add images to webpage by using a single HTML tag, the image source tag Key is getting the location correct
Save your images in the same folder as your html file.
Alternate attribute – This provides text for browsers that don’t have graphic capabilities. It also provides the text shown when the input pointer hovers over the image.
Secure the size of the image displayed – height and width attributes These can be specified in units of Percentage of the page real estate Actual pixels
Use the anchor tag to surround the image tag. This makes the image the hyperlink text:
Add an image Add style to each of the following elements: Background The heading elements The text in the paragraphs One or all of your links Each list Each table Float some element to the right side of the page
CSS stands for Cascading Style Sheets Set of rules that determine how the styles are applied to the HTML tags in the document (1). Syntax of CSS Rules consist of: 1. Selectors 2. Declarations [1] Sam’s Teach Yourself HTML in 10 Minutes, SAMS Publishing; Indianapolis IN, 2007
Selectors HTML tags that receive the style Declarations The style sheet properties and their values
Embedded tags are placed in the section and affect the entire file. Inline … Linked <head 1.
All styles are defined a the top of the HTML document within the tag. They contain information about the entire document!
<head> <style type=“text/css”> </style> </head> body{ } background :blue;
CSS properties used for background effects: background-color : Sets the background color of an element background-image: Sets the background image for an element background-repeat : Sets if/how a background image will be repeated background-position: Sets the starting position of a background image background-attachment : Sets whether a background image is fixed or scrolls with the rest of the page Tutorial Link
color : Sets the color of a text text-align: Aligns the text in an element vertical-align: Sets the vertical alignment of an element text-decoration: Adds decoration to text text-transform: Controls the letters in an element text-indent: Indents the first line of text in an element Tutorial Link
font-family: Specifies the font family for text font-size: Specifies the font size of text font-style: Specifies the font style for text font-weight: Specifies the weight of a font Tutorial Link
Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker list-style-type: Specifies the type of list-item marker list-style-image: Specifies an image as the list- item marker Tutorial Link
border: specify table borders border-collapse: sets whether the table borders are collapsed into a single border or separated width and height: specifies the width/height of the element Tutorial Link
An element can be pushed to the left or right, allowing other elements to wrap around it. Float is useful for both images and layouts img { float:right; }
Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. Tutorial Link
Links are styled differently depending on what state they are in. The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the mouse sits over it a:active - a link the moment it is clicked These are called CSS pseudo-classes Links can be style with any CSS property (e.g. color, font-family, background-color). Tutorial Link
a:link {color: pink;} /* unvisited link */ a:visited {color: red;} /* visited link */ a:hover {color: blue;} /* mouse over link */ a:active {color: green;} /* selected link */
Add an image Add style to each of the following elements: Background The heading elements The text in the paragraphs One or all of your links Each list Each table Float some element to the right side of the page
h1 { color:”red”; } This causes all text surround by an tag to be red. What if I want only one or some tags to be red? CSS allows selectors "class". These selectors provide the ability to differentiate which tags are associated with the format
Specifies a style for any HTML elements with the same class. Defined by a “.” Referenced in the class attribute of the HTML element
Classes can affect all HTML elements that associate with the class Classes can be attached to specific HTML elements..yellowClass {color:yellow;} h1.redClass { color:red; } h1.blueClass{color:blue;} h1 {color:green; }
Indicate class name as an attribute of the tag: Red Heading Blue Heading Yellow Heading Other headings Tutorial Red Heading Blue Heading Yellow Heading Other headings
In your homework, you can use the class attribute in each of your structures: Paragraphs Lists Tables Images Anchors Then add styling formats to the class selector in the head section
The "first-letter" pseudo-element is used to add a special style to the first letter of a text: p:first-letter { color:#ff0000; font-size:xx-large; } Y ou can use the :first- letter pseudo-element to add a special effect to the first character of a text! Tutorial Link
Allows the user to navigate the website Must be clear in purpose and easy to find Navigation menus are usually on all pages Normally along the top or left side of the page
Create 2 more pages by copying the one created. Change the title tag on the page. Save as.html files with a new name
List of links. Use the anchor tag to link to your 2 nd and 3 rd page. Link each page to the other two. You can use text or an image to link the pages.
First page First page First page
Key is getting the location correct Remember to use the complete URL with http prefix …. OR…..
Save all html document files in the same folder. Specify : text
Navigation bar can be a list of links. So, add style characteristics to the list to make it look more like what we want 1. Remove bullets or numbers 2. Make the whole area around the word ‘clickable’ 3. Display vertical or horizontal navigation bar
Remove bullets or numbers -> tag the list selector ul { list-style-type:none; margin:0; padding:0; } list-style-type:none - Removes the bullets. A navigation bar does not need list markers Setting margins and padding to 0 to remove browser default settings
Make the whole area around the word ‘clickable’ -> style the anchor selector a { display:block; width:60px; } display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width width:60px - Block elements take up the full width available by default. We want to specify a 60 px width
Display vertical or horizontal navigation bar -> style the list item selector Use either display or float attributes li { display:inline; … } li { float:left; } display:inline; - By default, elements are block elements. Removing the line breaks before and after each list item, displays them on one line float:left - use float to get block elements to slide next to each other Tutorial Link
Used to add special effects to some selectors. Syntax: selector:pseudo-element {property:value;}
The tag defines a division or a section in an HTML document. The tag is often used to group block-elements to format them with styles. This is a header This is a paragraph. Tutorial Link
Feel free to look at the examples provided by w3schools.com. Use these techniques to format your own pages: CSS EXAMPLES Tutorial
Ethics and Privacy Midterm in 2 weeks