Note for Web Technologies - WT By King Suyhodhana
- Web Technologies - WT
- Note
- 13 Views
- Uploaded 2 months ago
Text from page-1
Cascading Style Sheets Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content. CSS Syntax: A CSS rule-set consists of a selector and a declaration block: • Selector − A selector is an HTML tag at which a style will be applied. This could be any tag 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. Example: <html> <head> <style> p{ color: red; text-align: center; } </style> 1
Text from page-2
</head> <body> <p>Hello World!</p> <p>These paragraphs are styled with CSS.</p> </body> </html> CSS Selectors CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more. The element Selector The element selector selects elements based on the element name. You can select all <p> elements on a page like this (in this case, all <p> elements will be centeraligned, with a red text color): <html> <head> <style> p{ 2
Text from page-3
text-align: center; color: red; } </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html> The class Selector The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. In the example below, all HTML elements with class="center" will be red and center-aligned: <html> <head> <style> .center { text-align: center; color: red; } </style> </head> <body> 3
Text from page-4
<h1 class="center">Red and center-aligned heading</h1> <p class="center">Red and center-aligned paragraph.</p> </body> </html> Types Of The CSS Documents There are three ways you can apply CSS to an HTML document. These methods are all outlined below. 1. In-line style sheets: Inline CSS has the highest priority out of the three ways you can use CSS: external, internal, and inline. This means that you can override styles that are defined in external or internal by using inline CSS. If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute. <html> <head> <title>Example</title> </head> <body style="background-color: #FF0000;"> <p>This is a red page</p> </body> </html> 2. Internal style sheet (embedded style sheet): When using internal CSS, you must add a new tag, <style>, inside the <head> tag. The HTML code below contains an example of <style>'s usage. <html> <head> <title>Example</title> <style type="text/css"> body { background-color: #FF0000; } </style> </head> <body> <p>This is a red page</p> 4
Leave your Comments