Download presentation
Presentation is loading. Please wait.
1
Web Client Side Technologies 0780341 Raneem Qaddoura
CSS Web Client Side Technologies Raneem Qaddoura
2
What is CSS? CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files
3
Selectors element Selector: id Selector
p { text-align: center; color: red; } #para1 { text-align: center; color: red; }
4
Selectors class Selector Grouping Selectors
.center { text-align: center; color: red; } p.center { text-align: center; color: red; } p, h1, h2 { text-align: center; color: red; }
5
CSS Combinators Descendant Selector: The descendant selector matches all elements that are descendants of a specified element. Child Selector :The child selector selects all elements that are the immediate children of a specified element. div p { background-color: yellow; } div > p { background-color: yellow; }
6
Ways to Insert CSS External style sheet Internal style sheet
Inline style
7
Ways to Insert CSS External style sheet
Here is how the "mystyle.css" looks: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; }
8
Ways to Insert CSS Internal style sheet Inline style
<head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <h1 style="color:blue;margin-left:30px;">This is a heading</h1>
9
CSS properties colors Background Color Text Color Border Color Borders
Border Style Border Width Border - Individual Sides Border - Shorthand Property Rounded Borders
10
CSS properties Width & Height Setting height and width
Setting max-width Margins Margin - Individual Sides Margin - Shorthand Property The auto Value The inherit Value padding Padding - Individual Sides Padding - Shorthand Property Padding and Element Width
11
The box model
12
CSS properties Text Color Text Alignment Text Decoration
Text Transformation Text Indentation Letter Spacing Line Height Text Direction Word Spacing Text Shadow
13
CSS properties font Font Family Font Style Font Size Font Weight links
Styling Links Text Decoration Background Color
14
Link example <head> <body> <style>
a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; </style> </head> <body> <h2>Link Button</h2> <p>A link styled as a button:</p> <a href="default.asp" target="_blank">This is a link</a> </body>
15
CSS properties display float & clear Inline-block opacity align
Center Align Elements Center Align Text Center an Image
16
CSS properties List Different List Item Markers
An Image as The List Item Marker List - Shorthand property Table Table Borders Collapse Table Borders Table Width and Height Horizontal Alignment Vertical Alignment Table Padding Horizontal Dividers Hoverable Table Striped Tables
17
CSS Website Layout layout
18
CSS Specificity Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector: Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">. IDs - An ID is a unique identifier for the page elements, such as #navbar. Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc. Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.
19
Case studies CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites
20
Self Study CSS Lists (https://www.w3schools.com/css/css_list.asp)
CSS tables (
21
References https://www.w3schools.com/
Sharma, P. (2013). Introduction to Web Technology. SK Kataria and Sons. Peterson, C. (2014). Learning responsive web design: a beginner's guide. " O'Reilly Media, Inc.".
Similar presentations
