Doctype Html...1.docx
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
More details
- Words: 1,033
- Pages: 7
<style> p{ font-size: 32px; color: red; text-align: center; }
Hello World!
These paragraphs are styled with CSS.
<style> body {background-color: lightblue;}
Multiple Styles Cascades Into One
Try to experiment by removing styles to see how the cascading stylesheets work.
Try removing the inline first, then the internal, then the external.
What is CSS?
CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files
CSS Demo - One HTML Page - Multiple Styles! Here we will show one HTML page displayed with four different stylesheets. Click on the "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links below to see the different styles:
Why Use CSS? CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS Solved a Big Problem HTML was NEVER intended to contain tags for formatting a web page! HTML was created to describe the content of a web page, like:
This is a heading
This is a paragraph.
When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page! If you don't know what HTML is, we suggest that you read our HTML Tutorial.CSS Saves a Lot of Work! The style definitions are normally saved in external .css files. With an external stylesheet file, you can change the look of an entire website by changing just one file!
CSS Syntax A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. In the following example all
elements will be center-aligned, with a red text color:
<style> p{ color: red; text-align: center; }Hello World!
These paragraphs are styled with CSS.
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
elements on a page like this (in this case, all
elements will be center-aligned, with a red text color):
What is a selector? Selectors helps identify the html element. Whenever we modify the property value for an html page, these values must be associated with an selector. For e.g. In the last tutorial we have seen an example like this: p { color: red; font-size: 16px; }
Here p is selector which selects all the paragraphs of an html page. So the color and font size specified in this selector would only modify these values for paragraphs, other html element such as headings will not reflect this change as there is a separate selector for them.
Selector types: Following are the three frequently used selectors: 1) Element selector 2) Id selector 3) Class selector
1) Element selector: This type of selector selects the element based on the element name. For e.g: p { color: red; font-size: 16px; } : Selects the text with in
and
tags of a HTML page. and h1 { color: blue; font-size: 20px; } : Selects the text withinand
tags of HTML.These both are the examples of element selectors. There are several other element selectors apart from these and we will discuss each one of them in the upcoming tutorials. Example: style.css p { text-align:center; color:red; } h2 { text-align:center; color:blue; }
myhtmlpage.html
Hello
Every paragraph will be affected by the style.
Me too
And me!
2) Id selector:
This selector is used for selecting a HTML element based on the id value. For example: #mypara { text-align:left; color:black; }
This statement would only style the elements which has id value as “mypara”. If my html page has two paras like this then the above CSS would style the second para only. Note: Second para has id=”mypara”.
First Para
Second para
Third Para
Id is useful when you want to give different-2 styles to the same HTML elements. For e.g. #mypara {color:black; } #para2 {color:red; }
And html page is:
Second para
Third Para
Output: First paragraph font color would be black and second paragraph would be having red color. This is because both the paragraphs has different id values and for each id value we have different colors specified in CSS.
3) Class Selectors: For class selectors we specify the CSS like this. It is similar to the id selector but the syntax is different. It styles the elements of specified class. .abc { text-align:center; color:red; }
HTML page:
I will be in the center
I will be having default style as I don't have class
First paragraph would be styled by the defined css while the second one would be having the default style of paragraphs.
What are the different types of CSS selectors? CSS Selectors
Introducing CSS Selectors. A CSS selector is the part of a CSS rule set that actually selects the content you want to style. ... Universal Selector. ... Element Type Selector. ... ID Selector. ... Class Selector. ... Descendant Combinator. ... Child Combinator. ... General Sibling Combinator.
Related Documents
Doctype Html.docx
April 2020 7
Doctype Html.docx
December 2019 7
Doctype Html...1.docx
June 2020 7
Doctype Html Public
May 2020 3
Doctype Html Public
November 2019 10
Doctype Html Public
June 2020 7More Documents from ""