what is css? - bim-notes.com€¦ · web viewword – spacing. controls the amount of space...

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

Types of CSS Styles There are three types of CSS styles:

Inline styles Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to.

<html><body>

<h1 style="color:blue;margin-left:30px;">This is a heading</h1><p>This is a paragraph.</p>

</body></html>

Embedded or Internal stylesEmbedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in.

<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 stylesExternal styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to.<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

of 18

https://www.thoughtco.com/external-style-sheet-definition-3466896

Chapter -2.2 Font formatting

font – family :- Specifies the typeface or family of font font – weight :- Specifies whether the font should be normal ,bold ,bolder (0 to 500 number)font – stretch :- sets the width of the characters in a font

(condensed /ultra-condensed /extra-condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded)

Syntaxfont-family : font name (Calibri/moonscape/Cambria)font-size : length/percentagefont-weight: normal/bold/bolder/lighter/100font-style: normal/italic/obliquefont-variant: normal|small-capsfont-stretch: condensed

font – variantp.normal { font-variant: normal;}

p.small { font-variant: small-caps;}

<p class="normal">My name is Hege Refsnes.</p><p class="small">My name is Hege Refsnes.</p>

Chapter 2.3:- Text Formattingtext – align Specifies the horizontal alignment of the text vertical – align Specifies the vertical alignment of text within containing element text – decoration specifies the decoration added to text. text – indent Specifies an indent from the left border for the text text – shadow adds shadow to texttext – transform controls the capitalization of textletter – spacing Controls the width between letters word – spacing Controls the amount of space between each word white – space specifies how white-space inside an element is handled.

of 18

p { font-family: Cambria; font-size: 20px;}

My name is Hege Refsnes.

MY NAME IS HEGE REFSNES.

Syntaxcolor: #ff0000; (color name/hex code)direction: ltr|rttext-align: left|right|center|justifyvertical-align: top/middle/bottom/text-bottomtext-shadow: 2px 2px #ff0000; }text-indent: length/percentagetext-decoration: underline|overline|line-throughtext-transform: capitalize|uppercase|lowercaseletter-spacing: length(2px, -3px)word-spacing: length(30px,-5px) white-space: nowrap/normal/pre;

vertical-alignimg.top { vertical-align: top;}

img.bottom { vertical-align: middle;}<p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment.</p>

<p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p>

of 18

Chapter 2.4 CSS SelectorsSelector to specify which elements a style sheet ruleTypes:-

universal * descendant selector (space) child selector (>) adjacent sibling selector (+) general sibling selector (~)

2.4.1 Universal SelectorThe universal selector is an asterisk; it is like a wildcard and matches all element types in the document.

2.4.2 The Type Selector The type selector matches all of the elements specified in the comma - delimited list. It allows us to apply the same rules to several elements. h1, h2, h3 {}

2.4.5 Child SelectorThe child selector selects all elements that are the immediate children of a specified element. The following example selects all <p> elements that are immediate children of a <div> element:<html><head><style>div > p { background-color: blue; }</style></head>

<body><div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> <span><p>Paragraph 3 in the div.</p></span> </div>

<p>Paragraph 4. Not in a div.</p><p>Paragraph 5. Not in a div.</p>

</body></html>

of 18

2.4.6 Descendant SelectorThe descendant selector matches all elements that are descendants of a specified element. The following example selects all <p> elements inside <div> elements: <html><head><style>div p { background-color: yellow;}</style></head>

<body><div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> <span><p>Paragraph 3 in the div.</p></span></div>

<p>Paragraph 4. Not in a div.</p><p>Paragraph 5. Not in a div.</p>

</body></html>

2.4.7 Adjacent Sibling SelectorThe adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".The following example selects all <p> elements that are placed immediately after <div> elements:<style>div + p { background-color: green;}</style></head><body>

<div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p></div><p>Paragraph 3. Not in a div.</p><p>Paragraph 4. Not in a div.</p>

of 18

Chapter -5 General Sibling Selector2.5.1 Using Child and Sibling Selectors To Reduce Dependence on Classes in Markup

The general sibling selector selects all elements that are siblings of a specified element. The following example selects all <p> elements that are siblings of <div> elements: <html><head><style>div ~ p { background-color: yellow;}</style></head>

<body><div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p></div><p>Paragraph 3. Not in a div.</p><p>Paragraph 4. Not in a div.</p>

</body></html>

2.5.2 Attribute Selector used to select elements with a specified attribute.<html><head><style>input[type="text"] { background-color: yellow; width: 200px;}</style>

</head><body>Name:-<input type="text"><br/>password:-<input type="password"><br/>

</body></html>

of 18

Chapter 2-9 list

2.9.1 CSS list-style-type Property specifies the type of list-item marker in a list. <html>Syntaxlist-style-type: value; (disc/circle/square)

<head><style>

ul.a {list-style-type: circle;}ol.B {list-style-type: upper-roman;}

</style></head>

<body><p>Example of unordered lists:</p><ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ul>

<p>Example of ordered lists:</p><ol class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ol>

</body></html>

of 18

2.9.3 CSS list-style-image Property Specify an image as the list-item marker in a list

Syntax list-style-image: url

<html><head><style>ul { list-style-image: url('sqpurple.gif');}</style></head>

<body><ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ul></body></html>

of 18

2.9.2 CSS list-style-position Propertyspecifies if the list-item markers should appear inside or outside the content flow.

SS Syntaxlist-style-position: inside|outside|initial|inherit;

<html><head><style>ul.a { list-style-position: inside;}

ul.b { list-style-position: outside;}</style></head>

<body><p> list-style-position: inside:</p><ul class="a"> <li>Apple</li> <li>Mango</li></ul><p> list-style-position: outside:</p><ul class="b"> <li> Apple</li> <li>Mango</li></ul>

<p>"list-style-position: outside" is the default setting.</p></body></html>

Chapter 2.6 Lengths

Lengths define as such as the size of fonts, height of lines of text, and gaps between words and letter.three ways lengthsa) Relative Units

There are three types of relative units: pixels, which relate to the resolution of the screen, and em ’ s and ex ’ s both of which relate to the size of fonts.

b) Absolute Units Pt :- A point , pc:- A pica, in:-An inch ,cm:-A centimeter , mm:-A millimeter

c) Percentages(%)

of 18

Chapter 2.10 Table

2.10.1 Table - Specific Properties 1. border – collapse sets whether the table borders are collapsed into a single border or detached as in standard HTML.syntaxborder-collapse: separate|collapse

<html><head><style>table.ex1 { border-collapse: separate;}table.ex2 { border-collapse: separate;}</style></head><body>table class="ex1" border="1"> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr></table><br>

<table class="ex2" border="1"> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr></table></body></html>

of 18

2.10.3 CSS empty-cells Property The empty-cells property sets whether or not to display borders and background on empty cells in a table (only for the "separated borders" model).empty-cells: show|hide

<html><head><style>table { empty-cells: hide;}</style></head>

<body><table border="1"> <tr> <td>one</td> <td>two</td> </tr> <tr> <td>three</td> <td> </td> </tr></table></body>

</html>

caption-side Property The caption-side property specifies the placement of a table caption.caption-side: top|bottom|left|right

of 18

12.10.5 CSS table-layout PropertyThe table – layout property allows you to force the browser to stick to the widths you specify, even if this makes the content unreadable.

<html><head><style>

table { width: 100%;}

table.ex1 { table-layout: auto;}

table.ex2 { table-layout: fixed;}</style></head><body>

<p>table-layout: auto:</p><table class="ex1"> <tr> <td width="5%">1000000000000000000000000000</td> <td width="95%">10000000</td> </tr></table>

<p>table-layout: fixed:</p><table class="ex2"> <tr> <td width="5%">1000000000000000000000000000</td> <td width="95%">10000000</td> </tr></table>

</body></html>

of 18

2.11 Outlines

Outlines are similar to the borders. An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

outline-width specifies the width of an outline.float specifies whether or not a box (an element) should floatclear Property Elements after a floating element will flow around it.To avoid this, use the clear propertyoutline-width: medium|thin|thick|lengthoutline-style: dotted|dashed|solidoutline-color: color namefloat: left/rightclear: left|right|both

<html><head><style>p { border: 1px solid red; outline-style: dotted; outline-color: violet;}</style></head><body>

<p><b>Note:</b> Hy.</p>

</body></html>

of 18

Chapter 2.12 The :focus and :active Pseudo Classes

Pseudo-classes:- A pseudo-class is used to define a special state of an element. Style an element when a user mouse over it Style visited and unvisited links differently Style an element when it gets focus

CSS :active Selector

syntaxa:active { background-color: yellow;}

<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>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body></html>

of 18

CSS :focus Selectoris used to select the element that has focus.

CSS Syntax:focus { css declarations;}

<html><head><style>input:focus { background-color: yellow;}</style></head><body>

<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>

</body></html>

2.12.2 content Property

p::before { content: normal|counter|attr|string|open-quote|url|initial|inherit;}

A string Inserts plain text. A URL The URL can point to an image, text file, or HTML file to be included at this point. A counter A counter for numbering elements on the page (discussed in the next section). atrr(x) The value of an attribute named X that is carried on that element open – quote nserts the appropriate opening quote symbol close – quote Inserts the appropriate closing quote symbol no - open – quote Do not use any opening quotes. no - close – quote Do not use a closing quote (of particular use in prose where one person is speaking for a long while and style dictates the quote is closed only on the last paragraph).

of 18

2.12.3CSS cursor Property The cursor property specifies the type of cursor to be displayed when pointing on an element.cursor: crosshair/help/auto/…

<html><body><p>Mouse over the words to change the cursor.</p><span style="cursor:auto">auto</span><br><span style="cursor:crosshair">crosshair</span><br><span style="cursor:help">help</span><br></body></html>

2.12.4 display Property property specifies the type of box used for an HTML element.display: inline/ block

<html><head><style>p { display: inline;}</style></head><body><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p><p>This is a paragraph.</p>

</body></html>

of 18

display: inline;

display: block;

2.12.5 CSS visibility Propertyspecifies whether or not an element is visible.

visibility: visible|hidden

<html><head><style>h1.visible { visibility: visible}

h1.hidden { visibility: hidden}</style></head><body>

<h1 class="visible">This is a visible heading</h1><h1 class="hidden">This is an invisible heading</h1><p>Notice that the invisible heading still takes up space.</p>

</body></html>

2.13.1 Normal flow,In normal flow, the block - level elements within a page will flow from top to bottom.

of 18

Chapter 2.13 Positioning and Layout with CSS

2.13.6 z-index Property The z-index property specifies the stack order of an element.An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

CSS Syntax

z-index: auto|number|initial|inherit;<html><head><style>img { position: absolute; left: 0px; top: 0px; z-index: -3;}</style></head><body>

<h1>This is a heading</h1><img src="w3css.gif" width="100" height="140"><p>Because the image has a z-index of -3, it will be placed behind the text.</p></body></html>

2.13.2 The position PropertyThe position property allows you to specify how you want to control the position for a box (and

is generally used to take items out of normal flow).It can take the four values

Static This is the same as normal flow, and is the default, so you will rarely (if ever) see it specified. Relative The position of the box can be offset from where it would be if it were left in normal flow. Absolute The box is positioned exactly using x and y coordinates from the top - left corner of the

containing element. Fixed The position is calculated from the top - left corner of a browser window and does not

change position if the user scrolls the window.

of 18

what is css? - bim-notes.com€¦ · web viewword – spacing. controls the amount of space...

Documents