Casecading Style Sheets for Hyper Text Transfer Protocol.pptx
usmanahmadawan
15 views
34 slides
Aug 14, 2024
Slide 1 of 34
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
About This Presentation
Casecading Style Sheets for Hyper Text Transfer Protocol
Slide Content
Cascading Style Sheet in HTML Prof. Usman Ahmad. Govt. Islamia Graduate College, Gujranwala.
How to Add CSS There are three ways of inserting a style sheet: External CSS Internal CSS Inline CSS
External CSS With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section. External styles are defined within the <link> element, inside the <head> section of an HTML page : <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 An external style sheet can be written in any text editor, and must be saved with a . css extension. The external . css file should not contain any HTML tags. Here is how the "mystyle.css" file looks: Myclass.css body { background-color: lightblue ; } h1 { color: navy; margin-left: 20px; }
Internal CSS An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the head section. In this section we will learn Internal CSS.
Inline CSS An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. Inline styles are defined within the "style" attribute of the relevant element : <h1 style=" color:blue;text-align:center ;">This is a heading</h1> <p style=" color:red ;">This is a paragraph.</p>
Basic Syntax FORMAT: selector { property : value; } • selector : what you want styled (e.g. body) • property : what you want changed (e.g. background) • value : the new value of that property (e.g. green) • So you have the thing you want to style followed by a list of properties and the value for that property • This list must be between 2 curly braces
CSS Selectors A CSS selector selects the HTML element(s) you want to style. CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state) Pseudo-elements selectors (select and style a part of an element) Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector The element selector selects HTML elements based on the element name . Here, all <p> elements on the page will be center-aligned, with a red text color: p { text-align: center; color: red; }
The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element. #para1 { text-align : center; color: red; }
The CSS class Selector The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name . In this example all HTML elements with class="center" will be red and center-aligned: .center { text-align: center; color: red; }
The CSS class Selector In this example only <p> elements with class="center" will be red and center-aligned: p.center { text-align: center; color: red; } HTML elements can also refer to more than one class . In this example the <p> element will be styled according to class="center" and to class="large": <p class="center large">This paragraph refers to two classes.</p>
The CSS Universal Selector The universal selector (*) selects all HTML elements on the page . The CSS rule below will affect every HTML element on the page: * { text-align: center; color: blue; }
CSS Examples body { background: green; } p { background: red; }
Practice! So how do you think you would implement it to make all your text blue? I’ll give you a hint, the element you’ll want to style is The answer: body { color : blue; }
More CSS Syntax You can put in instructions for multiple elements by simply adding another block of code for the second element under the first h1{ color: green; background-color: yellow; } h2{ color: green; background-color: yellow; } • You can style more than 2 elements and add more than 2 attributes - you can have as many or as few as you want!
CSS styles elements of HTML. • For example, to turn all paragraphs’ text green, do: p { color : green; } • Note: selectors are generally an HTML element without “ < “ and “ > ”. So “ <p> ” becomes “ p ”, and “<body>” becomes “body”, and “< blockquote >” becomes “ blockquote ”
Combining Elements If you have multiple elements that share the same styles, the you can combine them • For example remember how h1 and h2 have the same styles? h2, h1{ color: green; background-color: yellow; }
Another Format • Create 2 classes named blueFont and purpleFont • blueFont should make the text blue and purpleFont should make the text purple • Apply these classes to sections of your html code Answer . blueFont { color : blue; } . purpleFont { color : purple; }
You Can Use div for Structure <div> … </div> is an element in HTML HTML documents should consist of a bunch of nested and consecutive block elements div is a block element used for grouping other block elements Think of it as a container
How would you use div? div is used as a logical divide if you have a page about Students and Teachers, you can surround the Students part with <div class = “Students ”> </div> and surround the Teachers part with another <div class = “Teachers”> </div> This lets you style everything about Students all at once, even if they’re in other blocks
Practice! HTML CSS
CSS Img Use the border property to create thumbnail images. Use the border-radius property to create rounded images: The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent: The CSS filter property adds visual effects (like blur and saturation) to an element.
CSS Img img { border: 1px solid # ddd ; border-radius: 4px; padding: 5px; width: 150px; max-width : 100 %; height: auto ; display : block ; opacity: 0.5; } < img src ="paris.jpg" alt="Paris">
Practice! img { border: 1px solid # ddd ; border-radius: 4px; padding: 5px; width: 150px; } img:hover { box-shadow: 0 0 2px 1px rgba (0, 140, 186, 0.5); } <a href ="paris.jpg"> < img src ="paris.jpg" alt="Paris"> </a>
CSS Tables To specify table borders in CSS, use the border property. table, th, td { border: 1px solid; } If you need a table that should span the entire screen (full-width), add width: 100% to the <table> element: table { width: 100%; } The border-collapse property sets whether the table borders should be collapsed into a single border: table { border-collapse: collapse; }
CSS Tables If you only want a border around the table, only specify the border property for <table>: table { border: 1px solid; }
Table Width and Height The width and height of a table are defined by the width and height properties. The example below sets the width of the table to 100%, and the height of the <th> elements to 70px: table { width: 100%; } th { height: 70px; }
CSS Table Alignment Horizontal Alignment The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>. td { text-align: center; } The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>. td { height: 50px; vertical-align: bottom; }
CSS Table Style To control the space between the border and the content in a table, use the padding property on <td> and <th> elements: th, td { padding: 15px; text-align: left; } Add the border-bottom property to <th> and <td> for horizontal dividers: th, td { border-bottom: 1px solid # ddd ; }
Hoverable Table Use the :hover selector on < tr > to highlight table rows on mouse over: tr:hover {background-color: coral;}
CSS 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 mousse over it Style visited and unvisited links differently Style an element when it gets focus Syntax: The syntax of pseudo-classes: selector: pseudo-class { property : value ; }
Anchor Pseudo-classes Links can be displayed in different ways : The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouse over it a:active - a link the moment it is clicked
CSS Links /* 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; }
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 15
- Slides 34
- Age 475 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