CSS stands for cascading Style Sheets . CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. It’s sort of the “brush” in Excel, by which, one can apply styles/formats to other web pages all at once. Speaknkig of CSS, we need to differentiate it from HTML. HTML is meant to describe the content of a web page, like :

This is a heading

It would be a tremendous amount of work if every content is decorated of its style, hence CSS is created solely to define style.

The syntax of CSS is composed of a selector and blocks of declarations:

p {
color: red;
/* This is a single-line comment */
text-align: center;
}

Comments are inserted by /* and */.

Simple selectors select elements based on name, id, class; Combinator selectors select elements based on a specific relationship between them; Psuedo-class selectors, Pseudo-elements selectors and Attribute selectors are other kind of selectors. This is better to be illustrated by examples:

.text-center{
text-align: center;
}

.text-left{
text-align: left;
}

.mystyle {
font-size: 11pt;
font-family: Arial;
border-collapse: collapse;
border: 1px solid silver;
}

.mystyle td, th {
padding: 5px;
}

.mystyle tr:nth-child(even) {
background: #E0E0E0;
}

.mystyle tr:hover {
background: silver;
cursor: pointer;
}

Now the tricky part is how to insert CSS into your file? There are three ways: external, internal and inline CSS.

External styles are defined within the element, inside the section of an HTML page:

Internal CSS is defined directly within HTML:

body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}

Inline style may be used to apply a unique style for a single element. So no need to insert into the head part, just type the below. It is not recommended because it defies the very reason why people use CSS for efficiency.

This is a heading

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:

1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default

So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

Other knowledge points are to learn what padding, margin, border, border-bottom(thickness of the bottom line in a table) means. And usually to define width and height is to use

“This element has a height of 200 pixels and a width of 50% “

div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}

There are plenty ways to manipulate text editing, maybe more than that is provided by Microsoft, reference to this link.

Making Link button is essential in creating my web apps, so CSS also has link styling options. For example, (this needs a further look)

Next the most important feature for me is the Table formatting. The details are available via this link.

Lastly, also foremost importantly, is to design button for inputting values. that’s CSS Forms. for example

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}

{% csrf_token %}