Introduction to CSS

Comments in CSS

/* this is a comment */

Comments in HTML

<!--This is a comment--> no closing tags, good for multiple people, good for websites, never appear on screen

Padding

space between content and border

Inline CSS

An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the <style> element, inside the head section.

Three Ways to Insert CSS

There are three ways of inserting a style sheet: External CSS Internal CSS Inline CSS

Cascading Order

What style will be used when there is more than one style specified for an HTML element? All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority: Inline style (inside an HTML element) External and internal style sheets (in the head section) Browser default So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section. An external style sheet can be written in any text editor, and must be saved with a .css extension. The external .css file should not contain any HTML tags. Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;

id Selector

id -Apply a CSS rule to ONEelement on a Webpage -Configure with #idNamein CSS file -The most specific CSS selector!

Why external style sheets?

-All layout and formatting are separated from contents -Same CSS can be used for every page of the website (pages link to same .css-file). -The HTML files are exactly the same -No need to copy style code into each webpage -Changes to CSS automatically apply to the entire website

What is CSS?

-CSS is an acronym for CascadingStyleSheets -CSS is a style language that defines layout of HTML documents -CSS offers more options and is more accurate and sophisticated than inline styling in HTML -HTML is used to structure content -CSS is used for formatting structured content

Class Selector

-Class selector -Apply a CSS rule to a certain "class" of elements on a Webpage. -Does not associate the style to a particular HTML element. -Configure with .classnamein CSS file

CSS Syntax( detailed)

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. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. Example In this example all <p> elements will be center-aligned, with a red text color: p {color: red;text-align: center;} Example Explained p is a selector in CSS (it points to the HTML element you want to style: <p>). color is a property, and red is the property value text-align is a property, and center is the property value