Hướng dẫn a css file is - một tệp css là

p { color: red; float: left; padding-left: 10px; }

p {
    color: red;
    float: left;
    padding-left: 10px;
}

style.css

Click vào dấu [+] để xem cấu trúc.

• Nội fung file index.html

div#content { width: 600px; }

Tiêu đề trang web

...Phần thân viết ở đây...

• Nội fung file style.css

div.navi { background: #333333; }

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

Chúng ta kết nối file CSS vào file HTML thông qua thẻ , cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.

• Tiêu đề trang web
• ...Phần thân viết ở đây...

div#content p { color: #333333; } /* Chon thanh phan p theo content*/

div.navi p { background: #333333; } /* Chon thanh phan p theo navi*/

div#content ul li { display: inline; } /* Chon thanh phan li theo content*/

Thuộc tính href ta phân tích như sau:

style.css là một file có tên là style với định dạng file là .css

css là folder chứa file style.css

/* Đây là dòng comment */

CSS là một ngôn ngữ dùng để trình bày hình thức thể hiện của các phần tử HTML. Như định dạng các phần tử văn bản (cơ chữ, font chữ, màu sắc ...), bố cục, dàn trang ... (CSS không phải là ngôn ngữ lập trình).

CSS viết tắt của cụm từ Cascading Style Sheets, về ngữ nghĩa thì có thể hiểu:

• Cascading : thể hiện cách ảnh hưởng của nhiều mã CSS đến phần tử HTML. Các CSS tác dụng vào một phần tử HTML xếp chồng thành nhiều lớp. Kết quả là sự tổng hợp của các lớp đó. : thể hiện cách ảnh hưởng của nhiều mã CSS đến phần tử HTML. Các CSS tác dụng vào một phần tử HTML xếp chồng thành nhiều lớp. Kết quả là sự tổng hợp của các lớp đó.
• Style Sheets: mã điều khiển cách hiện thị nội dung trang web.: mã điều khiển cách hiện thị nội dung trang web.

Ví dụ, trong một văn bản HTML phần tử

được định dạng bởi CSS.

• Mã CSS viết ở file .css thứ nhất có đưa ra thiết lập màu chữ đỏ, chữ in đậm (lớp 1).
• Rồi mã CSS viết ở file .css thứ hai lại đưa ra thiết lập màu chữ xanh (lớp 2).
• Tiếp theo ngay tại phần tử

  đó, cũng viết CSS và đặt màu nền là màu xám (lớp 3).

Cuối cùng, tổng hợp lại phần tử đó có màu anh, chữ in đậm, nền màu xám. Như vậy, phần tử

được định dạng bởi CSS ở ba nơi, kết quả thì chúng gộp ba lớp đó xếp chồng lên, định nghĩa sau có thể ghi đè định nghĩa trước. Đó là ý nghĩa của từ

p {
    color: red;
    float: left;
    padding-left: 10px;
}

CSS và HTML luôn đi cùng nhau: HTML tạo ra cấu trúc, nội dung các phần tử trong trang, CSS quy định cách hiện thị phần tử trên trang. HTML tạo ra cấu trúc, nội dung các phần tử trong trang, CSS quy định cách hiện thị phần tử trên trang.

Để học về CSS trước tiên phải hiểu cơ bản về HTML, rồi mới có thể thực hành css trong html.

Tại sao cần dùng CSS?

CSS cho phép bạn định nghĩa kiểu, cách hiện thị cho các phần tử HTML. Thêm css vào html giúp bạn phân tách giữa nội dung trang và cách trình bày trang. Nếu chỉ sử dụng HTML thì định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này rất khó để bảo trì khi trang web phức tạp. Khi sử dụng CSS thì các định đạng được loại bỏ khỏi văn bản HTML, định dạng được lưu vào một file CSS hay một khu vực riêng. cho phép bạn định nghĩa kiểu, cách hiện thị cho các phần tử HTML. Thêm css vào html giúp bạn phân tách giữa nội dung trang và cách trình bày trang. Nếu chỉ sử dụng HTML thì định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này rất khó để bảo trì khi trang web phức tạp. Khi sử dụng CSS thì các định đạng được loại bỏ khỏi văn bản HTML, định dạng được lưu vào một file CSS hay một khu vực riêng.

Nhúng CSS vào HTML

Để minh họa, tại đây có một đoạn mã CSS, nội dung đoạn mã này như sau (tạm thời bạn chưa cần hiểu về cú pháp):

color:white; background-color:red;

Mã này sẽ định dạng chữ là màu trắng, nền màu đỏ. Để áp dụng mã CSS tác dụng vào các phần HTML có ba cách nhúng CSS vào HTML là Inline, Internal và ExternalInline, Internal và External

• Inline: mã CSS viết tại thuộc tính

  p {
      color: red;
      float: left;
      padding-left: 10px;
  }

  3 của phần tử HTML: mã CSS viết tại thuộc tính

  p {
      color: red;
      float: left;
      padding-left: 10px;
  }

  3 của phần tử HTML
• Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ

  p {
      color: red;
      float: left;
      padding-left: 10px;
  }

  4: mã CSS trong chính văn bản HTML, nằm trong khối thẻ

  p {
      color: red;
      float: left;
      padding-left: 10px;
  }

  4
• External: mã CSS ở một file riêng biệt (thường là file.css) sau đó nạp vào HTML bằng phần tử html

  p {
      color: red;
      float: left;
      padding-left: 10px;
  }

  5 (liên kết css với html): mã CSS ở một file riêng biệt (thường là file.css) sau đó nạp vào HTML bằng phần tử html

  p {
      color: red;
      float: left;
      padding-left: 10px;
  }

  5 (liên kết css với html)

Kiểu inline và Internal thì chèn css vào html trực tiếp trong văn bản HTML.

Nhúng CSS dạng inline - dùng thuộc tính style

Cách này là đặt mã

p {
    color: red;
    float: left;
    padding-left: 10px;
}

p {
    color: red;
    float: left;
    padding-left: 10px;
}

Kết quả:

Bạn có thể thử thay các màu khác để kiểm tra như: blue, green, navy, orange ...

Nhúng CSS dạng Internal - CSS viết cùng HTML với thẻ

Cách này bạn sẽ dùng thẻ , tạo ra khu vực để viết CSS, bạn có thể để bất kỳ đâu trong HTML, nhưng nên đặt trong thẻ . Như ví dụ sau, trong khối

p {
    color: red;
    float: left;
    padding-left: 10px;
}

, đều có màu trắng, nền đỏ.