cascading style sheets- About cascading style sheets on the selectors
JayanthiM19
11 views
57 slides
Mar 06, 2025
Slide 1 of 57
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
About This Presentation
cascading style sheets
Slide Content
Module II CSS: Cascading Style sheets
CSS CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web pages, including colours , layout, and fonts, thus making our web pages presentable to the users. CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-based markup language. Cascading: Falling of Styles Style: Adding designs/Styling our HTML tags Sheets: Writing our style in different documents
Advantages of CSS CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times. Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS.
CSS Syntax Selector { Property 1 : value; Property 2 : value; Property 3 : value; } For example: h1 { Color: red; Text-align: center; } Selector: selects the element you want to target Always remains the same whether we apply internal or external styling There are few basic selectors like tags, id’s, and classes All forms this key-value pair Keys: properties(attributes) like color, font-size, background, width, height,etc Value: values associated with these properties
CSS Comment Comments don’t render on the browser Helps to understand our code better and makes it readable. Helps to debug our code Two ways to comment: Single line /*<h6> This represents the most/ least important line of the doc. </h6>*/ Here is how to comment out multiple lines: /* h1 { color: red; text-align: center; } */
Ways to write CSS There are 3 ways to write CSS in our HTML file. Inline CSS Internal CSS External CSS
Inline CSS Self-contained Uniquely applied on each element Before CSS this was the only way to apply styles Not an efficient way to write as it has a lot of redundancy The idea of separation of concerns was lost Example: <h3 style=” color:red ” “align- text:center ”;> Have a great day </h3> <p style=” color: green”> Have a nice day </p>
Internal CSS With the help of style tag, we can apply styles within the HTML file Code will appear in the head section using the style tag Redundancy is removed But the idea of separation of concerns still lost Uniquely applied on a single document
Internal CSS (Code has to come inside head section) Example: <html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
External CSS With the help of <link> tag in the head tag, we can apply styles Reference is added File saved with . css extension Redundancy is removed The idea of separation of concerns is maintained Uniquely applied to each document Example: "mystyle.css" body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; }
External CSS Sample.html <html> <head> <link rel =" stylesheet “ href ="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
External CSS Implementation of all the three types of CSS: <html> <head> <title>HTML</title> <link rel =" stylesheet " type="text/ css " href ="first.css"> <style> h1 { color:green ; } </style> </head> <body> <h1>This heading will be green</h1> <p style=" color:Red ">This paragraph will be red</p> <p id="center">This paragraph will be pink and center-aligned</p> </body> </html> first.css #center { text-align: center; color:pink ; }
CSS Selector CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc. There are several different types of selectors in CSS. CSS Element Selector CSS Id Selector CSS Class Selector CSS Universal Selector CSS Group Selector Pseudo class selector
1) CSS Element Selector The element selector selects the HTML element by name. Similar to internal css <html> <head> <title>element selector</title> <style> /* h1 element selected here */ h1 { color:green ; text- align:center ; } /* h2 element selected here */ h2 { text- align:center ; } </style> </head> <body> <h1>sample CSS</h1> <h2>element Selector</h2> </body> </html>
2) CSS Id Selector The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element. It is written with the hash character (#), followed by the id(user defined name ) of the element. <html> <head> <style> #para1 { text-align: center; color: blue; } </style> </head> <body> <p id="para1">CSS Sample program</p> <p>This paragraph will not be affected.</p> </body> </html>
3) CSS Class Selector The class selector selects HTML elements with a specific class attribute. It is used with a period character . (dot symbol) followed by the class name. A class name cannot start with a number. <html> <head> <style> .center1 { text-align: center; color: blue; font-style: italic; } </style> </head>
3) CSS Class Selector <body> <h1 class="center1“ id= “head1”>This heading is blue and center-aligned.</h1> <p class="center1“ id=“para1”>This paragraph is blue and center-aligned.</p> </body> </html> Both tags h1 and p tag will be affected as class= center1
3) CSS Class Selector If you want to specify that only one specific HTML element should be affected then you should use the element name with class selector. <html> <head> <style> p.center { text-align: center; color: blue; } </style> </head> <body> <h1 class="center">This heading is not affected</h1> <p class="center">This paragraph is blue and center-aligned.</p> </body> </html>
4) CSS Universal Selector The universal selector is used as a wildcard character. It selects all the elements on the page. <html> <head> <style> * { color: green; font-size: 20px; } </style> </head> <body> <h2>This is heading</h2> <p>This style will be applied on every paragraph.</p> </body> </html>
5) CSS Group Selector You can apply a style to many selectors if you like. Just separate the selectors with a comma. The grouping selector is used to select all the elements with the same style definitions. Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping. <html> <head> <style> h1, h2, p { text-align: center; color: blue; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } </style >
5) CSS Group Selector <html> <head> <style> h1, h2, p { text-align: center; color: blue; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } </style> </head> <body> <h1>CSS program</h1> <h2>CSS program (In smaller font)</h2> <p>This is a paragraph.</p> </body> </html>
6) Pseudo-classes What are Pseudo-classes? A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus Syntax: selector:pseudo -class { property: value; }
6) Pseudo-classes <!DOCTYPE html> <html> <head> <style> /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink ; } /* selected link */ a:active { color: blue; } </style> </head><body> <h2>Styling a link depending on state</h2> <p><b><a href ="default.asp" target="_blank">This is a link</a></b></p> <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p> <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p></body></html>
CSS Properties CSS properties are the styles used on specified selectors. Here are some basic CSS properties to work with. Text Properties List Properties Border Properties Font Properties Background image properties Table properties
Text Properties Property Description Values color Sets the color of a text RGB, hex, keyword line-height Sets the distance between lines normal, number, length, % letter-spacing Increase or decrease the space between characters normal, length text-align Aligns the text in an element left, right, center, justify text-decoration Adds decoration to text none, underline, overline , line-through text-indent Indents the first line of text in an element length, % text-transform Controls the letters in an element none, capitalize, uppercase, lowercase
<html> <head> <style> div { border: 1px solid gray; padding: 8px; background- color:gold ; } h1 { text-align: center; text-transform: uppercase; color: #4CAF50; } p { text-indent: 50px; text-align: justify; letter-spacing: 3px; color:red ; } a { text-decoration: none; color: #008CBA; } </style> </head>
<body> <div> <h1>text formatting</h1> <p>Unlike paragraph formatting, which determines the type of text in an HTML document (body text, headings, captions, etc.), text formatting determines its style, color, alignment, etc. <a target="_blank" href =" tryit.asp?filename = trycss_text ">"Try it Yourself"</a> link.</p> </div> <p> Unlike paragraph formatting, which determines the type of text in an HTML document (body text, headings, captions, etc.), text formatting determines its style, color, alignment, etc. </p>
Output:
List Properties Property Description Values list-style Sets all the properties for a list in one declaration list-style-type, list-style-position, list-style-image, inherit list-style-image Specifies an image as the list-item marker URL, none, inherit list-style-position Specifies where to place the list-item marker inside, outside, inherit list-style-type Specifies the type of list-item marker none, disc, circle, square, decimal, decimal-leading-zero, Armenian, georgian , lower-alpha , upper-alpha , lower- greek , lower- latin , upper- latin , lower-roman, upper-roman, inherit
<html> <head> <style> ul.a { list-style-type: circle; background: pink; } ul.b { list-style-type: square; list-style- position:inside ; font-size:20px; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } </style> </head> <body>
<h2>List Properties</h2> <p>Example of unordered lists:</p> < ul class="a"> < li >Java</ li > < li >C</ li > </ ul > < ul class="b"> < li >Web Server</ li > < li >Browser</ li > </ ul > <p>Example of ordered lists:</p> < ol class="c"> < li >Java</ li > < li >C</ li > </ ol > < ol class="d"> < li >Web Server</ li > < li >Browser</ li > </ ol > </body> </html>
Border Properties Property Description Values border Sets all the border properties in one declaration border-width, border-style, border-color border-bottom Sets all the bottom border properties in one declaration border-bottom-width, border-bottom-style, border-bottom-color border-bottom-color Sets the color of the bottom border border-color border-bottom-style Sets the style of the bottom border border-style border-bottom-width Sets the width of the bottom border border-width border-color Sets the color of the four borders color_name , hex_number , rgb_number , transparent, inherit border-left Sets all the left border properties in one declaration border-left-width, border-left-style, border-left-color border-left-color Sets the color of the left border border-color border-left-style Sets the style of the left border border-style border-left-width Sets the width of the left border border-width
Property Description Values border-right Sets all the right border properties in one declaration border-right-width, border-right-style, border-right-color border-right-color Sets the color of the right border border-color border-right-style Sets the style of the right border border-style border-right-width Sets the width of the right border border-width border-style Sets the style of the four borders none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit
border-top Sets all the top border properties in one declaration border-top-width, border-top-style, border-top-color border-top-color Sets the color of the top border border-color border-top-style Sets the style of the top border border-style border-top-width Sets the width of the top border border-width border-width Sets the width of the four borders thin, medium, thick, length, inherit
<html> <head> <style type="text/ css "> p.ex1 { border:1px solid; border-bottom color:#009900; border-top-color:#FF0000; border-left-color:#330000; border-right-color:#0000CC; } p.example2 { border:3px solid; border-radius: 20px; border-color:#009900; } </style> </head>
<body> <p class="ex1"> All borders in different colors. </p> <p class="example2"> Border in green color with radius attribute </p> <p style = "border-width:4px; border-top- style:solid ; border-bottom- style:dashed ; border-left- style:groove ; border-right- style:ridge ;"> Border with four different styles. </p> <p style = "border-bottom-width:4px;border-top-width:10px; border-left-width: 2px;border-right-width:15px;border-style:solid;"> Border with four different width. </p> </body> </html>
Font Properties Property Description Values font Sets all the font properties in one declaration font-style, font-variant, font-weight, font-size/line-height, font-family, caption, icon, menu, message-box, small-caption, status-bar, inherit font-family Specifies the font family for text family-name, generic-family, inherit font-size Specifies the font size of text xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger , length, %, inherit font-style Specifies the font style for text normal, italic, oblique, inherit font-variant Specifies whether or not a text should be displayed in a small-caps font normal, small-caps, inherit font-weight Specifies the weight of a font normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit (many of these are not supported!)
<html> <head> <style> body { font-size: larger; font-style: oblique; color:rgb (10, 220, 20); font-variant: small-caps; font-weight: bold; font-family: cursive; } } </style> </head> <body> Sample program for font properties </body> </html>
CSS Background images The background-image property sets one or more background images for an element. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Always set a background-color to be used if the image is unavailable. The background-image property sets one or more background images for an element.By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Syntax: 1) background-image: url |none|initial|inherit ; background-color background-repeat: repeat,no -repeat, repeat- x,repeat -y To Set Background Position section { background-position: 20px 30px; } 5) To Resize a Background Image section { background-size: 20px 40px; }
Background Gradients A different use case for the background-image property is for telling the browser to create a gradient.The background-image in this case does not have a URL, but a linear-gradient instead. a) section { background-image: linear-gradient( black,white ); } b) section{ background-image: linear-gradient(to left, pink, orange); }
Styling Tables A table in CSS is used to apply the various styling properties to the HTML Table elements to arrange the data in rows and columns, or possibly in a more complex structure in a properly organized manner. There are some CSS properties that are widely used in designing table using CSS: Border - It is used for specifying borders in the table. Border-collapse(collapse/separate) - The border-collapse property tells us whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style. Padding width height text-align color Background-color
Styling Tables Caption -Side(top/bottom) - Caption side property is used for controlling the placement of caption in the table. By default, captions are placed above the table. Border Spacing: This property specifies the space between the borders of the adjacent cells. Empty cells(show/hide): This property specifies whether or not to display borders and background on empty cells in a table. Table layout(auto/fixed): The table layout property is used to set up the layout algorithm used for the table. Hoverable Table - Use the :hover selector on < tr > to highlight table rows on mouse
<html> <head> <style> table, th , td { border: 1px solid black; border-collapse: collapse; caption-side: top; } th , td { padding: 10px; } table#alter tr:nth -child(even) { background-color: pink; } table#alter tr:nth -child(odd) { background-color: indigo; color: white; } table#alter th { color: white; background-color: gold; } </style> </head> <body> <table id="alter"> <caption> Styling odd or even cells </caption> < tr >< th > First_Name </ th >< th > Last_Name </ th >< th >Marks</ th ></ tr > < tr ><td> Sonoo </td><td> Jaiswal </td><td>60</td></ tr > < tr ><td>James</td><td>William</td><td>80</td></ tr > < tr ><td> Swati </td><td> Sironi </td><td>82</td></ tr > < tr ><td> Chetna </td><td>Singh</td><td>72</td></ tr > </table> </body> </html>
<span> The HTML span element is a generic inline container for inline elements and content. It is used to group elements for styling purposes (by using the class or id attributes). The span tag is used for the grouping of inline elements & this tag does not make any visual change by itself. span is very similar to the div tag, but div is a block-level tag and span is an inline tag.
<head> <title>Span Tag</title> </head> <body> <p>This is my sample <span style="color: red;"> css </span>, <span style="color: blue;">for</span>, <span style="color: green;">span tag</span> </p> </body> </html>
CSS Box Model
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content as shown in figure. Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent
Audio Tag Definition and Usage The <audio> tag is used to embed sound content in a document, such as music or other audio streams. The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports. The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element. There are three supported audio formats in HTML: MP3, WAV, and OGG.
Attributes Autoplay : ( autoplay )Specifies that the audio will start playing as soon as it is ready Controls :(controls)Specifies that audio controls should be displayed (such as a play/pause button etc) Loop :(loop) Specifies that the audio will start over again, every time it is finished Muted (muted)Specifies that the audio output should be muted Preload (auto/ metadata/none)Specifies if and how the author thinks the audio should be loaded when the page loads Src ( URL) Specifies the URL of the audio file
<!DOCTYPE html> <html> <body> <h1>The audio element</h1> <p>Click on the play button to play a sound:</p> <audio controls> <source src ="horse.ogg" type="audio/ ogg "> <source src ="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </body> </html>
Video Tag Definition and Usage The <video> tag is used to embed video content in a document, such as a movie clip or other video streams. The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports. The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element. There are three supported video formats in HTML: MP4, WebM , and OGG.
Video Tag Attributes: Autoplay ( autoplay )Specifies that the video will start playing as soon as it is ready Controls (controls)Specifies that video controls should be displayed (such as a play/pause button etc). Height ( pixels) Sets the height of the video player Loop (loop)Specifies that the video will start over again, every time it is finished Muted (muted)Specifies that the audio output of the video should be muted Poster ( URL) Specifies an image to be shown while the video is downloading, or until the user hits the play button Preload (auto, metadata,none )Specifies if and how the author thinks the video should be loaded when the page loads Src ( URL) Specifies the URL of the video file Width ( pixels) Sets the width of the video player
Video Tag <!DOCTYPE html> <html> <body> <h1>The video element</h1> <video width="320" height="240" controls> <source src ="movie.mp4" type="video/mp4"> <source src ="movie.ogg" type="video/ ogg "> Your browser does not support the video tag. </video> </body> </html>
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 11
- Slides 57
- Age 269 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
28 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views