css - linkedin

13
{CSS } By: Gino Louie Peña

Upload: gino-louie-pena

Post on 18-Feb-2017

263 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: CSS - LinkedIn

{CSS}By: Gino Louie Peña

Page 2: CSS - LinkedIn

What is CSS?A style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document. CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

CSS stands for Cascading Style Sheets.

Page 3: CSS - LinkedIn

CSS SyntaxA CSS rule set consists of a selector and a declaration block:

The selector points to the HTML element you want to style. CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a property name and a value, separated by a colon.

Page 4: CSS - LinkedIn

Comments in CSSComments 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 starts with /* and ends with */. Comments can also span multiple lines:

<style>p { color: red; /* This is a single-line comment */ text-align: center;}

/* This isa multi-linecomment */</style>

Page 5: CSS - LinkedIn

How to implement CSS in your webpage?

When a browser reads a style sheet, it will format the document according to the information in the style sheet. There are 3 ways to insert CSS.• External style sheet• Internal style sheet• Inline style

Page 6: CSS - LinkedIn

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

External Style SheetWith an external style sheet, you can change the look of an entire website by changing just one file!Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the head section:

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. An example of a style sheet file called "myStyle.css"

<style>body { background-color: linen;}h1 { color: maroon; margin-left: 40px;} </style>

Page 7: CSS - LinkedIn

Internal Style SheetAn internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the head section of an HTML page:

<!DOCTYPE html><html><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>

Page 8: CSS - LinkedIn

Inline StylesAn inline style may be used to apply a unique style for a single element.

An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!

To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a <h1> element:

<!DOCTYPE html><html><body>

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

</body></html>

Page 9: CSS - LinkedIn

What if you have multiple CSS, is that possible?Yes! That is possible but take note that the Inline styles will override the defined styles from external sheets.

Also, If the link to the external style sheet is placed below the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

Page 10: CSS - LinkedIn

CSS Properties

Property Description CSS

color Sets the color of text 1

opacity Sets the opacity level for an element 3

Color Properties

Property Description CSS

text-decoration Specifies the decoration added to text 1

text-decoration-color Specifies the color of the text-decoration 3

text-decoration-line Specifies the type of line in a text-decoration 3

text-decoration-style Specifies the style of the line in a text decoration 3

text-shadow Adds shadow to text 3

text-underline-position Specifies the position of the underline which is set using the text-decoration property 3

Text Properties

Page 11: CSS - LinkedIn

CSS PropertiesWriting Mode PropertiesProperty Description CSS

direction Specifies the text direction/writing direction 2

text-orientation Defines the orientation of the text in a line 3

text-combine-upright Specifies the combination of multiple characters into the space of a single character 3

unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document

2

writing-mode 3

Table Properties

Property Description CSS

border-collapse Specifies whether or not table borders should be collapsed 2

border-spacing Specifies the distance between the borders of adjacent cells 2

caption-side Specifies the placement of a table caption 2

empty-cells Specifies whether or not to display borders and background on empty cells in a table 2

table-layout Sets the layout algorithm to be used for a table 2

Page 12: CSS - LinkedIn

CSS PropertiesBackground & Border PropertiesProperty Description CSS

background A shorthand property for setting all the background properties in one declaration

1

background-attachment Sets whether a background image is fixed or scrolls with the rest of the page 1

background-color Specifies the background color of an element 1

background-image Specifies one or more background images for an element 1

background-position Specifies the position of a background image 1

background-repeat Sets how a background image will be repeated 1

background-clip Specifies the painting area of the background 3

background-origin Specifies where the background image(s) is/are positioned 3

background-size Specifies the size of the background image(s) 3

border Sets all the border properties in one declaration 1

border-bottom Sets all the bottom border properties in one declaration 1

border-bottom-color Sets the color of the bottom border 1

border-bottom-left-radius Defines the shape of the border of the bottom-left corner 3

border-bottom-right-radius Defines the shape of the border of the bottom-right corner 3

border-bottom-style Sets the style of the bottom border 1

border-bottom-width Sets the width of the bottom border 1

border-color Sets the color of the four borders

Page 13: CSS - LinkedIn

Reference

• http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Sources

• http://www.w3schools.com/css/