CSS Presentation and Positioning CSS Fonts Borders Backgrounds

CSS Presentation and Positioning CSS Fonts, Borders, Backgrounds, Positioning CSS and Presen Pos tatio itio ning n Soft. Uni Team Technical Trainers Software University http: //softuni. bg

Table of Contents 1. CSS Fonts § Font Rules – Color, Font-family, Font-style… § Text Shadow – p { text-shadow: 2 px 7 px #000; } § Word Wrap 2. 3. 4. 5. 6. – p { word-wrap: break-word; } CSS Borders Margins and Paddings Border and Content Box CSS Positioning Float and Clear 2

Have a Question? sli. do #html-softuni 3

CSS Font / Text Properties

Font Property § CSS font property font: italic normal bold 12 px/16 px Verdana font-style: italic; font-variant: normal; font-weight: bold; font-size: 12 px; line-height: 16 px; font-family: Verdana; 5

Font Embedding <h 1>HTML & CSS Course</h 1> <h 2>Normal Text</h 2> @font-face { } font-family: Sketch. Rockwell; src: url('fonts/Sketch. Rockwell. ttf') h 1 { font-family: Sketch. Rockwell; font-size: 3. 5 em } 6

Importing "Lato" from Google Font Directory @import url('https: //fonts. googleapis. com/css? family=Lato'); body { font-family: Lato, Arial, sans-serif; } serif font sans-serif font 7

CSS Font Rules: Color <h 1>color</h 1> <p>Text with default color</p> <p class="color-ddd">Text…</p> <p class="color-coral">Text…</p> <p class="color-rgba">Text…</p> . color-ddd { color: #DDD; } . color-coral { color: coral; } . color-rgba { } color: rgba(30, 106, 255, 0. 75)

CSS Font Rules: Font-Weight <p <p class="weight-light">Text…</p> class="weight-bold">Text…</p> . weight-light { } font-weight: light; . weight-bold { } font-weight: bold; Check more font-weight: https: //css-tricks. com/almanac/properties/f/font-weight/

CSS Font Rules: Font-Style <p <p class="font-style-italic">Text…</p> class="font-style-oblique">Text…</p> . font-style-italic { } font-style: italic; . font-style-oblique { } font-style: oblique; Check more font-style: https: //css-tricks. com/almanac/properties/f/font-style/

CSS Font Rules: Text-Align <p <p class="text-align-center">Text…</p> class="text-align-justify">Text…</p> . text-align-center { } text-align: center; . text-align-justify { } text-align: justify; Check more text-align: https: //css-tricks. com/almanac/properties/t/text-align/

CSS Font Rules: Text-Transform <p <p class="uppercase">Text…</p> class="capitalize">Text…</p> . uppercase { } text-transform: uppercase; . capitalize { } text-transform: capitalize; Check more text-transform: https: //css-tricks. com/almanac/properties/t/text-transform/

Text Shadow <blur radius> <shadow color> p { text-shadow: 2 px 7 px #000; } <horizontal distance> <vertical distance> 13

Word Wrapping <p>This paragraph…</p> p { word-wrap: normal; } p { word-wrap: break-word; } 14

Problem: Problem Briard History 15

Solution: Briard History (HTML) <main> <h 1>Briards</h 1> <h 2>A Heart wrapped <span>in</span> fur</h 2> <article> <header> <h 3><a class="breed" href="https: //en. wikipedia. org/wiki/Briard"> Briard History</a></h 3> </header> <img src="briard. jpg" alt="briard"> <p><!—TODO put the text here…--></p> <p class="credits">by Ivy Duckett</p> </article> Check your solution here: https: //judge. softuni. bg/Contests/406/ </main> 16

Solution: Briard History (CSS) @import url("https: //fonts. googleapi s. com/css? family=Lobster"); html { font-size: 16 px; } main { margin: 0 auto; width: 800 px; padding: 20 px; } h 1, h 2, h 3, a { font-weight: normal; color: #0088 dd; margin: 0; text-align: center; font-size: 2. 1 rem; text-decoration: none; } h 1 { font-family: Georgia, Times, serif; font-size: 3. 5 em; text-shadow: 2 px 4 px #666666; padding-bottom: 10 px; text-transform: capitalize; } h 2 { font-family: Arial, sans-serif; font-size: 2. 3 rem; text-transform: capitalize; letter-spacing: 0. 3 rem } h 2 span { text-transform: none; } 17

Solution: Briard History (More CSS) article { margin-top: 20 px; text-align: justify; } p { font-family: Arial, Verdana, sans-serif; line-height: 30 px; color: #665544; font-size: 1. 4 rem; }. credits { font-style: italic; text-align: right; } header { margin-bottom: 20 px; } img { width: 200 px; float: left; margin-right: 20 px; } p: first-of-type: first-letter { font-weight: bold; font-size: 3. 8 rem; font-family: 'Lobster', cursive; text-transform: uppercase; } 18

CSS Borders

Border Properties div { width: 160 px; height: 50 px; border-width: 2 px; border-style: solid; border-color: #0053 ff; border-radius: 15 px; border-top-left-radius: 30 px; border-bottom-style: dotted; border-left-color: #89 AF 4 C; } 20

Border Shorthand Property <div>Short Syntax</div> border-width border-style div { border: 4 px solid #0053 ff; width: 160 px; height: 50 px; border-color }

Box Shadow. box { margin: 5 px; blur color width: 50 px; height: 30 px; background: #9 DC 45 F; box-shadow: 8 px 5 px #888; } offset-x offset-y 22

Border Radius top-left top-right . rounded { border-radius: 15 px 5 px; bottom} bottom-right left 23

CSS Background Properties

Background (Background-Image) body { background-image: url(img/bgr. png); background-repeat: repeat-x; repeat background-repeat: repeat-y; background-repeat: no-repeat; } repeat-x

Background Shorthand Property backgroundcolor backgroundimage backgroundrepeat body { background: #FFF 0 C 0 url(img. jpg) no-repeat fixed top ; } backgroundattachment backgroundposition 26

CSS Sprites: Multiple Images in a Single File <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="img_navsprites. gif"> id="home" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="img_trans. gif">Home

CSS Sprites: Multiple Images in a Single File <img src="img_navsprites. gif"> id="home" src="img_trans. gif">Home id="next" src="img_trans. gif">Right #home { width: 46 px; height: 44 px; background: url(img_navsprites. gif) 0 0; vertical-align: middle; } Use negative value: #next { move left by 91 px width: 43 px; background: url(img_navsprites. gif) -91 px 0; vertical-align: middle; } 27

Width and Height

Width, Max-Width, Min-Width § Block elements have width / height § Inline elements don't have div, span { width: 200 px; } <div> I am block … </div> <span> I am span … </span> p { width: 50%; min-width: 120 px; max-width: 220 px; }

Height, Min-Height, Max-Height § Block elements have width / height § Inline elements don't have div, span { height: 40 px; } <div> I am block … </div> <span> I am span … </span> p { height: 50%; min-height: 50 px; max-height: 100 px; }

Inline-Block Elements: Vertical-Align top middle bottom. boxes li { display: inline-block; text-align: center; width: 50 px; border: 1 px solid green; } . boxes li: nth-child(1) { height: 100 px; vertical-align: top; }. boxes li: nth-child(2) { height: 50 px; } 31

Margins and Paddings

Margins and Paddings margin padding margin-top margin-right margin-bottom div { margin: 20 px padding: 30 px } marginleft 33

Problem: Social Media 34

Solution: Social Media – HTML <footer> <section> <h 2>my account</h 2> <ul> <li><a href="#">orders</a></li> <li><a href="#">profile details</a></li> </ul> </section>    35

Solution: Social Media – HTML (1) <section> <h 2>let's get in touch</h 2> <div class="facebook"><a href="#"></a></div> <div class="linkedin"><a href="#"></a></div> <div class="youtube"><a href="#"></a></div> <div class="twitter"><a href="#"></a></div> </section> </footer> Check your solution here: https: //judge. softuni. bg/Contests/406/ 36

Solution: Social Media – CSS ul, li, div, section, a { margin: 0; padding: 0; } body { background: rgb(41, 41); } footer { height: 150 px; margin: 0 auto; } h 2 { text-transform: uppercase; } section { float: left; margin-left: 10 px; padding: 20 px; height: 150 px; color: #ffffff; } ul { list-style: none; } a { text-decoration: none; color: rgb(181, 180, 152); font-size: 30 px; text-transform: capitalize; } 37

Solution: Social Media – CSS (1) footer > section > div { width: 70 px; height: 58 px; background: url("images/social. jpg"); display: inline-block; }. twitter { background-position: 772 px 126 px; }. linkedin { background-position: 642 px 126 px; }. youtube { background-position: 325 px 126 px; }. facebook, . twitter, . youtube, . linkedin { cursor: pointer; }. facebook: hover { background-position: 0 60 px; }. linkedin: hover { background-position: 642 px 63 px; }. youtube: hover { background-position: 325 px 63 px; }. twitter: hover { background-position: -66 px 63 px; } 38

Border Box and Content Box

CSS Box-Sizing: Content-Box <div class="div 1">This div is smaller…</div> <div class="div 2">This div is bigger…</div>. div 1 { width: 300 px; height: 100 px; border: 1 px solid blue; }. div 2 { width: 300 px; height: 100 px; padding: 50 px; border: 1 px solid blue; }

CSS Box-Sizing: Border-Box <div class="div 1">Both divs…</div> <div class="div 2">Hooray!</div> * { box-sizing: border-box; }. div 1 { width: 300 px; height: 100 px; border: 1 px solid blue; }. div 2 { width: 300 px; height: 100 px; padding: 50 px; border: 1 px solid blue; }

CSS Positioning of the HTML Elements

Positioning: Static <div class="static"> static is the default value… </div> . static { position: static; border: 3 px solid green; padding: 10 px; } 43

Positioning: Relative <div class="relative 1"> relative behaves … <div class="relative 2"> Setting the top… </div> . relative 1 { position: relative; }. relative 2 { position: relative; top: 20 px; left: 30 px; } 44

Positioning: Absolute <div class="relative"> This element is relatively… <div class="absolute"> This element is… </div> . relative { position: relative; }. absolute { position: absolute; top: 100 px; right: 0; } 45

Positioning: Fixed. fixed { position: fixed; top: 40 px; background: white; width: 150 px; border: 3 px solid #8 b 603 d; }. div { background: #CCCCCC; opacity: 0. 8; width: 150 px; height: 50 px; border: 3 px solid #0000 FF; } <div class="fixed"> A fixed element is positioned… </div> <div class="div"></div> 46

Problem: Drop Down Menu § Create a Web page (HTML + CSS) like at the screenshot: Check your solution here: https: //judge. softuni. bg/Contests/406/ 47

Solution: Drop Down Menu (HTML) <nav> <ul> <li><a href="#">Home</a></li>  <li><a href="#">Web Design</a> <ul>  <li><a href="#">Tutorials</a> <ul> </ul> </li> </ul> </nav> 48

Solution: Drop Down Menu (CSS) @import url(http: //fonts. googleapis. co m/css? family=Open+Sans); body { font-family: 'Open Sans', sans-serif; background: #1 d 211 e; font-size: 22 px; line-height: 22 px; color: #ffffff; text-align: center; } a { color: #ffffff; } nav { margin: 50 px 0; background-color: #e 67 c 1 f; } nav ul { padding: 0; margin: 0; list-style: none; position: relative; } nav ul li { display: inline-block; background-color: #e 67 c 1 f; } 49

Solution: Drop Down Menu (More CSS) nav a { display: block; padding: 0 10 px; color: #FFF; font-size: 20 px; line-height: 60 px; text-decoration: none; } nav a: hover { background-color: #000000; } nav ul ul { display: none; position: absolute; } nav ul li: hover > ul { display: inline-block; } nav ul ul li { width: 170 px; position: relative; display: block; } nav ul ul ul li { position: relative; top: -60 px; left: 85 px; } li > a: : after { content: ' +'; } li > a: only-child: : after { content: ''; } 50

Floating Elements

Floating Elements § HTML elements can float left and right float: left Some text around … <div style= "float: left"> float: left </div> no floating block Some text before … <div style= "margin: 0 auto"> no floating block </div> float: right Some text around … <div style= "float: right"> float: left </div> 52

Problem: Floating Elements (HTML) § Create a Web page (HTML + CSS) like at the screenshot: <main> <div class="left">left</div> <p>The float CSS property …</p> <div class="right">right</div> <p>The float CSS property …</p> <p>Without floating …</p> <div class="center">no float</div> <p>Without floating …</p> </main> Check your solution here: https: //judge. softuni. bg/Contests/406/ 53

Solution: Floating Elements (CSS) main { width: 400 px; text-align: justify; }. left, . right, . center { width: 120 px; height: 30 px; line-height: 30 px; text-align: center; padding: 10 px; background: Cornflower. Blue; border-radius: 5 px; text-shadow: 0 px 5 px white; } . left { float: left; margin-right: 10 px; }. right { float: right; margin-left: 10 px; }. center { margin: 0 auto; } 54

Problem: Clear Floating § You are given the HTML for this page. Write the missing CSS. Use left floating, right floating and clearing 55

Solution: Clear Floating (HTML) <header> <h 1>Chania</h 1> </header> <main class="clearfix"> <aside class="float-left menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> Check your solution here: https: //judge. softuni. bg/Contests/406/ </aside> 56

Solution: Clear Floating (HTML) <article class="float-right content"> <h 2>The City</h 2> <p>Chania is the capital of the Chania…</p> <p>You will learn more about web layout… </p> </article> </main> <footer> <p>Footer Text</p> </footer> 57

Solution: Clear Floating (CSS) * { box-sizing: border-box; } header, footer { background: #8 b 603 d; color: white; padding: 15 px; border: 2 px solid #4 B 4 B 4 B; }. menu { width: 25%; }. float-left { float: left; padding: 15 px; }. float-right { float: right; }. content { width: 75%; } . menu ul { list-style-type: none; margin: 0; padding: 0; }. menu li { padding: 8 px; margin-bottom: 8 px; background: #33 b 5 e 5; color: #ffffff; }. clearfix: : after { content: ""; display: block; clear: both; height: 0; } 58

Summary § Font @font-face {font-family: Lato; } § Borders: div {border: 4 px solid #0053 ff; } § Margins and Paddings § CSS Positioning § Float and Clear. left {float: left; }. clearfix{clear: left; } 59

CSS Presentation and Positioning ? s n o i t s e u Q ? ? ? https: //softuni. bg/courses/web-fundamentals-html 5

License § This course (slides, examples, demos, videos, homework, etc. ) is licensed under the "Creative Commons Attribution. Non. Commercial-Share. Alike 4. 0 International" license 61

Free Trainings @ Software University § Software University – High-Quality Education, Profession and Job for Software Developers § softuni. bg § Software University Foundation § softuni. org § Software University @ Facebook § facebook. com/Software. University § Software University Forums § forum. softuni. bg