1 / 12

Web Development

Web Development. Technical Summer School 2018, IIT Bombay – Varun Patil Part 2 – More on HTML, CSS and JavaScript. id and class attributes. <p id = "first-paragraph" class = "good-stuff" > This is first </p> <p id = "second-paragraph" class = "good-stuff" > This is second </p>

pmaker
Download Presentation

Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Development Technical Summer School 2018, IIT Bombay – Varun Patil Part 2 – More on HTML, CSS and JavaScript

  2. id and class attributes <pid="first-paragraph"class="good-stuff"> This is first </p> <pid="second-paragraph"class="good-stuff"> This is second </p> <pid="strange-para"> This is third and is really weird </p> <pclass="good-stuff important"> This is last and important </p> • id – Unique identity for an HTML element • class – Group of elements that have something common • Can have one or more classes, but only one id Web Development TSS 2018 - Varun Patil, IIT Bombay

  3. The style attribute <tagstyle="property:value;"> <pstyle="color:red;">This is a red paragraph.</p> • Change how an element looks • Predefined properties and their values • For example, • color:blue; • font-size:30pt; • text-align:center; • Can have multiple semi-colon separated pairs • style="color:red; font-size:30pt" Web Development TSS 2018 - Varun Patil, IIT Bombay

  4. Common CSS Properties • color:green; background-color:#ff6600 • text-align:center • height:100px; width:200px • width:70%; max-width:400px • text-decoration:underline(or overline/line-through) • display:block(or inline-block/inline/none) • font-size:15px; font-weight:bold • margin:20px; margin-top:10px • padding:10px; padding-right:6px • border-style:solid; border-width:3px; border-color:red • border-radius:5px Web Development TSS 2018 - Varun Patil, IIT Bombay

  5. color and background-color • color - color of the text • background-color - color of the box around the text • Some colors pre-defined, for example, red green black • More – lightpink aqua teal fuchsia purple • Can use any arbitrary color - #ff6347 • Alpha -background-color:rgba(255, 99, 71, 0.5); • Backgrounds can also be images • Note – color, notcolour Web Development TSS 2018 - Varun Patil, IIT Bombay

  6. margin and padding • margin – separation between objects • padding – separation of content with border of the same object • Can be specified in pixels, percentages, points etc. Web Development TSS 2018 - Varun Patil, IIT Bombay

  7. font-size and font-family • Change the font size • Unit preferred is em – relative to current Web Development TSS 2018 - Varun Patil, IIT Bombay

  8. Some more properties • width, height • float • border-style, border-width, border-color • border-radius • box-shadow • text-align • And it goes on … Web Development TSS 2018 - Varun Patil, IIT Bombay

  9. Separating styles • Too much style in HTML – looks ugly • Hard to maintain • Lots of repetition • One change requires changing a lot Web Development TSS 2018 - Varun Patil, IIT Bombay

  10. Separating styles <head> <style> .big-text { font-size: 30px; } #main { color: red; } </style> </head> <body> <pid="main"class="big-text">This is one</p> <p>This is two</p> <pclass="big-text">This is three</p> </body> Web Development TSS 2018 - Varun Patil, IIT Bombay

  11. Cascading Style Sheets • Put all styles in a separate mystyles.css • Link the file in <head> index.html <head> <linkrel="stylesheet"type="text/css"href="mystyle.css"> </head> .big-text{ font-size: 30px; } #main{ color: red; } mystyle.css Web Development TSS 2018 - Varun Patil, IIT Bombay

  12. Thank You!

More Related