CSS Layout Basics and More: Enhancing Web Design with Dr. Ahmad Al-Sabhany
Dive into Chapter 2 with Dr. Ahmad Al-Sabhany to explore CSS basics, layout fundamentals, and background styling. Learn about CSS overrides, positioning, z-index, and more to level up your web design skills.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Chapter 2 More CCS & Layout Basics Dr. Ahmad Al-Sabhany
Outline CSS -Class CSS -Background CSS -Width CSS -Borders CSS -Text formatting CSS Override (!important) CSS -Display CSS -Float CSS -Position CSS -Z-index Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 2
Background Try these examples @ https://www.w3schools.com/cssref/css3_pr_background.asp Background color background-color: lightblue; background-color: green; opacity: 0.3; background: rgba(0, 128, 0, 0.3); /* Green background with 30% opacity */ background:#ccaa00; background:#00eeffaa; background-image: linear-gradient(red, yellow); background-image: linear-gradient(to bottom right, red, yellow); background-image: linear-gradient(angle, color-stop1, color-stop2); background-image: linear-gradient(180deg, red, yellow); background-image: linear-gradient(blue, indigo, violet); Background image background-image: url("bgdesert.jpg"); background-image: url("gradient_bg.png"); background-repeat: repeat-x; background-repeat: no-repeat; background-position: right top; background-attachment: scroll; background-attachment: fixed; background-position: center; background-size: cover; background-size: contain; background: url(img_tree.gif), url(mountain.jpg); background-image: radial-gradient(red, yellow, green); background-image: conic-gradient(red, yellow, green, blue, black); Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 3
Example (Hero Background) Must try <html> <head> <meta name="viewport" content="width=device-width, initial- scale=1"> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif;} .hero-image { background-image: url("/w3images/photographer.jpg"); background-color: #cccccc; height: 500px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;} <div class="hero-image"> <div class="hero-text"> <h1 style="font-size:50px">I am Jane Doe</h1> <h3>And I'm a Photographer</h3> <button>Hire me</button> </div> </div> <p>Page content..</p> <p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p> </body> </html> .hero-text { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white;} </style> </head> <body> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 4
CSS Classes Class is used to unify a set of elements based on one style We can define a class for any HTML element Classes can be defined as follows: <div class= main > </div> Classes can be selected as follows .main{ color: red; text-align: center; } Unlike id classes can be shared among many elements, even from different elements Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 5
Width <body> <h1>The width Property</h1> <h2>width: auto (default)</h2> <div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. </div> <h2>width: 150px</h2> <div class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. </div> <h2>width: 50%</h2> <div class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</div> </body> </html> Width can be applied to: <body> <div> <img> <p>, and many more width: auto | value in (px/em) | initial | inherit; Source: https://www.w3schools.com/ cssref/pr_dim_width.asp <!DOCTYPE html> <html> <head> <style> div.a { width: auto; border: 1px solid black;} div.b { width: 150px; border: 1px solid black; } div.c { width: 50%; border: 1px solid black; } </style> </head> Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 6
Width & Height .myclass { height: 200px; width: 50%; background-color: powderblue; } .myclass { max-width: 500px; height: 100px; background-color: powderblue; } .myclass { width: calc(100% - 100px); height: 100px; min-height: 200px; background-color: powderblue; } Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 7
Borders Example of shorthand border: style = border: 5px solid red; border-style: dashed; dotted |Dashed | solid | double | none | hidden border-color: #0400ff; black | red | #0000ff | #257b9c | #9c2567a8 border-width: 2px; 10px; | 1em Borders can be applied in any side: Ex: border-bottom: 5px solid blue; Ex: border-right: 2px dotted #257b9c; Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 8
Borders (2) Try all these examples: Ex: border-radius: 5x; Ex: border-radius: 50%; Ex: border-radius: 100%; Ex: border-top-color: red; Ex: border-right-style: dashed; Ex: border-bottom-width: 3px; Ex: border-bottom-color: #1221CC; Ex: border-color: #ff0000; Ex: border-color: rgb(0, 255, 0); Ex: Border-color: black blue; Ex: border-style: solid; Ex: border-style: dotted solid double dashed; Ex: border-style: dotted solid; Ex: border-color: red green blue black; Sources: https://www.w3schools.com/css/css_border.asp , https://www.w3schools.com/css/css_border_width.asp , https://www.w3schools.com/css/css_border_color.asp , https://www.w3schools.com/css/css_border_sides.asp , https://www.w3schools.com/css/css_border_shorthand.asp , https://www.w3schools.com/css/css_border_rounded.asp Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 9
Text formatting Description CSS Property Example Text color color color: red; Text Alignment text-align left | right| center| justify text-align: center; text-align: left; text-align: right; text-align: justify; Text Direction Direction rtl | ltr direction: rtl; direction: ltr; Vertical Alignment vertical-align Baseline | text-top | text-bottom | Sub | super img.e { vertical-align: super; } Text Transformation text-transform Uppercase | lowercase | capitalize p.capitalize { text-transform: capitalize; } Text Decoration text-decoration Overline | line-through | underline h3 { text-decoration: line-through;} Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 10
CSS Override (using !important) Example <!DOCTYPE html> <html> <head> <style> #myid { background-color: blue;} .myclass { background-color: gray;} p { background-color: red !important; } </style> </head> <body> <p>This is some text in a paragraph.</p> <p class="myclass">This is some text in a paragraph.</p> <p id="myid">This is some text in a paragraph.</p> </body> </html> In CSS the inline CSS has the highest priority then the internal CSS then the external CSS. However, the !important if used takes the highest priority The !important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element! Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 11
Display The display property is the most important CSS property for controlling layout. The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block, or inline. Important values: flex | table Ex: p.ex1 {display: none;} p.ex2 {display: inline;} p.ex3 {display: block;} p.ex4 {display: flex;} display: inline-block; display: inline-flex; Source: https://www.w3schools.com/cssref/pr_class_display.asp Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 12
Float The float property specifies whether an element should float to the left, right, or not at all. Note: Absolutely positioned elements ignore the float property! float: none|left|right|initial|inherit; <!DOCTYPE html> <html> <head> <style> img { float: left;} </style> </head> <body> <h1>The float Property</h1> <p><img src="pineapple.jpg" alt="Pineapple style="width:170px;height:170px;margin-right:15px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. velit.</p> </body> </html> Source: https://www.w3schools.com/cssref/pr_class_float.asp Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 13
Position !Must visit: https://www.w3schools.com/cssref/pr_class_position.asp The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). position: static|absolute|fixed|rela tive|sticky|initial|inherit; inherit Inherits this property from its parent element. Value Description static Default value. Elements render in order, as they appear in the document flow absolute The element is positioned relative to its first positioned (not static) ancestor element fixed The element is positioned relative to the browser window relative The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position sticky The element is positioned based on the user's scroll position initial Sets this property to its default value. Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 14
Position - 2 Property Description bottom Sets the bottom margin edge for a positioned box clip Clips an absolutely positioned element left Sets the left margin edge for a positioned box position Specifies the type of positioning for an element right Sets the right margin edge for a positioned box top Sets the top margin edge for a positioned box The (top, bottom, right, left) properties don t work with static or non-positioned elements. It must be relative, absolute, fixed, or sticky. Please visit all the links above Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 15
Z-index <!DOCTYPE html> <html> <head> <style> img { position: absolute; left: 0px; top: 0px; z-index: 1; } </style> </head> <body> <h1>The z-index Property</h1> <img src="w3css.gif" width="100" height="140"> <p>Because the image has a z-index of -1, it will be placed behind the heading.</p> </body> </html> The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements). Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 16
Transform methods CSS 2D Transforms Methods translate() rotate() scaleX() scaleY() scale() skewX() skewY() skew() matrix() https://www.w3schools.com/css/css3_2dtransforms.asp Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 17
Show Case Try it Yourself ! alsabhany@uoa.edu.iq Dr. Ahmad AlSabhany CS Dept | AlMaarif University College 1/9/2022 18
