1 / 7

Mastering CSS: Enhance Website Layout & Design

Learn how CSS empowers web developers to control website layout & design, respecting XHTML standards, with inline & external stylesheets, syntax rules, and selector types. Dive into the world of cascading style sheets now!

benny
Télécharger la présentation

Mastering CSS: Enhance Website Layout & Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Technologies for web publishing Ing. Václav Freylich Lecture 5

  2. Content • CSS – cascading style sheets aTNPW1-5

  3. What is CSS • Tool for the website developers • Powerful „extension“ of the HTML • CSS give us more control over the layout and design of the website than HTML ever did. • CSS allow us to develop the website according the XHTML respecting all standards aTNPW1-5

  4. CSS – inline declaration CSS values and properties can be written directly in the HTML code inside the atribute style (availiable in all HTML elements) <p style="color: red;"></p> aTNPW1-5

  5. CSS – external style sheet CSS are usualy defined in the external file Example: mystyle.css External file is linked with HTML document Example: <link rel="stylesheet" type="text/css" href="mystyle.css" /> aTNPW1-5

  6. CSS – rule syntax CSS rule consists of selector and list of definitions Example: body { background: white; margin: 0 0 0 0; } aTNPW1-5

  7. CSS –types of selectors Selector types (binding the style rule to the element) 1) element selector CSSp{ text-align: right;} HTML <p>Hello world</p> 2) class selector CSS .myclass { text-align: right;} HTML<p class="myclass">Hello world </p> 3) id selector CSS #myid { text-align: right;} HTML<p id="myid">Hello world </p> aTNPW1-5

More Related