Basic and Advanced CSS – Minimalism (P1)

Tram Ho

As the title I mentioned, this topic I will share about basic and advanced CSS according to what I have learned and are learning in a minimal way, there may be many shortcomings, to learn more deeply. people can search by keywords in major sections of the article. Thank you everyone for watching.

What is CSS?

  • According to the W3Schools page, CSS stands for Cascading Style Sheets.
  • CSS describes how HTML elements are displayed on screens or other media.
  • CSS helps you to control the layout of multiple web pages at once. Therefore it saves a lot of time for you at work.

1. Basic syntax

Selector : the object to be applied: eg body, h1, h2, img, .username, # title …

In addition to write selector name by class, id, tag. We can hierarchically write selector names to refer to images in #entry. For example: #entry img.

Example 1 code about input

To apply CSS to this particular search attribute, we use input[name= “Search”]

Use selectors to affect whole web pages * {color: red}

Property : properties that define the layout: eg background-color, font-family, color, padding, ..

Value : the value of the property: #FFF sets the page background white, for example.

2. Annotation in CSS

Comments will be ignored by the browser and not displayed on the web page. Use the structure /*.........*/ above 1 line or more for comments. For example:

Also, to write comments faster, type the text you need to annotate, then highlight it and use Ctrl + / to create a caption.

3. Embed CSS in HTML

There are three ways to add CSS to HTML files

  • External CSS: write CSS in a separate file, name it <name>.css , then use the link tag to embed this file in the <head> of the html file.

Example: file myStyle.css :

html file

  • Internal CSS: put in the head of html file, structured with <style></style>

Example: html file

  • Inline CSS: applies directly to the element. CSS this way is not recommended, file management would be difficult using Inline CSS , as it only applies to a single element.

Example: html file

4. CSS Unit:

Length unit

  • % : percent, is the reference unit of proportion to a parent element based on size.
  • in : inch (1 inch = 2.54 cm)
  • em : 1em is equivalent to the current font size, if the current font is 14px then 1em = 14px
  • ex : 1ex is equal to the height of the current x
  • pt : Point (1pt = 1/72 inch)
  • pc : Pica (1pc = 12pt)
  • px : Pixel (pixels on the computer screen)
  • cm : defines the unit of measure in cm
  • mm : defines the unit of measure in mm
  • vh : 1% of viewport height
  • vw : 1% of viewport width

5. Priority in CSS placement

Change the priority for CSS properties:

If the same property is for a selector , if both have !important , the latter is retrieved.

6. Background

6.1. Màu nền: :: (background-color)

6.2 Ảnh nền: (background-image)

6.3 Lặp lại ảnh nền: (background-repeat)

6.4.Khóa ảnh nền: (background-attachment)

6.5. Định vị ảnh nền: (background-position)

We can group CSS properties:

into a short line

7. Fonts

7.1. Font-family

Defines a priority list of fonts that will be used for display on the web page. There are two specified types of fonts: family-names and generic families

7.2. Font-style

Defines the application of lower case, italic, or italic styles to text.

7.3. Font-variant

Used to select normal mode and mode the small-caps (lower case size of normal capital letters) of a font.

7.4. Font-weight

Used to select normal or bold mode

7.5. Font-size

Used to adjust the font size

7.6. Rút gọn font:

From your writing

it can be shortened to

8. Text

8.1. Màu chữ (color)

To color the text for a certain element on the web page

8.2. Text-indent

Creates an indentation for the first line of text

8.3. Text-align

Align text for web page elements. There are 4 values: left ( left aligned), right , center (centered), justify .

8.4. Letter-spacing

Used to adjust the spacing between characters in a text.

8.5. Text-decoration

Add effects: underline , line-through , overline , blink ( blink effect).

8.6. Text-transform

Specifies the uppercase or lowercase mode of the document regardless of the original HTML text. There are 4 values: uppercase (capital), lowercase ( lowercase ), capitalize ( capitalize the first letter in each word) and none (no effect applied).

Temporarily end part 1 here offline. Thank you everyone for watching.

Share the news now

Source : Viblo