찾으시는 정보가 있으시다면
주제별reference를 이용하시거나
우측 상단에 있는 검색기능을 이용해주세요

Introduction

CSS(Cascading Style Sheets) is the lang we use to style a Web page

It describes how HTML elements are to be displayed on media

It can control the layout of multiple web page all at once

External stylesheets are stored in CSS files

With an external stylesheet file, you can change the look of an entire website by changing just one file

History of CSS

HTML was never intended to contain tags for formatting a web page

Tags like <font>, and color attributes were added to the HTML 3.2,

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 W3C created CSS

CSS removed the style formatting from the HTML page

Syntax

CSS rule consists of a selector and a declaration block

Selector {property : value ; property : value; …. }

The selector points to the HTML element you want to style

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

Declaration blocks and surrounded by curly braces

Multiple CSS declarations are separated with semicolons

Selector

Divide CSS selectors into five categories

Simple selectors(select elements based on name, in, class)

Combinator selectors(select elements based on a specific relationship between them)

Pseudo-class selectors(select elements based on a certain state)

Pseudo-elements selectors(select and style a part of an element)

Attribute selectors(select elements based on an attribute or attribute value)

Simple Selector

Selector	Example	Description
#id	#firstname	Selects the element with id=”firstname”
.class	.intro	Selects all elements with class=”intro”
elements.class	p.intro	Selects only <p> elements with class=”intro”
*	*	Selects all elements
element	p	Selects all <p> elements
element,element,…	div,p	Selects all <div> elements and all <p> elements

How to CSS

Three ways of inserting a style sheet

External CSS

Internal CSS

Inline CSS

External CSS

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

Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section

Ex) <link rel=”stylesheet” href=”mystyle.css”>

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

Ex) <style> body{color: maroon;} </style>

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.

An inline style loses many of the advantages of a style sheet, use this method sparingly

The style attribute can contain any CSS property

Ex) <h1 style=”color:blue;”>Heading</h1>

Multiple style sheets

If some properties have been defined for the same selector in different style sheets, the value from the last read style sheet will be used

Cascading order

All the styles in a page will “cascade” into a new “virtual” style sheet by the following rules

Inline > External and Internal > Browser default

Inline style has the highest priority, and will override external and internal styles and browser defaults

Comment

Comments are used to explain the code, and may help when you edit the source code at a later date

Comments are ignored by browsers

Starts with /* and ends with */