HomeХобби и стильRelated VideosMore From: Raksmey Mom

Basic CSS

0 ratings | 14 views
Show basic html Table of Contents: 00:08 - CSS -- Cascading Style Sheets 01:00 - What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files CSS Saves a Lot of Work!Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! 03:56 - CSS Syntax The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. 07:54 - CSS Example A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: p {color:red;text-align:center;} To make the CSS more readable, you can put one declaration on each line, like this: p { color:red; text-align:center; } 08:54 - CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; } 09:26 - The id and class Selectors In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1": 11:24 - The id and class Selectors In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1": 15:18 - Example #para1 { text-align:center; color:red; } Note: Do NOT start an ID name with a number! The class Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. 15:52 - The class Selector The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned: Example .center {text-align:center;} You can also specify that only specific HTML elements should be affected by a class. In the example below, all p elements with class="center" will be center-aligned: Example p.center {text-align:center;} Note: Do NOT start a class name with a number! 16:13 - In CSS, selectors are patterns used to select the element(s) you want to style. There are my selector patterns in CSS. * Selector : selects all the elements Syntax: * { css declaration; } Element : select all the elements Syntax: element { css declaration; } 16:51 - Grouping Element : is used to minimize the code when there are elements with the same style. You have to separate each selector with a comma. Syntax : element, element { css declaration } Nesting Selectors : It is possible to apply a style for a selector within a selector. There are 2 ways to apply nesting selector. Separate each other with a space: element element Stand next to each other: element.class or element#id 17:55 - element element Example: div h2 { background-color : yellow;} element.class or element#id Example: div.red { background-color : red; } 19:39 - The [attribute] selector is used to select elements with the specified attribute. Syntax: [attribute] { css declarations; } CSS [attribute] Selector : Example: a[target] { background-color : yellow; } 20:24 - CSS [attribute=“value”] Selector : Selector is used to select elements with a specified attribute and value. Example: a[target=“_blank”] { background-color : yellow; } CSS [attribute~=“value”] Selector : selector is used to select elements with an attribute value containing a specified word Example: [title~=“flower”] { border : 5px solid yellow; } 20:36 - The [attribute] selector is used to select elements with the specified attribute. Syntax: [attribute] { css declarations; } CSS [attribute] Selector : Example: a[target] { background-color : yellow; }
Html code for embedding videos on your blog
Text Comments (0)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.