Introduction to Web Technology and CSS
Web technology involves using different technologies to create and enhance websites. Cascading Style Sheets (CSS) is a design language that helps in making web pages visually appealing. There are three types of CSS: Inline CSS, Internal or Embedded CSS, and External CSS. Each type serves a specific purpose in styling web pages, from applying unique styles to individual elements to incorporating styles across multiple pages using separate CSS files.
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. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Web Technology Mr. G. P. Shinde
Cascading Style Sheet (CSS): Introduction of CSS Cascading Style Sheets, commonly referred to as CSS, it is a simple design language used to simplify the process of making web pages presentable. CSS handles the look and feel/designing part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs and so on. Each property in CSS has a name-value pair, and each property is separated by a semicolon (;). Syntax css_attribute_name: value; Ex border : 2px solid red ; color: blue; font-size: 25px;
Types of CSS There are three types of CSS: 1.Inline CSS 2. Internal or Embedded CSS 3. External CSS 1.Inline CSS: Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element. To apply inline CSS, you need to use style attribute within HTML element. We can use as many properties as we want, but each property should be separated by a semicolon (;).
Inline CSS Example <h3 style="color: red; font-style: italic; text-align: center; font-size: 50px; padding-top: 25px;">COCSIT Latur</h3> Output
Types of CSS 2. Internal or Embedded CSS An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML document. We have to use <style> Tag. To use Internal CSS, we can use class and id attributes. We can use internal CSS to apply a style for a single HTML page. Syntax <style> selector or tag_name { css_attribute_name: css_value; css_attribute_name1: css_value1; } </style>
Internal CSS Example <style> /*Internal CSS using element name*/ body { background-color:lavender; text-align: center;} h2 {font-style: italic; font-size: 30px; color: #f08080;} p {font-size: 20px;} </style> <body> <h2>COCSIT Latur</h2> <p >Ambajogai Road</p> <p >Latur</p> <p >413512</p> Output
Types of CSS 3. External CSS: An external CSS contains a separate CSS file which only contains style code using the class name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using <link> tag. If we have multiple HTML pages for an application and which use similar CSS, then we can use external CSS. There are two files need to create to apply external CSS First, create the HTML file Create a CSS file and save it using the .css extension Link the CSS file in your HTML file using tag in header section of HTML document. Ex. <link rel="stylesheet" type="text/css" href="style.css">
External CSS Example body{ .blue{ color: blue; } .red{ color: red; } .green{ color: green; } <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Learning HTML with External CSS</h2> <p class="blue">This is a blue color paragraph</p> <p class="red">This is a red color paragraph</p> <p class="green">This is a green color paragraph</p> </body> background-color:lavender; text-align: center; } h2{ font-style: italic; size: 30px;color: #f08080; } p{ font-size: 20px; } Output
Commonly used CSS properties: background-color - It defines the background color of that element. Syntax: background-color:red; Color - It defines the color of text of an element Syntax: color: lightgreen; Padding - It defines the space between content and the border. Syntax: padding: 20px; Margin - It creates space around an element. Syntax: margin: 30px; margin-left: font-family- Font-family defines a font for a particular element. Syntax: font-family: cursive; Font-size - Font-size defines a font size for a particular element. Syntax: font-size: 50px; text-align - It is used to align the text in a selected position. Syntax: text-align: left;
