Sky CSS Tool

Que os códigos CSS das folhas de estilo são parte essencial para a criação de páginas para a internet, todo mundo sabe, mas para muitos eles são um tanto chatos e difíceis de serem escritos. Esse tipo de código só aparece para quem está desenvolvendo sites, mas já há bastante tempo que as tags do HTML que formatavam texto foram deixadas de lado, favorecendo o estilo externo. Se você deseja iniciar suas criações pelo mundo do Web Design, então Sky CSS Tool oferece uma solução, onde através dele não é preciso escrever o código CSS.

São as folhas de estilo que permitem os ajustes durante a criação do site, e também facilitam na hora de redesenhar as páginas. Mesmo que você não entenda de Web design, não é raro encontrar estilos mal-formatados, facilmente percebidos em visuais desalinhados ou mesmo que não funcionam. Visando resolver esse problema, o Sky CSS Tools permite a criação das folhas de estilo sem codificar nada, através do preenchimento direto de campos em sua interface virtual.

Comece localizando na coluna da esquerda, algumas das entidades do CSS, essas dispostas em lista são conhecidas por Selectors. No entanto pode ser necessário usar alguma entidade que não esteja presente no arquivo, para isso é preciso nomeá-la no campo situado abaixo da lista e acionar o botão Add. Caso alguma entidade existente não seja utilizada no seu site, há a opção de apagá-la da lista através do botão Remove.

Na lista da direita encontre as entidades, e através de cada campo de botões alcance as propriedades destinadas a cada entidade. O painel abaixo dos botões revela as diversas características, por meio deles acione valores relativos a cada propriedade. Para cada um dos campos desse painel estão presentes dicas sobre a utilização de cada característica. Comece a criar é só seguir as dicas:

• Em Font, altere a tipografia: tamanho, cor, família, distorções, espaçamentos, capitalização (Para quem já trabalha com o idioma universal, aí vai a respectiva versão em inglês: Font family ,Font Size, Line Height, Font Size Adjust, Font Weight, Font Variant, Font Stretch. Nas demais, basta seguir o exemplo).
• Em Text, altere o texto: decoração, alinhamento, capitalização, endentação, espacejamento, entrelinhado.
• Em Color/B.G. altere a cor e o fundo: cor de fundo e de frente, repetição de imagem de fundo, fixação da imagem de fundo, posição
• Em List altere as listas: posição, estilo, imagem de estilo
• Em Placement altere o posicionamento: posição, distâncias, flutuação, alinhamento vertical
• Em Display altere a visibilidade: cursor, visualização, visibilidade, Z-index, excesso de texto, margem, recorte
• Em Margins altere as margens: margens padrão, esquerda, direita, inferior e superior
• Em Padding altere o enchimento: enchimentos padrão, esquerdo, direito, inferior e superior
• Em Dimensions altere a dimensão: larguras padrão, máxima e mínima, alturas padrão, máxima e mínima
• Em Borders altere as bordas: estilos, largura e cor
• Em Tables altere as tabelas: renderização de bordas, espaçamento, lado de legenda, células vazias, cabeçalhos persistentes, layout de tabela.

Outra vantagem é poder visualizar os códigos CSS, assim você aprende ainda mais. É só pressionar o botão CSS Code que ele irá expor o código CSS que você compôs. As entidades listadas, em conjunto com as propriedades definidas para cada uma delas, estarão já formatadas na sintaxe correta para uma que você visualize o estilo ao inseri-lo em seu site junto as páginas em HTML.