Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Css File Is Embedded in Head AS:: Case), and Makes The Font Available To

    Загружено:

    mrahroy
    24 просмотров12 страниц
    Some basics of CSS (Cascade Style Scripts)

    Оригинальное название

    Basic CSS rules

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PPTX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    Some basics of CSS (Cascade Style Scripts)

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    24 просмотров12 страниц

    Css File Is Embedded in Head AS:: Case), and Makes The Font Available To

    Загружено:

    mrahroy
    Some basics of CSS (Cascade Style Scripts)

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 12

    CSS FILE IS EMBEDDED IN HEAD

    AS:
    Inside theheadelement are twolink
    elements. The order of theselink
    elements matters.
    The browser first sees thelinkfor the
    custom fontfont.css(shift.css in this
    case), and makes the font available to
    use in the page.
    Next the browser sees
    thelinkformain.css. Since the
    browser now knows about the custom
    font, we can use it frommain.cssto
    style elements.

    <html>
    <head>
    <link
    href="http://s3.amazonaws.com/codecade
    mycontent/courses/ltp/css/shift.css"
    rel="stylesheet">
    <link href="main.css" rel="stylesheet">
    </head>

    CSS Rules
    Selectors

    color
    Font size
    Font weight n type
    Background
    border
    Padding
    Margin
    Position
    Clear (position) for next
    element

    Color
    .jumbotron h1 {
    color: red; or
    #9933CC

    H1 = heading

    Jumbotron is a class name as ;

    <div class="jumbotron">

    <div class="container">
    <h1>Find a place to stay.</h1>
    <p>Rent from people in over 34,000 cities and 192
    countries.</p>
    </div>
    </div>

    Fonts
    Three fonts commonly
    used with font-family are:
    font-family: Arial,
    Helvetica, sans-serif;
    font-family: "Times New
    Roman", Times, serif;
    font-family: "Courier New",
    Courier, monospace;

    Selector

    font-family: 'Shift', sans-serif;

    Fonts
    Text size can be measured
    inpixels,ems, orrems.
    We will use pixels here.
    Weight is used to tell Bold
    Itelic etc

    Selector

    font-size: 16px; (or 1em or 3


    rem)
    font-weight: bold;

    Background
    background-color: #cccccc;
    background-image:
    url('http://goo.gl/04j7Nn');

    Selector

    background-color: #cccccc;

    Border
    Theborderproperty sets the
    width, style, and color of an
    element's border

    Padding
    Thepaddingproperty creates space
    between the content and border of
    an element from each side.

    The propertiespaddingtop,padding-bottom,
    padding-left,
    andpadding-rightare
    available to set the padding
    on each side of an HTML
    element.

    Selector
    padding: 23px; or
    padding-top: 0px;
    padding-bottom: 0px;

    Margin

    Themarginproperty creates space for multiple HTML


    elements. The margin is a transparent area outside the border
    of an element.

    The propertiesmargin-top,margin- bottom, margin-left,


    andmargin-rightare available to set the margin on each
    side of an HTML element.

    To center an element, setmargin-right:


    autoandmargin-left:auto. The margin
    to the left and right will be equal and the
    element will be centered.

    .header h1{
    margin:16px 32px;
    margin:1rem 2rem;
    }

    Formatting different areas of


    html
    .class a{
    }

    a elements can be formatted by;

    .class h1{

    h elements can be formatted by;

    Paragraph by P as:

    }
    .jumbotron p{
    }

    Display
    .nav .container li{
    display : inline;

    CSS treats HTML elements like boxes. A box can be "block" or


    "inline".

    Block = (as a box in two


    lines)
    Inline = keep in same line

    Exp: making inline the nav classs containers li elements

    Вам также может понравиться