CSS Syntax(1)
- A browser applies the default style to HTML elements.
- To decide the style of a webpage, we use Cascading Style Sheets(CSS), which separate the structure from presentation.
- There exists three ways to apply style to a HTML element.
- The first way is 'Inline Styles', which is specifying the formatting information in the element tag.
- The second way is 'Embedded Style Sheets', which embedding CSS into the head section.
- In this way, we could decide a particular style to be applied to every element of a specific tag.
- Also besides the type of the tag, we could apply the style to a specific class.
- Class could be duplicated in many elements, while Id should be distinct between elements.
- 'Cascading' means continuous, and this infers that CSS is read from top to bottom one by one.
- If two codes contradict each other, the one on the bottom is applied.
- When there exists conflicting styles, the descendant's properties have greater specificity than ancestor's properties and therefore applied not regarding the order.
stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override
- The third way is 'External Style Sheets', which is separating the CSS file from the HTML file, and linking it.
- This allows to apply a uniform look and feel to the whole website.
- Elements that allow other elements to come next to them are called inline elements, while elements that do not allow other elements to come next to them are called block elements.
- Example of a block elements are <div></div>, <body></body>.
- Example of inline elements are <span></span>, <img/>.
- We could decide how the element is displayed with the display property.
- The Box Model is thinking that a block-level element has a virtual box.
- Margin is the distance between the edges of an element and any other element. We specify by 'margin-top', 'margin-right', 'margin-left', and 'margin-bottom'.
- Padding is the distance between the content and its border. We specify by 'padding-top', 'padding-right', 'padding-left', 'padding-bottom'.
- Border lies between the padding and margin. We specify by 'border-width', 'border-color', 'border-style'.
- There exists three ways to specify the position of an element.
- Absolute positioning removes an element from the normal flow, while Relative positioning keeps an element in the general flow.
- Absolute positioning positions the element according to the distance from the margins of its containing block-level element (Move to the closest relative parent).
- Relative positioning positions the element relative to other elements.
- The 'top','bottom','left','right' attribute is specifying the location based on the top left corner.
- Fixed positioning alligns the element based on the screen.
- Here are some example of styles.
ex1) "font-size: 20pt;"
ex2) "color: blue;"
ex3) "font-weight: bold;"
ex4) "background-color: yellow;"
ex5) "font-family : arial;"
ex6) "text-decoration: underline;"
ex7) "z-index: 3;"
ex8) "background-image: url(yonsei.png);"
ex9) "background-position: bottom-right;"
ex10) "background-repeat: no-repeat"
ex11) "background-attachment: fixed;"
ex12) "text-align: justify;"
ex13) "width: 20%; text-align: center; overflow: scroll;"
- Pseudoclass of an element is used to define a special state of an element.
- ':hover' is applying styles to an element when mouse cursor is over it.
- CSS media types decide what a page should look like depending on the kind of media being used to display the page.
- Some examples of a media type for a webpage is 'screen', 'all', 'print', 'handheld', 'braille', and 'speech'.
- Media query features decide the characteristics of the media where content will be displayed.
ex1) width : indicate width of output surface such as window
ex2) height : indicate height of output surface such as window
ex3) device-width : indicate device that has exactly the given width
ex4) device-height : indicate device that has exactly the given height
ex5) orientation : used with portrait or landscape for devices that can do both
- Usually, the width property is sufficient for most needs compared to device-width.
- Many CSS Media query features accept a 'min' or 'max' prefix.
- We can define a media query directly within the <link> tag to decide which CSS file to apply depending on the device.