목차
CSS Tutorial
CSS Introduction
1. What is CSS?
- Stands for Cascading Style Sheets
- 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
- External stylesheets are stored in CSS files
2. Why Use CSS?
- Is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes
3. CSS Solved a Big Problem
- HTML was created to describe the content of a web page, like;
<h1>This is a heading</h1>
<p>This is a paragraph</h>- When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. 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 World Wide Web Consortium (W3C) created CSS.
4. CSS Saves a Lot of Work!
- The style definitions are normally saved in external .css files.
- With an external stylesheet file, you can change the look of an entire website by changing just one file!
CSS Syntax
Selector {Declaration}
ex) h1 {color:blue; font-size:12px;}- 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 a semicolon, and declaration blocks are surrounded by curly braces
CSS Selectors
- Used to “find” (or select) the HTML elements you want to style.
- We can divide CSS selectors into five categories :
- Simple selectors (select elements based on name, id, 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)
1. The CSS element Selector : Selects HTML elements based on the element name.
2. The CSS id selector
- Uses the id attribute of an HTML element to select a specific element.
- The id of an element is unique within a page, so the id selector is used to select one unique element!
- To select an element with a specific id, write a hash(#) character, followed by the id of the element.
* An id name cannot start with a number!
3. The CSS class Selector
- Selects HTML elements with a specific class attribute.
- To select elements with a specific class, write a period(.) character, followed by the class name.
- You can also specify that only specific HTML elements should be affected by a class
- HTML elements can also refer to more than one class
* A class name cannot start with a number!
4. The CSS Universal Selector : The universal selector (*) selects all HTML elements on the page.
5. The CSS Grouping Selectors
- Look at the following CSS code (the h1, h2, and p elements have the same style definitions)
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}- It will be better to group the selectors, to minimize the code
- To group selectors, separate each selector with a comma
CSS How To Add CSS
1. External CSS
- 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 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.
- How the “mystyle.css” file looks :
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
* Do not add a space between the property value and the unit
- Incorrect(space) : margin-left: 20 px;
- Correct(nospace) : margin-left: 20px;
2. Internal CSS
- May be used if one single HTML page has a unique style.
- is define inside the element, inside the head section.
3. Inline CSS
- May be used to apply a unique style for a single element.
- Add the style attribute to the relevant element. The style attribute can contain any CSS property.
- Tip : An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.
4. Multiple Style Sheets
- If some properties have been defined for the same selector (element) in different style sheets, the values from the last read style sheet will be used
- Example
- Assume that an external style sheet has the following style for the <h1> element
h1 {
color: navy;
}- Then, assume that an internal style sheet also has the following style for the <h1> element
h1 {
color: navy;
}- If the internal style is defined after the link to the external style sheet, the <h1> elements will be "orange“
- However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be "navy“