Web Client Side Technologies 0780341 Raneem Qaddoura CSS Web Client Side Technologies 0780341 Raneem Qaddoura
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
Selectors element Selector: id Selector p { text-align: center; color: red; } #para1 { text-align: center; color: red; }
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; }
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; }
Ways to Insert CSS External style sheet Internal style sheet Inline style
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; }
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>
CSS properties colors Background Color Text Color Border Color Borders Border Style Border Width Border - Individual Sides Border - Shorthand Property Rounded Borders
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
The box model
CSS properties Text Color Text Alignment Text Decoration Text Transformation Text Indentation Letter Spacing Line Height Text Direction Word Spacing Text Shadow
CSS properties font Font Family Font Style Font Size Font Weight links Styling Links Text Decoration Background Color
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>
CSS properties display float & clear Inline-block opacity align Center Align Elements Center Align Text Center an Image
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
CSS Website Layout layout
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.
Case studies CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites
Self Study CSS Lists (https://www.w3schools.com/css/css_list.asp) CSS tables (https://www.w3schools.com/css/css_table.asp)
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.".