Chapter_1_Web_Technologies_Basics (CSS)_Part_2.pptx
eyasu6
10 views
23 slides
Mar 04, 2025
Slide 1 of 23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
About This Presentation
web technology
Slide Content
A simply designed language intended to simplify the proces s of making web pages presentable . Allows you to apply styles to HTML documents . It describes how a webpage should look. It prescribes colors, fonts, spacing , etc. In short, you can make your website look however you want . easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML CSS Basics
CSS saves time: can write CSS once and reuse the same sheet in multiple HTML pages. Easy Maintenance: To make a global change simply change the style , and all elements in all the webpages will be updated automatically. Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to struggle to “read” its content. Superior styles to HTML: CSS has a much wider array of attributes than HTML , B/c, it can give a far better look to your HTML page in comparison to HTML attributes . Offline Browsing: CSS can store web applications locally with the help of an offline cache . Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS . So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers . Why CSS ?
Types of CSS Inline CSS : is a method of applying styling directly to individual HTML elements using the “style” attribute within the HTML tag , allowing for specific styling of individual elements within the HTML document , overriding any external or internal styles. <!DOCTYPE html> < html > < head > < title >Inline CSS</ title > </ head > < body > < p style="color:#009900; font-size:50px; font-style:italic ; text-align:center ;"> 4 th Year REGULAR Students!! </ p > </ body > </ html >
Defined within the HTML document’s <style> element. It applies styles to specified HTML elements , The CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the <style> tag inside the head section of the HTML file. External CSS: contains separate CSS files that contain only style properties with the help of tag attributes (For example class, id, heading, … etc ). CSS property is written in a separate file with a . css extension and should be linked to the HTML document using a link tag. It means that, for each element, style can be set only once and will be applied across web pages. Internal or Embedded CSS:
Internal or Embedded CSS : Example <!DOCTYPE html> < html > < head > < title >Internal CSS</ title > < style > . main { text-align: center; } . GFG { color: #009900; font-size: 50px; font-weight: bold; } . geeks { font-style: bold; font-size: 20px; } </ style > </ head > < body > < div class = "main" > < div class = "GFG " >4 th Year ICT </ div > </ div > </ body > </ html >
External CSS Example: body { background-color:powderblue ; } .main { text-align: center; } .GFG { color: #009900; font-size: 50px; font-weight: bold; } #geeks { font-style: bold; font-size: 20px; } <!DOCTYPE html> < html > < head > < title >External CSS</ title > < link rel = "stylesheet“ href ="style.css"> </ head > < body > < div class="main"> < div class="GFG ">4 th year </ div > < div id = "geeks" > IT portal </ div > </ div > </ body > </ html > HTML CSS(style.css)
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts: Selector − A selector is an HTML tag at which a style will be applied . like <h1> or <table> etc. Property − A property is a type of attribute of HTML tag . Put simply, all the HTML attributes are converted into CSS properties . They could be color , border etc. Value − Values are assigned to properties . For example, color property can have value either red or #F1F1F1 etc. CSS - Syntax
CSS - Syntax Example: table { border :1px solid #C00; }
We can define selectors in various simple ways based on your comfort .. The Type Selectors: example to give a color to all level 1 headings − h1 { color : #36CFFF; } The Universal Selectors: Rather than selecting elements of a specific type , the universal selector quite simply matches the name of any element type − * { color : #000000; } CSS - Syntax
The Class Selectors: define style rules based on the class attribute of the elements . All the elements having that class will be formatted according to the defined rule. . black { color : #000000; } The Child Selectors You have seen the descendant selectors . There is one more type of selector, which is very similar to descendants but have different functionality. Consider the following example − body > p { color : #000000; } Multiple Style Rules: need to define multiple style rules for a single element. combine multiple properties and corresponding values into a single block h1 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase ; } Grouping Selectors You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the following example − h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } CSS - Syntax
used to set the background of an element. It can be used to apply a single background image or multiple background images. defining the background color, size, position, repeat behavior, and other related properties. CSS Background – With Image And Background color CSS - Background <html> <head> < style> body { background: url ('images/scenery2.jpg') center/40% 50% no-repeat fixed padding-box content-box lightblue ; } </ style> </ head> <body> <h2>Shorthand Background</h2> </ body> </html>
a set of text characters with a consistent design and style. It includes the shape, size, weight, and other attributes of the characters in a typeface CSS Fonts - With Multiple Values: CSS - Font <html> < head> < style > p { border: 2px solid blue; } </style> </ head> < body> < h2>Font Shorthand Property</h2> < p style = "font: oblique normal bold 20px Arial, sans-serif;"> Shorthand Property Font </p> </body> </html>
The selection of an appropriate font-family is very important. it affects and reflects different styles, emotions and readability. Each classification has its own connotations and usages. CSS- Font Family <html> < head> < style> p { padding: 5px; border: 2px solid blue; } </style> </head > <body> < h2>Font-family</h2> <p style = "font-family: 'Times New Roman', Times, serif;"> The text will be either 'Times New Roman', Times, or serif. </p> < p style = "font-family: Arial, Helvetica, sans-serif;"> The text will be either 'Arial', Helvetica, or sans-serif. </p > </body> </ html>
refers to the height of the characters in relation to the text's baseline. Larger fonts are typically used for headlines or titles to grab attention , while smaller fonts are suitable for body text or captions to ensure readability. CSS- Font Size <html> < head> < style> p { padding: 5px; border: 2px solid blue; } </style> </ head> <body> < h2>Font-size</h2> <p style = "font-size: large;"> The font-size is large. </p> < p style = "font-size: 15px"> The font-size is 15px. </p> < p style = "font-size: x-small;"> The font-size is x-small . </ p> < p style = "font-size: 60%;"> The font-size is 60%. </p> < p style = " font-size: 2vw;"> The font-size 2vw . </ p> </body> </html>
A table is an HTML element used to display data in a structured format with rows and columns . It is created using the <table> tag in HTML and can be styled using CSS properties. CSS-Table <html> <head> < style> </style> < table> < thead > < tr > < th >Header 1</ th > < th >Header 2</ th > < th >Header 3</ th > </ tr > </ thead > < tbody > < tr > <td>Data 1</td > <td>Data 2</td> < td>Data 3</td> </ tr > < tr > <td>Data 1</td> < td>Data 2</td> < td>Data 3</td> </ tr > </ tbody > </ table> </body> </html>
In CSS the various properties that are applied to align them are as follow: text-align (sets the horizontal alignment of the text content within table cells ( < th > or <td> ). It can take following values : Center, left, right,justify CSS-Table Alignment <html> <head> < style> table , td, th { border: 2px solid black; } table { border-collapse: collapse; width: 50%; } td { text-align: center; } </style> </ head> <body> < h2>Text-align Property</h2> < table> < tr > < th >Header 1</ th > < th >Header 2</ th > < th >Header 3</ th > < th >Header 4</ th > </ tr > < tr > < td>Data 1</td> < td>Data 2</td > <td>Data 3</td> <td>Data 4</td> </ tr > < tr > <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> </ tr > < tr > <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> </ tr > </table> </body> </html>
HTML forms are required, when you want to collect some data from the site visitor. They have input fields for users to enter information, labels to identify the input fields , and buttons to submit the form or perform an action. It change the appearance of form elements, such as text fields, checkboxes, radio buttons, select menus, and submit buttons. CSS-Forms <form> < input type="text" id="username" name="username" placeholder="Username"> < input type="password" id="password" name="password" placeholder="password"> < textarea id="message" name="message" rows="4" placeholder="Message"></ textarea > < input type="submit" value="Submit"> </form>
. CSS-Forms <html> <head> <style > input[type ="text"], input[type ="password"], textarea { font-family: Arial, sans-serif; font-size: 16px; color: blue; } label{ color:brown ; } form{ display: grid; } </style> </head> <body > <h2> Font and Text Styling </h2> <form> < input type="text" id="username" name="username" placeholder="Username "> <input type="password" id="password" name="password" placeholder="password"> < textarea id="message" name="message" rows="4" placeholder="Message"></ textarea > < input type="submit" value="Submit"> </form> </body> </html>
The width property of an image is used to set the width of an image. This property can have a value in length or percentage . The border property of an image is used to set a border to an image . CSS allows an image to be set as a background for another element . The property that can be used for this purpose is background-image . CSS-Image Images are powerful tools that can enhance the design, communication, and user experience of a webpage . it is not recommended to include a lot of images, careful selection and placement of image s can greatly contribute to the success of a website. several CSS properties that can be used to style an image CSS Image Height, Width, Border, As Background : The height property is used to set the height of an image ( a value in length or percentage.
. <html> < head> </head> <body> < h2>Image Height</h2> <div> <p>Height in length - 300px</p> < img style="height: 300px;" src ="images/orange-flower.jpg" alt="orange-flower"> </div> <div> <p>Height in percentage - 30%</p> < img style="height: 30%;" src ="images/orange-flower.jpg" alt="orange-flower"> </div> <p>Height - auto</p> < img style="height: auto;" src ="images/orange-flower.jpg" alt="orange-flower"> </div> </body> </html> <html> <head> </head> < body> <h2>Image Width</h2> <div> <p>Width in length - 300px</p> < img style="width: 300px;" src ="images/pink-flower.jpg" alt="pink-flower"> </div> <div> < p>Width in percentage - 30%</ p > < img style="width: 30%;" src ="images/pink-flower.jpg" alt="pink-flower"> </div> <div> <p>Width - auto</p> < img style="width: auto;" src ="images/pink-flower.jpg" alt="pink-flower"> </div> </body> </html> Image Height Image Width
<html> <head> </head> < body> < h2>Image Border</h2> <div> < img style="border: 10px inset black; margin-bottom=5px;" src ="images/white-flower.jpg" alt="white-flower"> < img style="border: 10px dashed red;" src ="images/white-flower.jpg" alt="white-flower"> </div> </body> </html> <html> <head> < style> body { background-color: beige; background-image: url (images/logo.png); } </style> </head> <body> </body> </html> Image Border Image As background
Forms Font Tables Background CSS Summary Images Borders
Thanks a lot!!
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 10
- Slides 23
- Age 272 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views