What is CSS ?
At the end of this topic you will:
- understand basic CSS principles
- to know main selectors
- to know typy of Connecting to HTML
- make simple style
Why should we know CSS?
CSS (Cascading Style Sheets) is a style sheet language that allows you to attach style (such as fonts and color) to structured documents (such as HTML documents and XML applications). Typically, CSS styles are used to create and style web page and XHTML elements written in custom HTML and XHTML, but can also be applied to any kind of XML document, including XML, SVG, and XUL. By separating the presentation style of documents from the content of the documents, CSS makes it easier to create web pages and maintain sites.
Cascading style sheets describe how to format elements using properties and the allowed values for those properties. A limited set of properties can be used for each element, the rest of the properties will have no effect on it.
Connecting CSS to HTML
There are three ways to connect style sheets to a web page:
- Internal (global) style sheets
- External (linked) style sheets
- External (linked) style sheets
Internal (global) style sheets
<style>
body {
background-color: lightblue;
}
</style>
External (linked) style sheets
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
External (linked) style sheets
<p style="font-size: 120%; font-family: monospace; color: #cd66cc"></p>
Types of selectors
Universal selector
* {margin: 0;}
Element selector
h1 {font-family: Lobster, cursive;}
Class selector
.headline {
text-transform: uppercase;
color: lightblue;
}
ID selector
#sidebar {
width: 300px;
float: left;
}
CSS flexbox
CSS flexbox (Flexible Box Layout Module) is a flexible container layout module, which is a way to lay out items based on the idea of an axis. Flexbox consists of a flex container and flex items. Flex items can be arranged in a row or column, and the remaining free space is distributed between them in various ways.
.container {
display: flex; /* or inline-flex */
}
Properties for the parent element
- flex-direction
- flex-wrap
- justify-content
- align-items
CSS positioning
CSS treats the layout of the html document as a tree of elements. A unique element that does not have a parent element is called the root element. The CSS Positioning module describes how any of the elements can be positioned regardless of the order of the document (ie, pulled from the "flow").
Normal flow includes block formatting context (elements with display block, list-item, or table), inline formatting context (elements with display inline, inline-block, or inline-table), and relative and sticky positioning of block level elements and strings.
Wrapping In a streamlined model, the block is removed from the normal flow and positioned to the left or right. Content flows around the right side of the float: left element and the left side of the float: right element.
Absolute positioning In the absolute positioning model, the block is completely removed from the normal flow and is assigned a position relative to the containing block. Absolute positioning is implemented using position values: absolute; and position: fixed
awesome website. thank you!
1
Amazing!!
5
i loved this article!
2